默认情况下，Vue 是否为 XSS 提供安全保护或防御？-解网

问：

我试图弄清楚如何保护，

角
Vue的
反应

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

https://angular.io/guide/security

，它说：

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

以及：

Angular 清理 HTML、样式和 URL 的不受信任的值; 无法清理资源 URL，因为它们包含任意法典。在开发模式下，Angular 在以下情况下会打印控制台警告必须在清理过程中更改值。

和：

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

当我转到 React 官方文档时，

https://reactjs.org/docs/introducing-jsx.html#jsx-prevents-injection-attacks

，它说如下：

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

和：

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

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

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

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

https://github.com/punkave/sanitize-html

javascript 角度 reactjs vue.js xss

我使用 vue 和 firebase firestore 构建了一个小型应用程序，并使用 v-html，这样我就可以在我的表单中编写 html，并在从 firestore 获取时呈现它。所有标签都用于格式化目的（ul、i 等），但我无法运行脚本标签，所以我暂停了 vue 现在正在清理或 firestore 是......

答：

21赞 dagalti 3/20/2019 #1

vue 中没有内置的清理器。根据 Evan You（Vue 的创建者）对问题的评论

内置消毒器会在极少数用例中增加额外的捆绑重量（当 V-HTML 的大多数用例都用于受信任的内容时）;它也是通过设置 Vue.prototype.$sanitize = 来添加 sanitize-html 很简单 sanitizeHTML，然后执行 v-html=“$sanitize（html）”。

查看这个帖子： https://github.com/vuejs/vue/issues/6333

OP的问题非常广泛，我不确定这是否是一个完整的答案。Vue 不提供内置的 HTML 清理程序，因此如果开发人员尝试渲染用户提交的 HTML，则需要第三方清理程序。然而，对于许多其他情况（比如显示带有绑定的纯文本），Vue 确实会转义内容，我相信这有助于降低 XSS 风险。vuejs.org/guide/best-practices/......v-text

3赞 RWAM 7/27/2021 #2

比答案更多的附加信息：就像在另一篇文章中提到的一样，确实有一个 327 KB 权重的缺点。但也有更小的软件包可用：sanitize-html

DOM浏览器（15 KB）
js-xss （28 KB）

为了在我们的项目中防止 XSS，我们使用了 vue-dompuritfy-html，它有一个好处，可以涵盖推荐的 eslint 规则 vue/no-v-html。安装后，您可以简单地使用

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

5赞 cwoods 7/28/2021 #3

帮助防范 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

0赞 Sigurd Kolltveit 2/11/2023 #4

我认为公认的答案具有误导性。清理 HTML 和转义 HTML（也称为 HTML 编码）是有区别的。前者意味着转弯

<img src=x onerror=alert(1)>

自

<img src="x">

而后者意味着将其变成

&lt;img src=x onerror=alert(1)&gt;

只有少数情况下需要 HTML 清理。一种情况是，当用户需要使用富文本格式编写消息时，因此您允许用户编写带有一些列入白名单的标记（如和）的 HTML。ibimg

但在 99% 的情况下，您只想让文本成为文本。所以当你写

<h1>{{ userProvidedString }}</h1>

用户输入

<img src=x onerror=alert(1)>

您希望页面从字面上显示。大多数现代框架，如 Vue、Angular 和 React 都是通过自动 HTML 编码输出来实现的。所以是的，Vue 默认会防御 XSS。<img src=x onerror=alert(1)>

如果你想让浏览器将输入解释为 HTML，以便页面显示图像和警告框，你可以在 Vue 中使用，这相当于在 Angular 和 React 中。在这种情况下，您应该考虑使用 HTML 清理器。v-htmlng-bind-htmldangerouslySetInnerHTML

上一个：spaCy - 按标签对实体进行排序的最有效方法

下一个：Let's Encrypt：应用程序设置下要求的 ClientID 与我输入的 ID 不同？

默认情况下，Vue 是否为 XSS 提供安全保护或防御？

Does Vue, by default, provide security for or protects against XSS?

评论

评论