我正在设法弄清楚如何保护,
针对XSS攻击。当我访问Angular官方文档时,
https://angular.io/guide/security
,它说:
为系统地阻止XSS错误,Angular将所有值视为 默认情况下不受信任。当值从插入到DOM中时 模板,通过属性,属性,样式,类绑定或 插值,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攻击的方法,还是我需要寻找第三方解决方案?
当我用Google来搜索该主题时,我会看到很多博客文章站点和文章,例如,该项目旨在清理HTML:
答案 0 :(得分:2)
vue中没有内置的消毒剂。根据Evan You(Vue的创建者)comment的问题
内置消毒剂会增加包装袋的重量,以减少罕见的用例 (当大多数v-html用例用于可信内容时);也是 通过设置Vue.prototype。$ sanitize =添加sanitize-html很简单 sanitizeHTML,然后执行v-html =“ $ sanitize(html)”。
答案 1 :(得分: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 :(得分:0)
比答案更多的附加信息:就像在另一个 post 中提到的那样,sanitize-html
的缺点是 327 KB 的权重。但是有更小的包可用:
为了防止我们项目中的 XSS,我们使用了 vue-dompuritfy-html,它具有覆盖推荐的 eslint 规则 vue/no-v-html 的好处。安装后你可以简单地使用
<div v-dompurify-html="htmlContent" />