隨著互聯(lián)網(wǎng)的發(fā)達(dá)，各種WEB應(yīng)用也變得越來(lái)越復(fù)雜，滿足了用戶的各種需求，但是隨之而來(lái)的就是各種網(wǎng)絡(luò)安全的問(wèn)題。作為前端開(kāi)發(fā)行業(yè)的我們也逃不開(kāi)這個(gè)問(wèn)題。所以今天我就簡(jiǎn)單聊一聊WEB前端安全以及如何防范。

首先前端攻擊都有哪些形式，我們?cè)撊绾畏婪?

一、XSS攻擊

XSS是一種經(jīng)常出現(xiàn)在web應(yīng)用中的計(jì)算機(jī)安全漏洞，它允許惡意web用戶將代碼植 入到提供給其它用戶使用的頁(yè)面中。比如這些代碼包括HTML代碼和客戶端腳本。攻 擊者利用XSS漏洞旁路掉訪問(wèn)控制——例如同源策略(same origin policy)。這種類(lèi)型 的漏洞由于被黑客用來(lái)編寫(xiě)危害性更大的網(wǎng)絡(luò)釣魚(yú)(Phishing)攻擊而變得廣為人知。

XSS攻擊的危害包括：

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

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

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

　　4、非法轉(zhuǎn)賬

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

　　6、網(wǎng)站掛馬

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

XSS攻擊的具體表現(xiàn)：

　　1、JavaScript代碼注入

　　下面是代碼的頁(yè)面:

這段代碼的作用是把第一個(gè)輸入框的字符串，輸出到第二個(gè)輸入框，我們輸入1，那么第二個(gè)input里的value值就是1，下面是頁(yè)面的截圖和源代碼的截圖(這里我輸入下面的代碼來(lái)測(cè)試)

<SCRIPT>alert('xss')</SCRIPT>

明顯的可以看到，并沒(méi)有彈出對(duì)話框，大家可能會(huì)疑惑為什么沒(méi)有彈窗呢，看看源代碼

我們看到我們輸入的字符串被輸出到第15行input標(biāo)簽里的value屬性里面，被當(dāng)成value里的值來(lái)顯現(xiàn)出來(lái)，所以并沒(méi)有彈窗，這時(shí)候我們?cè)撛趺崔k呢?聰明的人已經(jīng)發(fā)現(xiàn)了可以在

<SCRIPT>alert('xss')</SCRIPT>

　　前面加個(gè)">來(lái)閉合input標(biāo)簽。所以應(yīng)該得到的結(jié)果為

成功彈窗了，我們?cè)诳纯催@時(shí)的頁(yè)面

看到后面有第二個(gè)input輸入框后面跟有">字符串，為什么會(huì)這樣呢，我們來(lái)看看源代碼

解決辦法：目前來(lái)講，最簡(jiǎn)單的辦法防治辦法，還是將前端輸出數(shù)據(jù)都進(jìn)行轉(zhuǎn)義最為穩(wěn)妥，雖然顯示出來(lái)是有script標(biāo)簽的，但是實(shí)際上，script標(biāo)簽的左右尖括號(hào)(><)，均被轉(zhuǎn)義為html字符實(shí)體，所以，便不會(huì)被當(dāng)做標(biāo)簽來(lái)解析的，但是實(shí)際顯示的時(shí)候，這兩個(gè)尖括號(hào)，還是可以正常展示的。

2、append的利用

　　上一小節(jié)我們防住了script標(biāo)簽的左右尖括號(hào)，但聰明的黑客們還是想出了好辦法去破解，我們知道，直接給innerHTML賦值一段js，是無(wú)法被執(zhí)行的。比如，

　　但是，jQuery的append可以做到，究其原因，就是因?yàn)閖query會(huì)在將append元素變?yōu)閒ragment的時(shí)候，找到其中的script標(biāo)簽，再使用eval執(zhí)行一遍。jquery的append使用的方式也是innerHTML。而innerHTML是會(huì)將unicode碼轉(zhuǎn)換為字符實(shí)體的。

　　利用這兩種知識(shí)結(jié)合，我們可以得出，網(wǎng)站使用append進(jìn)行dom操作，如果是append我們可以決定的字段，那么我們可以將左右尖括號(hào)，使用unicode碼偽裝起來(lái)，就像這樣–"u003cscriptu003ealert('xss');"。接下來(lái)轉(zhuǎn)義的時(shí)候，偽裝成u003的<會(huì)被漏掉，append的時(shí)候，則會(huì)被重新調(diào)用。雖然進(jìn)行了轉(zhuǎn)義，注入的代碼還是會(huì)再次被執(zhí)行

3、img標(biāo)簽的再次利用

　　img標(biāo)簽，在加載圖片失敗的時(shí)候，會(huì)調(diào)用該元素上的onerror事件。我們正可以利用這種方式來(lái)進(jìn)行攻擊。

但是，如果這張圖片的地址我們換種寫(xiě)法呢?

