XSS／跨站腳本攻擊，是一種代碼注入網頁攻擊，攻擊者可以將代碼植入到其他用戶都能訪問到的頁面（如論壇、留言板、貼吧等）中，

如今，XSS 攻擊所涉及的場景愈發廣泛，越來越多的客戶端軟體支持 html 決議和 JavaScript 決議，比如：HTML 檔案、XML 檔案、Flash、PDF、QQ、一些音樂播放器以及瀏覽器的功能界面等，這些用戶經常使用的場景往往都是 XSS 攻擊的高發地帶，

一、XSS攻擊型別

1. 存盤型XSS（持久型）

攻擊者在表單內提交惡意 js 代碼 ( 如 <script>alert('hello')</script> )，網站后端對提交資料不做任何安全處理，直接存盤在資料庫中，當其他用戶訪問這個已被攻擊的網站，js 代碼攻擊就會被觸發，這個型別的 XSS 攻擊會存盤在資料庫中，持續時間長，影響范圍大，

2. 反射型XSS（非持久型）

反射型 XSS 攻擊，是正常用戶請求一個非法資源時觸發的攻擊，此型別攻擊通常需要用戶主動去訪問帶攻擊的鏈接，一旦點開了鏈接，大概率被成功攻擊（比如：我有一部電影資源，請點擊 http://xxxxx 下載），

3. DOM XSS

基于 DOM 的 XSS 攻擊是反射型攻擊的變種，服務器正常回傳資料，其攻擊在于正常用戶進行某種操作 ( js 操作) 時，觸發攻擊者的 URL 攻擊代碼，服務器難以檢測出這是否為非法請求，

二、XSS攻擊的危害

• 掛馬；
• 盜取用戶cookie；
• DoS（拒絕服務）客戶端瀏覽器；
• 釣魚攻擊，高級釣魚技巧；
• 撰寫針對性的 XSS 病毒，洗掉目標文章、惡意篡改資料、嫁禍；
• 劫持用戶 Web 行為, 進一步滲透內網；
• 爆發 Web2.0 蠕蟲；
• 蠕蟲式的 DDoS 攻擊；
• 蠕蟲式掛馬攻擊、刷廣告、刷流量、破壞網上資料
• ……

三、JavaScript攔截

隨著互聯網發展，XSS 攻擊涉及場景越大，其造成的危害隨之擴大，攔截與防護的關鍵，重中之重當然是從后端入手，然而，這并不意味著網頁前端無需進行相應的攔截，前后端共同攔截，網站應對 XSS 攻擊的防護才會更加周全，接下來，本文將淺析前端的 XSS 攻擊攔截，

XSS 攻擊簡單來說就是代碼的注入，特指惡意用戶輸入惡意程式代碼，為了防范這類代碼的注入，網站需要確保其用戶輸入的安全性，對于攻擊驗證，可以采用以下措施：

1. 編碼，即轉義用戶的輸入，把用戶的輸入解讀為資料而不是代碼；
2. 校驗，對用戶的輸入及請求一律進行黑名單過濾檢查，如對特殊字符進行過濾，設定輸入域的匹配規則等，主要針對三類注入：行內事件及行內腳本、靜態腳本、動態腳本；
3. 建立上報攻擊資訊，對攻擊者攻擊資訊進行分析，增強黑名單，

1. 編碼

在客戶端使用 JavaScript 對用戶輸入進行編碼時，有一些內置的方法和屬性可以在自動感知背景關系的情況下，對所有的輸入資料進行編碼，

一些自動編碼的方法可參考下表：

2. 行內事件及行內腳本

一些比較常見的注入方式，大部分都是 javascript:... 及行內事件 on* ，如：

 <a href="javascript:alert('hello')" ></a>
 <iframe src="javascript:alert('hello')" />
 <img src='https://www.cnblogs.com/tcxa/archive/2021/06/15/x' one rror="alert('hello')" />
 <video src='https://www.cnblogs.com/tcxa/archive/2021/06/15/x' one rror="alert('hello')" ></video>
 <div onclick="alert('hello')" onm ouseover="alert('hello2')" ><div>

