默认情况下，Vue 是否为 XSS 提供安全性或防护？答案

【问题标题】：Does Vue, by default, provide security for or protects against XSS?默认情况下，Vue 是否为 XSS 提供安全性或防护？
【发布时间】：2019-03-20 13:47:01
【问题描述】：

我正在研究如何保护，

针对 XSS 攻击。当我访问 Angular 官方文档时，

，上面写着：

为了系统地阻止 XSS 错误，Angular 将所有值视为默认情况下不受信任。当一个值从一个模板，通过属性、属性、样式、类绑定，或插值，Angular 清理和转义不受信任的值。

还有：

Angular 会清理 HTML、样式和 URL 的不可信值；清理资源 URL 是不可能的，因为它们包含任意代码。在开发模式下，Angular 会打印控制台警告必须在清理期间更改值。

和：

Angular 将值识别为不安全并自动对其进行清理，删除标签但保留安全内容，例如元素。

当我去 React 官方文档时，

，上面写着：

在 JSX 中嵌入用户输入是安全的：

和：

默认情况下，React DOM 会转义之前嵌入 JSX 中的任何值渲染它们。因此，它确保您永远不会注入任何东西这没有明确写在你的应用程序中。一切都是在渲染之前转换为字符串。这有助于防止 XSS （跨站点脚本）攻击。

但是对于 Vue，我在他们的文档中找不到任何关于 XSS 保护的内容，或者他们可以默认提供的任何内容。

我的问题：默认情况下，Vue 是否提供任何针对 XSS 攻击的保护方式，还是我需要寻找第三方解决方案？

当我在谷歌上搜索这个主题时，我会得到很多博客文章网站和文章，例如，这个项目用于清理我的 HTML：

【问题讨论】：

不确定，是否有任何自动化，但有 v-text 与 v-html。
vuejs.org/v2/guide/syntax.html#Raw-HTML -> 这就是你要找的。他们没有提到 XSS 本身，也不需要提到它本身。如果 HTML 被转义，则无法嵌入任何内容，因此存在缓解的基础。
我使用 vue 和 firebase firestore 构建了一个小型应用程序，并使用 v-html 以便我可以在我的表单中编写 html 并在从 firestore 获取时呈现它。所有标签都用于格式化目的（ul、i 等），但我无法运行脚本标签，所以我怀疑 vue 现在正在清理或 firestore 正在......

【解决方案1】：

帮助防御 XSS 的一种方法是在您的 html 头中添加 内容安全策略。它通过限制页面可以加载的资源（脚本、图像）以及限制页面的框架来工作。

例如，以下指令仅允许从与页面本身和“apis.google.com”相同的来源加载脚本。

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://apis.google.com">

还有其他 CSP 设置可用于帮助缓解 XSS 攻击，例如随机数和哈希。欲了解更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

【讨论】：

【解决方案2】：

vue 中没有内置的 sanitizer。根据 Evan You（Vue 的创建者）comment 的问题

内置消毒剂会为罕见的用例增加额外的捆绑重量（当 v-html 的大多数用例用于可信内容时）；也是通过设置 Vue.prototype.$sanitize = 添加 sanitize-html 很简单 sanitizeHTML 然后执行 v-html="$sanitize(html)".

【讨论】：

谢谢，我自己用我的搜索词找不到这个，而且 Vue 网站上的搜索功能在插入“XSS”时似乎也没有触发，即使它在链接中提到' Mjh' 在我的 OP 的评论中提到。

【解决方案3】：

比答案更多的信息：就像在另一个 post 中提到的那样，sanitize-html 有一个 327 KB 重量的缺点。但是有更小的软件包可用：

为了在我们的项目中防止 XSS，我们使用了 vue-dompuritfy-html，它可以覆盖推荐的 eslint 规则 vue/no-v-html。安装后就可以直接使用了

<div v-dompurify-html="htmlContent" />

【讨论】：