什么是 XSS 攻擊？

XSS是跨站腳本攻擊（Cross-Site Scripting）的簡(jiǎn)稱。

XSS是一種注入腳本式攻擊，攻擊者利用如提交表單、發(fā)布評(píng)論等方式將事先準(zhǔn)備好的惡意腳本注入到那些良性可信的網(wǎng)站中。

當(dāng)其他用戶進(jìn)入該網(wǎng)站后，腳本就在用戶不知情的情況下偷偷地執(zhí)行了，這樣的腳本可能會(huì)竊取用戶的信息、修改頁(yè)面內(nèi)容、或者偽造用戶執(zhí)行其他操作等等，后果不可估量。

發(fā)送到Web瀏覽器的惡意內(nèi)容通常采用JavaScript代碼片段的形式，但也可能包括HTML，F(xiàn)lash或?yàn)g覽器可能執(zhí)行的任何其他類型的代碼。

簡(jiǎn)單模擬一個(gè)：
HTML：
<div v-html="src" />
JS：
src: "<img src='../ww.png' onerror='alert(1)'/> "
運(yùn)行之后由于src地址對(duì)應(yīng)的資源找不到，會(huì)觸發(fā)img標(biāo)簽的error事件，最終alert彈框。這便是一個(gè)最簡(jiǎn)單的xss攻擊。

image.png

解決方案兩種，推薦法1：

法1：

一、下載依賴

cnpm install vue-dompurify-html

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

import VueDOMPurifyHTML from 'vue-dompurify-html'
Vue.use(VueDOMPurifyHTML)

三、使用

 <div v-dompurify-html="src" />

法2：

一、下載依賴

npm install xss --save

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

import xss from 'xss'
Vue.prototype.xss = xss

三、在vue.config.js中覆寫(xiě)html指令

  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
      })
  }

四、使用

 <div v-dompurify-html="src" />

image.png