這時(shí)的源碼已經(jīng)變?yōu)?#8211;src為空，但是onerror的時(shí)候，執(zhí)行注入代碼。我們刷新查看頁(yè)面，就會(huì)發(fā)現(xiàn)，代碼注入已經(jīng)成功，需要繼續(xù)轉(zhuǎn)義。

二、 CSRF攻擊

什么是CSRF攻擊?

　　CSRF(Cross–site request forgery跨站請(qǐng)求偽造，也被稱為“One Click Attack”或者Session Riding，通常縮寫(xiě)為CSRF或者XSRF，是一種對(duì)網(wǎng)站的惡意利用。其實(shí)就是網(wǎng)站中的一些提交行為，被黑客利用，你在訪問(wèn)黑客的網(wǎng)站的時(shí)候，進(jìn)行的操作，會(huì)被操作到其他網(wǎng)站上(如：你所使用的網(wǎng)絡(luò)銀行的網(wǎng)站)。

1、要合理使用post與get

　　通常我們會(huì)為了省事兒，把一些應(yīng)當(dāng)提交的數(shù)據(jù)，做成get請(qǐng)求。殊不知，這不僅僅是違反了http的標(biāo)準(zhǔn)而已，也同樣會(huì)被黑客所利用。

　　比如，你開(kāi)發(fā)的網(wǎng)站中，有一個(gè)購(gòu)買(mǎi)商品的操作。你是這么開(kāi)發(fā)的：

那么，黑客的網(wǎng)站可以這樣開(kāi)發(fā)：

這樣的話，用戶只需要訪問(wèn)一次黑客的網(wǎng)站，其實(shí)就相當(dāng)于在你的網(wǎng)站中，操作了一次。然而用戶卻沒(méi)有感知。

所以，我們?nèi)粘５拈_(kāi)發(fā)，還是要遵循提交業(yè)務(wù)，嚴(yán)格按照post請(qǐng)求去做的。更不要使用jsonp去做提交型的接口，這樣非常的危險(xiǎn)。

2、xsrf攻擊升級(jí)

如果你使用了post請(qǐng)求來(lái)處理關(guān)鍵業(yè)務(wù)的，還是有辦法可以破解的。我們的業(yè)務(wù)代碼如下：

黑客代碼如下：

點(diǎn)擊后，用戶進(jìn)行了提交，卻連自己都不知情。這種情況如何防御呢?

　　最簡(jiǎn)單的辦法就是加驗(yàn)證碼，這樣除了用戶，黑客的網(wǎng)站是獲取不到用戶本次session的驗(yàn)證碼的。但是這樣也會(huì)降低用戶的提交體驗(yàn)，特別是有些經(jīng)常性的操作，如果總讓用戶輸入驗(yàn)證碼，用戶也會(huì)非常的煩。

　　另一種方式，就是在用訪問(wèn)的頁(yè)面中，都種下驗(yàn)證用的token，用戶所有的提交都必須帶上本次頁(yè)面中生成的token，這種方式的本質(zhì)和使用驗(yàn)證碼沒(méi)什么兩樣，但是這種方式，整個(gè)頁(yè)面每一次的session，使用同一個(gè)token就行，很多post操作，開(kāi)發(fā)者就可以自動(dòng)帶上當(dāng)前頁(yè)面的token。如果token校驗(yàn)不通過(guò)，則證明此次提交并非從本站發(fā)送來(lái)，則終止提交過(guò)程。如果token確實(shí)為本網(wǎng)站生成的話，則可以通過(guò)。

　　代碼如下

并沒(méi)有攜帶本站每次session生成的token，則提交失敗。

　　本站的網(wǎng)站form，則都會(huì)自動(dòng)攜帶本站生成的token

再次使用本站的網(wǎng)頁(yè)進(jìn)行提交，則通過(guò)

　　當(dāng)然，上面的只是例子，具體的token生成，肯定是要隨著session與用戶ID去變的，如果各位看官覺(jué)得自己的網(wǎng)站也需要加個(gè)token，請(qǐng)自行百度，進(jìn)行深入的學(xué)習(xí)。

三、網(wǎng)絡(luò)劫持攻擊

很多的時(shí)候，我們的網(wǎng)站不是直接就訪問(wèn)到我們的服務(wù)器上的，中間會(huì)經(jīng)過(guò)很多層代理，如果在某一個(gè)環(huán)節(jié)，數(shù)據(jù)被中間代理層的劫持者所截獲，他們就能獲取到使用你網(wǎng)站的用戶的密碼等保密數(shù)據(jù)。比如，我們的用戶經(jīng)常會(huì)在各種飯館里面，連一些奇奇怪怪的wifi，如果這個(gè)wifi是黑客所建立的熱點(diǎn)wifi，那么黑客就可以結(jié)果該用戶收發(fā)的所有數(shù)據(jù)。這里，建議站長(zhǎng)們網(wǎng)站都使用https進(jìn)行加密。這樣，就算網(wǎng)站的數(shù)據(jù)能被拿到，黑客也無(wú)法解開(kāi)。