類似這種注入，我們需要在瀏覽器觸發點擊事件前，對 javascript:... 內容進行黑名單判斷，以實作防護效果，對于 on* 也是一樣，可以使用 addEventListener 防護行內事件注入：

 // 定義 黑名單 策略
 var
 blackList = [
   'xss',
   'flow..'
 ];
 // 黑名單匹配
 function blackMatch(blackList, value) {
   if (!blackList) return false;
   for (var i=0; i <  blackList.length; i++) {
     var reg = new RegExp(blackList[i], 'i');
     if (reg.test(value)) {
       return true;
     } else {
         return false;
     }
 }

 document.addEventListener('click', function(e) {
     var el = e.target;
     //查找 a標簽 <a href="javascript:">
     if (el.tagName === 'A' && el.protocol === 'javascript:') {
         var code = el.href.substr(11);
         if (blackMatch(blackList, code)) {
             //非法輸入
             elem.href = 'javascript:void(0)';
         }
     }
 }, true)

3. 靜態腳本

通常，攻擊者會向頁面中注入一個靜態腳本鏈接，比如，注入 <scriptsrc="http://xxx/xss.js">，對于這類注入，我們需要在腳本執行前找出可疑腳本，并銷毀掉，此處可使用 MutationObserver 高級 api，在頁面加載變化時，對靜態腳本檔案進行監控：

 // Mutation 監聽DOM樹變化
 var observer = new MutationObserver(function(mutations) {
     mutations.forEach(function(mutation) {
          // 添加節點數
         var nodes = mutation.addedNodes;

         for (var i = 0; i <= nodes.length - 1; i++) {
             var node = nodes[i];

             //blacklist 黑名單策略串列
             if (blackMatch(blackList, code)) {
                 node.parentNode.removeChild(node);
                 console.log('發現可疑模塊:', node);
             }
         }
     });
 });

 // 當頁面元素節點添加和洗掉操作會被觀察到
 observer.observe(document, {
     subtree: true,
     childList: true
 });

4. 動態腳本

除上述靜態腳本外，攻擊者還經常使用動態腳本注入，而且 MutationObserver api 無法監聽 DOM 的變化，攻擊腳本依舊會執行，比如：

 var script = document.createElement('script');
 script.setAttribute('type', 'text/javascript');
 script.setAttribute('src', 'http://xxxxx/xss.js');

 document.getElementsByTagName('body')[0].appendChild(script)

這種注入方式，可能需要使用原生的 setAttribute 方法，來監聽 src 屬性的值，再通過黑名單判斷它是否具有合法性，重寫 setAttribute 介面來實作防護：

 var old_setAttribute = Element.prototype.setAttribute;
 
 // 重寫 setAttribute 介面
 Element.prototype.setAttribute = function(name, value) {

   if (this.tagName == 'SCRIPT' && /^src$/i.test(name)) {
     // 黑名單判斷
     if (blackMatch(blackList, value)) {
       console.log('發現可疑模塊:', value);
       return;
     }
   }

   old_setAttribute.apply(this, arguments);
 };

5. 上報攻擊資訊

上述幾種前端防護均需要黑名單庫進行判斷，然而如何才能增強黑名單呢？

我們需要將攻擊者每次的攻擊資訊收集起來，并發送到服務器進行分析、處理，這樣一來，不僅可以增強黑名單，還能根據收集到的資訊設計針對性措施，

可定義一個上報函式，使用 node 接收攻擊資訊，其結果如下：

 function hijackReport(name, value) {
   var img = document.createElement('img'),
     hijackName = name,
     hijackValue = https://www.cnblogs.com/tcxa/archive/2021/06/15/value.toString(),
     curDate = new Date().getTime();
     
     // 上報
       img.src ='http://192.168.1.3:3002/report/?msg=' + hijackName + 
       '&value='https://www.cnblogs.com/tcxa/archive/2021/06/15/+ hijackValue +'&time=' + curDate;
 }

在此，有一個防 XSS 攻擊的庫可供學習了解，

Tips - Content Security Policy (CSP)

使用驗證來防止 XSS 攻擊的缺陷在于，只要存在一絲漏洞，就會使網站遭到攻擊，而 Content Security Policy (CSP) 的標準則能夠降低這一風險，

（張杰 | 天存資訊）

Ref

1. 《Web前端黑客技術揭秘》 - 鐘晨鳴
2. ‘JavaScript防http劫持與XSS’ - shanyezi
3. https://github.com/leizongmin/js-xss

標籤：其他

上一篇：CSS ::marker 讓文字序號更有意思

下一篇：Vue cli + Element plus的查詢和洗掉