Vue Academy · 课时

Vue 中的 XSS 防护

Q: 「Vue 中的 XSS 防护」这节课中我会学到什么？

Vue 的自动转义、v-html 的风险、使用 DOMPurify 清理内容，以及可信类型 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

Vue 的自动转义、v-html 的风险、使用 DOMPurify 清理内容，以及可信类型

Vue 中的 XSS 防护 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

什么是 XSS

跨站脚本攻击（XSS）是指将恶意脚本注入页面，并使其在另一名用户的浏览器中运行的攻击。它可以窃取 Cookie、token 和数据。Vue 默认会保护您，但某些写法会重新打开这道安全缺口。

Vue 会自动转义插值

双大括号插值 {{ }} 中的文本会自动进行 HTML 转义。包含标签的用户字符串会作为无害文本渲染，而不会被执行。

<!-- userInput = "<script>alert(1)</script>" -->
<p>{{ userInput }}</p>
<!-- renders the literal text, no script runs -->

属性绑定同样安全

使用 v-bind / :attr 进行绑定时，值也会被转义，因此注入的引号无法跳出属性并注入处理程序。

<div :title="userInput">Hover me</div>

v-html 的危险性

v-html 会直接设置 innerHTML。它不会进行转义，因此任何标记——包括脚本和事件处理程序——都会作为可执行的 HTML 渲染。

<!-- DANGEROUS with untrusted input -->
<div v-html="userInput"></div>

v-html 如何被利用

即使没有 script 标签，攻击者提供的 HTML 也可以通过事件处理程序属性或 img onerror 有效载荷来执行代码。

// attacker-supplied value
const userInput = "<img src=x onerror=stealCookies()>";

规则：绝不将用户输入传给 v-html

最简单的规则是绝不将不受信任的内容传给 v-html。只要来源由用户控制，就应使用会自动转义的普通插值。

必须渲染 HTML 时

有时确实需要富文本 HTML（例如 CMS 正文或 Markdown 输出）。在这种情况下，必须先清理 HTML，再进行绑定。

使用 DOMPurify 清理

DOMPurify 会移除危险标签和属性，同时保留安全的格式。请安装它，并在使用 v-html 前进行清理。

npm install dompurify

先清理，再绑定

在计算属性中使用 DOMPurify.sanitize 处理该值，然后绑定清理后的结果。

import DOMPurify from "dompurify";
import { computed } from "vue";

const safeHtml = computed(() =>
  DOMPurify.sanitize(props.rawHtml)
);
// template: <div v-html="safeHtml"></div>

配置允许的标签

您可以限制允许列表，使清理后只有预期的标签能够保留下来。

DOMPurify.sanitize(html, {
  ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p"],
  ALLOWED_ATTR: ["href"]
});

其他需要警惕的来源

网址同样不能盲目信任：绑定链接中的 javascript: href 可能执行代码。请验证或清理 href，并且绝不要根据用户数据构建动态的 <script> 来源。

// reject dangerous protocols
const safe = /^https?:/.test(url) ? url : "#";

快速检查

您必须渲染用户提交的 HTML。安全的做法是什么？

回顾

Vue 会自动转义 {{ }} 插值和属性绑定，从而消除大多数 XSS 风险。危险的例外是 v-html，它会渲染 raw HTML。绝不要直接将用户输入传给它；需要富文本 HTML 时，先使用 DOMPurify 清理，并且同样不要信任用户提供的网址。

常见问题解答

「Vue 中的 XSS 防护」课时是免费的吗？

是的 — 「Vue 中的 XSS 防护」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「Vue 中的 XSS 防护」这节课中我会学到什么？

Vue 的自动转义、v-html 的风险、使用 DOMPurify 清理内容，以及可信类型你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「Vue 中的 XSS 防护」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy