Vue解决V-HTML指令潜在的XSS攻击（'v-html' directive can lead to XSS attack vue/no-v-html）

2022-04-12 05:45:03

什么是 XSS 攻击？

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

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

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

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

简单模拟一个：
HTML：
<div v-html="src" />
JS：
src: "<img src=‘../ww.png‘ onerror=‘alert(1)‘/> "
运行之后由于src地址对应的资源找不到，会触发img标签的error事件，最终alert弹框。这便是一个最简单的xss攻击。
解决方案：

一、下载依赖

npm install xss --save

二、main.js中引入xss包并挂载到vue原型上

import xss from ‘xss‘
Vue.prototype.xss = xss

三、在vue.config.js或vue-loader.config.js中覆写html指令

vue.config.js

chainWebpack: config => {
    config.module
      .rule(‘vue‘)
      .use(‘vue-loader‘)
      .loader(‘vue-loader‘)
      .tap(options => {
        options.compilerOptions.directives = {
          html(node, directiveMeta) {
            (node.props || (node.props = [])).push({
              name: ‘innerHTML‘,
              value: `xss(_s(${directiveMeta.value}))`
            })
          }
        }
        return options
      })
  }

vue-loader.config.js

compilerOptions: {
  directives: {
    html(node, directiveMeta) {
      (node.props || (node.props = [])).push({
        name: ‘innerHTML‘,
        value: `xss(_s(${directiveMeta.value}))`
      })
    }
  }
}

四、重启测试