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

四、重啟測試