v-html 的 XSS 攻击

Posted 2021-04-29 一个人的前端

在 Vue 中有 v-html 这个便利的指令，可以让我们直接输出 HTML，但它有个缺点。

Vue 官网这样解释这个「指令」

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<p>Using mustaches: {{ rawHtml }}</p><p>Using v-html directive: <span v-html="rawHtml"></span></p>

输出代码：

Using mustaches: <span style="color: red">This should be red.</span>

Using v-html directive: This should be red.

这个 span 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

什么是 XSS 攻击？

XSS是跨站脚本攻击（Cross-Site Scripting）的简称。

XSS是一种注入脚本式攻击，攻击者利用如提交表单、发布评论等方式将事先准备好的恶意脚本注入到那些良性可信的网站中。

当其他用户进入该网站后，脚本就在用户不知情的情况下偷偷地执行了，这样的脚本可能会窃取用户的信息、修改页面内容、或者伪造用户执行其他操作等等，后果不可估量。

发送到Web浏览器的恶意内容通常采用javascript代码片段的形式，但也可能包括HTML，Flash或浏览器可能执行的任何其他类型的代码。

简单模拟一个：

<div id="app"> Welcome:  <span v-html="attack"></span></div >

new Vue({ el: '#app', data: { attack: '<script > alert(document.cookie)</script >', }});

https://codepen.io/lynnic26/pen/XawoJq

注意事项：

1. 尽量使用插值表达式 {{}}，它会把要显示的内容转为字符串。

2. 如果使用v-html，要保证来自服务端的渲染数据都是安全的。

3. 在使用第三方UI组件库的的时候，要检查一下它们渲染页面的方式，是否使用了v-html

---

参考资料：

[1]https://cn.vuejs.org/v2/guide/syntax.html

[2]https://github.com/lynnic26/LynnNote/issues/1

[3]https://zhuanlan.zhihu.com/p/32237154

---

推荐阅读：