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

什么是 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}))`
      })
    }
  }
}

四、重啟測試