　　如果你的網(wǎng)站還沒(méi)有進(jìn)行https加密的化，則在表單提交部分，最好進(jìn)行非對(duì)稱加密–即客戶端加密，只有服務(wù)端能解開(kāi)。這樣中間的劫持者便無(wú)法獲取加密內(nèi)容的真實(shí)信息了。

四、控制臺(tái)注入代碼

　　不知道各位看官有沒(méi)有注意到天貓官網(wǎng)控制臺(tái)的警告信息，如圖4.1所示，這是為什么呢?因?yàn)橛械暮诳蜁?huì)誘騙用戶去往控制臺(tái)里面粘貼東西(欺負(fù)小白用戶不懂代碼)，比如可以在朋友圈貼個(gè)什么文章，說(shuō):"只要訪問(wèn)天貓，按下F12并且粘貼以下內(nèi)容，則可以獲得xx元禮品"之類(lèi)的，那么有的用戶真的會(huì)去操作，并且自己隱私被暴露了也不知道。

　　天貓這種做法，也是在警告用戶不要這么做，看來(lái)天貓的前端安全做的也是很到位的。不過(guò)，這種攻擊畢竟是少數(shù)，所以各位看官看一眼就行，如果真的發(fā)現(xiàn)有的用戶會(huì)被這樣攻擊的話，記得想起天貓的這種解決方案。

五、釣魚(yú)

　　釣魚(yú)也是一種非常古老的攻擊方式了，其實(shí)并不太算前端攻擊。可畢竟是頁(yè)面級(jí)別的攻擊，我們也來(lái)一起聊一聊。我相信很多人會(huì)有這樣的經(jīng)歷，QQ群里面有人發(fā)什么兼職啦、什么自己要去國(guó)外了房子車(chē)子甩賣(mài)了，詳情在我QQ空間里啦，之類(lèi)的連接。打開(kāi)之后發(fā)現(xiàn)一個(gè)QQ登錄框，其實(shí)一看域名就知道不是QQ，不過(guò)做得非常像QQ登錄，不明就里的用戶們，就真的把用戶名和密碼輸入了進(jìn)去，結(jié)果沒(méi)登錄到QQ，用戶名和密碼卻給人發(fā)過(guò)去了。

　　其實(shí)這種方式，在前端也有利用。下面，我們就來(lái)試試如果利用前端進(jìn)行一次逼真的釣魚(yú)。

　　1、首先，我們?cè)趚x空間里分享一篇文章，然后吸引別人去點(diǎn)擊。

2 接著，我們?cè)赾heat.php這個(gè)網(wǎng)站上面，將跳轉(zhuǎn)過(guò)來(lái)的源網(wǎng)頁(yè)地址悄悄的進(jìn)行修改。

　　于是，在用戶訪問(wèn)了我們的欺騙網(wǎng)站后，之前的tab已經(jīng)悄然發(fā)生了變化，我們將其悄悄的替換為了釣魚(yú)的網(wǎng)站，欺騙用戶輸入用戶名、密碼等。

3 我們的釣魚(yú)網(wǎng)站，偽裝成XX空間，讓用戶輸入用戶名與密碼

　　這種釣魚(yú)方式比較有意思，重點(diǎn)在于我們比較難防住這種攻擊，我們并不能將所有的頁(yè)面鏈接都使用js打開(kāi)。所以，要么就將外鏈跳轉(zhuǎn)的連接改為當(dāng)前頁(yè)面跳轉(zhuǎn)，要么就在頁(yè)面unload的時(shí)候給用戶加以提示，要么就將頁(yè)面所有的跳轉(zhuǎn)均改為window.open，在打開(kāi)時(shí)，跟大多數(shù)釣魚(yú)防治殊途同歸的一點(diǎn)是，我們需要網(wǎng)民們的安全意識(shí)提高。

六、我們平時(shí)開(kāi)發(fā)要注意些什么?

　　開(kāi)發(fā)時(shí)要提防用戶產(chǎn)生的內(nèi)容，要對(duì)用戶輸入的信息進(jìn)行層層檢測(cè)要注意對(duì)用戶的輸出內(nèi)容進(jìn)行過(guò)濾(進(jìn)行轉(zhuǎn)義等)重要的內(nèi)容記得要加密傳輸(無(wú)論是利用https也好，自己加密也好)

　　get與post請(qǐng)求，要嚴(yán)格遵守規(guī)范，不要混用，不要將一些危險(xiǎn)的提交使用jsonp完成。

　　對(duì)于URL上攜帶的信息，要謹(jǐn)慎使用。心中時(shí)刻記著，自己的網(wǎng)站哪里可能有危險(xiǎn)。

以上便是關(guān)于前端安全的全部?jī)?nèi)容，更多前端問(wèn)題請(qǐng)?jiān)L問(wèn)PHP中文網(wǎng)：https://www.php.cn/