浅谈Web前端安全策略xss和csrf，及又该如何预防？
Web前端安全策略xss和csrf的攻擊和防御
- 一、XSS跨站請(qǐng)求攻擊
- 1、什么是XSS
- 2、場(chǎng)景模擬
- 3、XSS的攻擊類型
- 4、如何防御XSS
- 二、XSRF跨站請(qǐng)求偽造
- 1、什么是csrf
- 2、場(chǎng)景模擬
- （1）場(chǎng)景一
- （2）場(chǎng)景二
- 3、CSRF的特點(diǎn)
- 4、CSRF攻擊方式
- 5、CSRF常見(jiàn)的攻擊類型
- 6、如何防御csrf
- 三、CSRF與 XSS 區(qū)別
- 四、結(jié)束語(yǔ)
隨著前端技術(shù)的不斷革新，前端早已不再是簡(jiǎn)簡(jiǎn)單單的做頁(yè)面了。現(xiàn)在的前端網(wǎng)站上會(huì)涉及到大量用戶的數(shù)據(jù)和隱私，那這些用戶數(shù)據(jù)安全嗎？答案并不是肯定的。因此，這個(gè)時(shí)候前端安全就顯得尤為重要。如果網(wǎng)站沒(méi)有做安全策略，那么就會(huì)很容易被攻擊者通過(guò)某些不為人知的操作，獲取到用戶的隱私信息。
在下面的這篇文章中，將講解前端安全策略 xss 和 csrf ！一起來(lái)一探究竟吧~
一、XSS跨站請(qǐng)求攻擊
1、什么是XSS
跨站腳本攻擊，縮寫為XSS(Cross Site Scripting)，是利用網(wǎng)頁(yè)的漏洞，通過(guò)某種方式給網(wǎng)頁(yè)注入惡意代碼，使用戶加載網(wǎng)頁(yè)時(shí)執(zhí)行注入的惡意代碼。
2、場(chǎng)景模擬
假設(shè)有一個(gè)博客網(wǎng)站，這個(gè)博客網(wǎng)站的安全做的很差。那么我現(xiàn)在準(zhǔn)備在這個(gè)網(wǎng)站上發(fā)布一篇博客，在發(fā)布的這篇博客中，我嵌入了一段
寫完之后呢，我成功把這篇博客發(fā)送出去了。現(xiàn)在，只要有人在這個(gè)網(wǎng)站查看我這篇博客文章，那么我就能輕松地收割訪問(wèn)者的 cookie ，這就是一個(gè)簡(jiǎn)單的 xss 攻擊流程。
了解完 xss 的定義之后，我們?cè)賮?lái)了解 xss 的攻擊類型。
3、XSS的攻擊類型
XSS一共分為三種：
- 非持久型跨站（也叫反射型）
- 持久型跨站（也叫存儲(chǔ)型）
- DOM跨站
（1）非持久型跨站（反射型）
①攻擊步驟
- 攻擊者構(gòu)造出特殊的 URL ，其中包含惡意代碼。
- 用戶打開帶有惡意代碼的 URL 時(shí)，網(wǎng)站服務(wù)端將惡意代碼從 URL 中取出，拼接在HTML中返回給瀏覽器。
- 用戶瀏覽器接收到響應(yīng)后解析執(zhí)行，混在其中的惡意代碼也被執(zhí)行。
- 惡意代碼竊取用戶數(shù)據(jù)并發(fā)送到攻擊者的網(wǎng)站，或者冒充用戶的行為，調(diào)用目標(biāo)網(wǎng)站接口執(zhí)行攻擊者指定的操作。
②攻擊場(chǎng)景
反射型 XSS (也被稱為非持久性 XSS )漏洞常見(jiàn)于通過(guò) URL 傳遞參數(shù)的功能，如網(wǎng)站搜索、跳轉(zhuǎn)等。
③攻擊方式
由于需要用戶主動(dòng)打開惡意的 URL 才能生效，攻擊者往往會(huì)結(jié)合多種手段誘導(dǎo)用戶點(diǎn)擊。
POST 的內(nèi)容也可以觸發(fā)反射型 XSS，只不過(guò)其觸發(fā)條件比較苛刻（需要構(gòu)造表單提交頁(yè)面，并引導(dǎo)用戶點(diǎn)擊），所以非常少見(jiàn)。
（2）持久型跨站（存儲(chǔ)型）
①攻擊步驟
- 攻擊者將惡意代碼提交到目標(biāo)網(wǎng)站的數(shù)據(jù)庫(kù)中。
- 用戶打開目標(biāo)網(wǎng)站時(shí)，網(wǎng)站服務(wù)端將惡意代碼從數(shù)據(jù)庫(kù)取出，拼接在HTML中返回給瀏覽器。
- 用戶瀏覽器接收到響應(yīng)后解析執(zhí)行，混在其中的惡意代碼也被執(zhí)行。
- 惡意代碼竊取用戶數(shù)據(jù)并發(fā)送到攻擊者的網(wǎng)站，或者冒充用戶的行為，調(diào)用目標(biāo)網(wǎng)站接口執(zhí)行攻擊者指定的操作。
②攻擊場(chǎng)景
存儲(chǔ)型 XSS 攻擊 (也被稱為持久型 XSS )常見(jiàn)于帶有用戶保存數(shù)據(jù)功能的網(wǎng)站，如論壇發(fā)帖、商品評(píng)論、用戶私信等。
③危害
它是最危險(xiǎn)的一種跨站腳本，相比反射型 XSS 和 DOM 型 XSS 具有更高的隱蔽性，危害更大，因?yàn)樗?strong>不需要用戶手動(dòng)觸發(fā)。
任何允許用戶存儲(chǔ)數(shù)據(jù)的 web 程序都可能存在存儲(chǔ)型 XSS 漏洞，當(dāng)攻擊者提交一段 XSS 代碼后，被服務(wù)器端接收并存儲(chǔ)，當(dāng)所有瀏覽者訪問(wèn)某個(gè)頁(yè)面時(shí)都會(huì)被 XSS 。
（3）DOM跨站
①攻擊步驟
- 攻擊者構(gòu)造出特殊的 URL ，其中包含惡意代碼。
- 用戶打開帶有惡意代碼的 URL 。
- 用戶瀏覽器接收到響應(yīng)后解析執(zhí)行，前端 JavaScript 取出 URL 中的惡意代碼并執(zhí)行。
- 惡意代碼竊取用戶數(shù)據(jù)并發(fā)送到攻擊者的網(wǎng)站，或者冒充用戶的行為，調(diào)用目標(biāo)網(wǎng)站接口執(zhí)行攻擊者指定的操作。
②危害
DOM通常表示 html、xhtml和xml中的對(duì)象，使用 DOM 可以允許程序和腳本動(dòng)態(tài)的訪問(wèn)和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。它不需要服務(wù)器解析響應(yīng)的直接參與，觸發(fā) XSS 依靠的是瀏覽器端的DOM解析 。
對(duì)以上三種xss的攻擊類型進(jìn)行一個(gè)小結(jié)：
反射型跟存儲(chǔ)型的區(qū)別是：
存儲(chǔ)型 XSS 的惡意代碼存在數(shù)據(jù)庫(kù)里，反射型 XSS 的惡意代碼存在 URL 里。
DOM 型跟前兩種區(qū)別是：
DOM 型 XSS 攻擊中，取出和執(zhí)行惡意代碼由瀏覽器端完成，屬于前端 JavaScript 自身的安全漏洞，而其他兩種 XSS 都屬于服務(wù)端的安全漏洞。
三者的對(duì)比：
| 反射型 XSS | URL | HTML |
| 存儲(chǔ)型 XSS | 后端數(shù)據(jù)庫(kù) | HTML |
| DOM 型 XSS | 后端數(shù)據(jù)庫(kù)/前端存儲(chǔ)/URL | 前端 JavaScript |
4、如何防御XSS
只要有輸入數(shù)據(jù)的地方，就可能存在 XSS 危險(xiǎn)。
（1）設(shè)置HttpOnly
在 cookie 中設(shè)置 HttpOnly 屬性后， js 腳本將無(wú)法讀取到 cookie 信息。
（2）轉(zhuǎn)義字符串
XSS 攻擊大多都是由數(shù)據(jù)的輸入和輸出作為攻擊點(diǎn)進(jìn)行攻擊，所以針對(duì)這幾個(gè)攻擊點(diǎn)，對(duì)數(shù)據(jù)進(jìn)行過(guò)濾。
其中，數(shù)據(jù)包括前端數(shù)據(jù)的輸入和輸出、后端數(shù)據(jù)的輸入和輸出。
那么，數(shù)據(jù)過(guò)濾是什么？又如何對(duì)數(shù)據(jù)進(jìn)行過(guò)濾呢？
數(shù)據(jù)過(guò)濾是對(duì)輸入格式的檢查，例如：郵箱，電話號(hào)碼，用戶名，密碼……等，按照規(guī)定的格式輸入。它不僅僅是前端負(fù)責(zé)，后端也要做相同的過(guò)濾檢查。如果沒(méi)有做數(shù)據(jù)過(guò)濾，攻擊者完全可以繞過(guò)正常的輸入流程，直接利用相關(guān)接口向服務(wù)器發(fā)送設(shè)置。
因此，可以通過(guò)封裝過(guò)濾函數(shù)對(duì)數(shù)據(jù)進(jìn)行過(guò)濾，目的是將幾個(gè)攻擊者常用的輸入內(nèi)容都進(jìn)行轉(zhuǎn)移，這樣就避免了瀏覽器解析成了腳本代碼。
function escape(str) {str = str.replace(/&/g, '&');str = str.replace(/</g, '<');str = str.replace(/>/g, '>');str = str.replace(/"/g, '&quto;');str = str.replace(/'/g, ''');str = str.replace(/`/g, '`');str = str.replace(/\//g, '/');return str; }（3）白名單
對(duì)于顯示富文本來(lái)說(shuō)，不能通過(guò)上面的辦法來(lái)轉(zhuǎn)義所有字符，因?yàn)檫@樣會(huì)把需要的格式也過(guò)濾掉。這種情況通常采用白名單過(guò)濾的辦法，當(dāng)然也可以通過(guò)黑名單過(guò)濾，但是考慮到需要過(guò)濾的標(biāo)簽和標(biāo)簽屬性實(shí)在太多，更加推薦使用白名單的方式。
二、XSRF跨站請(qǐng)求偽造
1、什么是csrf
跨站請(qǐng)求偽造(Cross-site request forgery)，也被稱為 one-click attack 或者 session riding，通常縮寫為 CSRF 或者 XSRF，是一種挾制用戶在當(dāng)前已登錄的 Web 應(yīng)用程序上執(zhí)行**非本意的操作**的攻擊方法。
如：攻擊者誘導(dǎo)受害者進(jìn)入第三方網(wǎng)站，在第三方網(wǎng)站中，向被攻擊網(wǎng)站發(fā)送跨站請(qǐng)求。利用受害者在被攻擊網(wǎng)站已經(jīng)獲取的注冊(cè)憑證，繞過(guò)后臺(tái)的用戶驗(yàn)證，達(dá)到冒充用戶對(duì)被攻擊的網(wǎng)站執(zhí)行某項(xiàng)操作的目的。
2、場(chǎng)景模擬
（1）場(chǎng)景一
假設(shè)你正在購(gòu)物，看重了某個(gè)商品，商品 id 是 100 。同時(shí)這個(gè)商品的付費(fèi)接口時(shí) xxx.com/pay?id=100 ，但是沒(méi)有任何驗(yàn)證。這個(gè)時(shí)候我是攻擊者，我看中了一個(gè)商品，id 是 200 。那么，我如何讓你來(lái)為我付款？
這個(gè)時(shí)候我像你發(fā)送了一封郵件，郵件標(biāo)題很是吸引人。但郵件正文隱藏著 <img src = "xxx.com/pay?id=200"> 。你一查看郵件，一點(diǎn)擊，就幫我購(gòu)買了 id 是 200 的商品。
（2）場(chǎng)景二
要完成一次 CSRF 攻擊，受害者必須依次完成兩個(gè)步驟：
- 登錄受信任網(wǎng)站 A ，并在本地生成 Cookie 。
- 在不登出 A 的情況下，訪問(wèn)危險(xiǎn)網(wǎng)站 B 。
看到這里，你也許會(huì)說(shuō)：“如果我不滿足以上兩個(gè)條件中的一個(gè)，我就不會(huì)受到CSRF的攻擊”。是的，確實(shí)如此，但是呢，你可能沒(méi)辦法保證以下情況不會(huì)發(fā)生哦！比如：
- 你不能保證你登錄了一個(gè)網(wǎng)站后，不再打開一個(gè) tab 頁(yè)面并訪問(wèn)另外的網(wǎng)站。
- 你不能保證你關(guān)閉瀏覽器了后，你本地的 Cookie 會(huì)立刻過(guò)期，你上次的會(huì)話已經(jīng)結(jié)束。（事實(shí)上，關(guān)閉瀏覽器不能結(jié)束一個(gè)會(huì)話，但大多數(shù)人都會(huì)錯(cuò)誤的認(rèn)為關(guān)閉瀏覽器就等于退出登錄/結(jié)束會(huì)話了…）
上述中所說(shuō)的網(wǎng)站，可能是一個(gè)存在其他漏洞，但又很受信任的且經(jīng)常被人訪問(wèn)的網(wǎng)站。
3、CSRF的特點(diǎn)
- 攻擊一般發(fā)起在第三方網(wǎng)站，而不是被攻擊的網(wǎng)站。被攻擊的網(wǎng)站無(wú)法防止攻擊發(fā)生。
- 攻擊利用受害者在被攻擊網(wǎng)站的登錄憑證，冒充受害者提交操作，而不是直接竊取數(shù)據(jù)。
- 整個(gè)過(guò)程攻擊者并不能獲取到受害者的登錄憑證，僅僅是“冒用”。
4、CSRF攻擊方式
跨站請(qǐng)求可以用各種方式：
- 圖片 URL 、超鏈接、 CORS 、 Form 提交等等。部分請(qǐng)求方式可以直接嵌入在第三方論壇、文章中，難以進(jìn)行追蹤。
- CSRF通常是跨域的，因?yàn)橥庥蛲ǔ８菀妆还粽哒瓶亍５侨绻居蛳掠腥菀妆焕玫墓δ?#xff0c;比如可以發(fā)圖和鏈接的論壇和評(píng)論區(qū)，攻擊可以直接在本域下進(jìn)行，且這種攻擊方式更加危險(xiǎn)！
5、CSRF常見(jiàn)的攻擊類型
1）GET類型的CSRF
GET 類型的 CSRF 是較為容易攻擊的一種方式，只需要一個(gè) HTTP 請(qǐng)求，攻擊者一般做出以下操作：
<img src="http://bank.example/withdraw?amount=10000&for=hacker" >在受害者訪問(wèn)含有這個(gè) img 的頁(yè)面后，瀏覽器會(huì)自動(dòng)向http://bank.example/withdraw?account=xiaoming&amount=10000&for=hacker發(fā)出一次 HTTP 請(qǐng)求。 bank.example 就會(huì)收到包含受害者登錄信息的一次跨域請(qǐng)求。
2）POST類型的CSRF
這種類型的 CSRF 攻擊通常使用的是一個(gè)自動(dòng)提交的表單，如：
<form action="http://bank.example/withdraw" method=POST><input type="hidden" name="account" value="xiaoming" /><input type="hidden" name="amount" value="10000" /><input type="hidden" name="for" value="hacker" /> </form> <script> document.forms[0].submit(); </script>訪問(wèn)該頁(yè)面后，表單會(huì)自動(dòng)提交，相當(dāng)于模擬用戶完成了一次 POST 操作。
POST 類型的攻擊通常比 GET 要求更加嚴(yán)格一點(diǎn)，但仍并不復(fù)雜。任何個(gè)人網(wǎng)站、博客，被黑客上傳頁(yè)面的網(wǎng)站都有可能是發(fā)起攻擊的來(lái)源，后端接口不能將安全寄托在僅允許 POST 上面。
3）鏈接類型的CSRF
比起其他兩種用戶打開頁(yè)面就中招的情況，鏈接類型的 CSRF 比較不常見(jiàn)，因?yàn)檫@種攻擊方式需要用戶點(diǎn)擊鏈接才會(huì)觸發(fā)。這種類型通常是在論壇等平臺(tái)發(fā)布的圖片中嵌入惡意鏈接，或者以廣告的形式誘導(dǎo)用戶中招，攻擊者通常會(huì)以比較夸張的詞語(yǔ)誘騙用戶點(diǎn)擊，例如：
<a href="http://test.com/csrf/withdraw.php?amount=1000&for=hacker" taget="_blank">重磅消息！！ <a/>6、如何防御csrf
1）驗(yàn)證碼
增加驗(yàn)證，例如密碼、短信驗(yàn)證碼、指紋等等，強(qiáng)制用戶必須與應(yīng)用進(jìn)行交互，才能完成最終請(qǐng)求。這種方式能很好的遏制 csrf ，但是用戶體驗(yàn)相對(duì)會(huì)比較差。
2）Referer check
referer 代表請(qǐng)求的來(lái)源，不可以偽造。后端可以通過(guò)寫一個(gè)過(guò)濾器來(lái)檢查請(qǐng)求的 headers 中的 referer ，檢驗(yàn)是不是本網(wǎng)站的請(qǐng)求。但缺點(diǎn)是瀏覽器可以關(guān)閉 referer ，且低版本的瀏覽器會(huì)存在偽造 Referer 的風(fēng)險(xiǎn)。
referer 和 origin 的區(qū)別，只有 post 請(qǐng)求會(huì)攜帶 origin 請(qǐng)求頭，而 referer 不論何種情況下都帶。
3）token
token 是最普遍的一種防御方法，后端先生成一個(gè) token ，之后將此放在數(shù)據(jù)庫(kù)中并發(fā)送給前端，那么前端發(fā)送請(qǐng)求時(shí)就會(huì)攜帶這個(gè) token ，后端通過(guò)校驗(yàn)這個(gè) token 和數(shù)據(jù)庫(kù)中的 token 是否一致，以此來(lái)判斷是否是本網(wǎng)站的請(qǐng)求。
示例：
用戶登錄輸入賬號(hào)密碼，請(qǐng)求登錄接口，后端在用戶登錄信息正確的情況下將 token 放到數(shù)據(jù)庫(kù)中，并返回 token 給前端，前端把 token 存放在 localstorage 中，之后再發(fā)送請(qǐng)求都會(huì)將 token 放到 header 中。
后端寫一個(gè)過(guò)濾器，攔截 POST 請(qǐng)求，注意忽略掉不需要 token 的請(qǐng)求，比如登錄接口，獲取 token 的接口，以免還沒(méi)有獲取 token 就開始檢驗(yàn) token 。
校驗(yàn)原則：數(shù)據(jù)庫(kù)中的 token 和前端 header 中的 token 一致的 post 請(qǐng)求，則說(shuō)明校驗(yàn)成功，給客戶端放行。
三、CSRF與 XSS 區(qū)別
CSRF 與 XSS 區(qū)別有以下兩點(diǎn)：
- 通常來(lái)說(shuō) CSRF 是由 XSS 實(shí)現(xiàn)的，CSRF 時(shí)常也被稱為 XSRF（CSRF 實(shí)現(xiàn)的方式還可以是直接通過(guò)命令行發(fā)起請(qǐng)求等）。
- 本質(zhì)上講，XSS 是代碼注入問(wèn)題，CSRF 是 HTTP 問(wèn)題。 XSS 是內(nèi)容沒(méi)有過(guò)濾導(dǎo)致瀏覽器將攻擊者的輸入當(dāng)代碼執(zhí)行，CSRF 則是瀏覽器在發(fā)送 HTTP 請(qǐng)求時(shí)候進(jìn)行。
四、結(jié)束語(yǔ)
對(duì)于前端來(lái)說(shuō)，防范攻擊還是很重要的，因?yàn)檎l(shuí)也預(yù)測(cè)不了我們寫的網(wǎng)站何時(shí)會(huì)受到攻擊。
本文很淺很淺的談?wù)摿岁P(guān)于Web前端安全中的兩種攻擊模式，希望對(duì)大家有幫助！
有不理解或有誤的地方也歡迎評(píng)論區(qū)評(píng)論或私信我交流~
- 關(guān)注公眾號(hào) 星期一研究室 ，不定期分享學(xué)習(xí)干貨，學(xué)習(xí)路上不迷路~
- 如果這篇文章對(duì)你有用，記得點(diǎn)個(gè)贊加個(gè)關(guān)注再走哦~
總結(jié)
以上是生活随笔為你收集整理的浅谈Web前端安全策略xss和csrf，及又该如何预防？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 手机怎么清理微信缓存？
- 下一篇： 详解队列在前端的应用，深剖JS中的事件循