Vue.js中的XSS攻击

[lynnic26]

在vue.js等前端框架中注入HTML

在vue2.x中是通过v-html指令实现注入html
对应的vue1.x中是{{{}}}

如何在Vue中模拟XSS攻击

我们使用v-html指令模拟一个简单的XSS攻击

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

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

我们期望会出现一个弹框显示cookie，但是什么也没有发生。
实际上是浏览器在浏览器加载页面的时候阻止了注入脚本。
我们试下通过把脚本注入HTML标签的事件中

new Vue({
 el: '#app',
 data: {
 attack: '<a onmouseover=alert(document.cookie)>点我</a>',
 }
});

在codepen中查看
让我们再试一下XSS攻击中常用的使用img标签攻击的方式

new Vue({
 el: '#app',
 data: {
 attack: '<img src="notValidUrl" onerror=alert(document.cookie)>',
 }
});

这个也是可以的
由于img的src属性不是一个有效的地址，所以onerror事件会触发

如何对待v-html指令

我们可以看出，使用v-html可能会导致恶意脚本注入我们的页面，那么，
在使用这些MVVM框架的时候，也要尽量小心使用类似v-html这样的指令
就像vue官网提醒的那样

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.

• 尽量使用插值表达式{{}}，它会把要显示的内容转为字符串。
• 如果使用v-html，要保证来自服务端的渲染数据都是安全的。
• 在使用第三方UI组件库的的时候，要检查一下它们渲染页面的方式，是否使用了v-html

Refference

XSS in Vue.js

[Colafornia]

有的时候绕不开，必须用

用 lodash 的 _.template 方法做一层字符串逃逸操作，再塞给 v-html 就行

[zenglinan]

插值表达式也有这个风险

{{attack}}

// ...
data(){
  return {
    attack: alert(document.cookie)
  }
}

[SageSanyue]

插值表达式也有这个风险

{{attack}}

// ...
data(){
  return {
    attack: alert(document.cookie)
  }
}

插值表达式没有xss风险哦，跟v-text是一样的

Try to use as much as possible interpolated expressions {{}}, they are stringified and cannot be executed by the browser.
https://blog.sqreen.com/xss-in-vue-js/