前端面試之對(duì)安全防御的理解分析
1.引言
每逢前端面試,80%的候選人都會(huì)被問到這個(gè)問題。這問題確確實(shí)實(shí)是一道八股文。為了應(yīng)付面試,我自己也是反反復(fù)復(fù)背了好幾次,但是記了又忘,忘了又記,如此優(yōu)雅的惡性循環(huán)讓我痛下決心去搞定其中的枝枝葉葉。廢話不多說,上車吧。
2.常見前端攻擊策略
- SQL注入
- XSS攻擊
- CSRF攻擊
3.攻擊策略解釋
3.1 SQL注入
sql注入通常是在url頭或者表單內(nèi)部通過拼接sql語句實(shí)現(xiàn)攻擊。

它的原理比較簡(jiǎn)單,當(dāng)瀏覽器url頭或者表單提交數(shù)據(jù)到后端時(shí),后端會(huì)進(jìn)行數(shù)據(jù)庫操作,如果未經(jīng)過處理請(qǐng)求參數(shù),那么攻擊者會(huì)通過任意sql語句獲取關(guān)鍵敏感數(shù)據(jù)從而實(shí)現(xiàn)攻擊。
3.2 XSS攻擊
xss攻擊也是十分經(jīng)典的,在前端發(fā)展歷程中也是打不死的小強(qiáng),現(xiàn)在已經(jīng)衍生出了許多xss攻擊策略。
- 存儲(chǔ)型:經(jīng)過后端+經(jīng)過數(shù)據(jù)庫
存儲(chǔ)型攻擊通常指攻擊者在前端的表單上輸入惡意腳本代碼,后端將表單數(shù)據(jù)保存到數(shù)據(jù)庫,之后通過讀取數(shù)據(jù)庫信息顯示在前端。
如下所示,假設(shè)該表單是一個(gè)評(píng)論功能,后端將表單內(nèi)容保存到數(shù)據(jù)庫后展示在界面上。如果前端解析表單內(nèi)容是通過innerHTML,那用戶的cookie信息就會(huì)被竊取。

- 反射型:經(jīng)過后端+不經(jīng)過數(shù)據(jù)庫
反射型攻擊有個(gè)十分經(jīng)典的案例,用過qq的小伙伴都知道每年都會(huì)爆料某誘騙鏈接偽造qq登錄騙取用戶登錄信息造成個(gè)人數(shù)據(jù)泄露。這類誘導(dǎo)鏈接十分有趣,我本人也上當(dāng)過。它的標(biāo)題經(jīng)常是"什么,你竟然和同班xxx一起合過影"等刺激信息誘騙用戶點(diǎn)擊進(jìn)而輸入個(gè)人賬號(hào)信息。然后攻擊者后端會(huì)收到用戶輸入的賬號(hào)和密碼進(jìn)而盜竊。

- Dom型:前端
談到dom型攻擊,也是十分簡(jiǎn)單。根據(jù)名稱就知道和dom元素相關(guān)。此類攻擊方式是建立在dom節(jié)點(diǎn)上。如下例子
//正確的鏈接
<img src='http://www.baidu.com'/>
//錯(cuò)誤的鏈接
<img src="http://error.com"/ onerror=()=>{alert(document.cookie())}>看了上面的例子,相比有的小伙伴有了點(diǎn)頭緒,攻擊者修改img標(biāo)簽的src,并給dom添加錯(cuò)誤觸發(fā)事件,當(dāng)圖片無法加載就會(huì)觸發(fā)腳本代碼從而獲取用戶信息。
3.3 CSRF攻擊
csrf攻擊又稱為跨站偽造攻擊,具體解釋就是你在訪問淘寶頁面,此時(shí)一個(gè)yellow網(wǎng)站的彈窗突然出現(xiàn),由于你經(jīng)受不住好奇心,于是想一探究竟。然后你就進(jìn)入這個(gè)yellow網(wǎng)站,由于你在淘寶頁面有了登錄狀態(tài),前端自動(dòng)保存了cookie信息,當(dāng)你在進(jìn)入yellow網(wǎng)站時(shí)已經(jīng)向它的后端發(fā)起了http請(qǐng)求,此時(shí)cookie身份信息就被這個(gè)yellow網(wǎng)站竊取了。
4.攻擊防御的正確姿勢(shì)
4.1 SQL注入防御
此處我們只是討論前端在sql注入的防御措施,通常我們?cè)诒韱翁峤粫r(shí)對(duì)sql語句的特殊變量進(jìn)行轉(zhuǎn)譯,這樣可以將其作為普通字符串處理而組織獲取敏感信息。
4.2 XSS防御
- 針對(duì)登錄方式的,可以采取掃碼和動(dòng)態(tài)驗(yàn)證碼等結(jié)合方式
- 針對(duì)竊取用戶cookie的,我們可以在后端設(shè)置httponly防止前端讀取用戶的cookie
- 不相信用戶輸入的任何數(shù)據(jù),所有輸入的數(shù)據(jù)應(yīng)該在前端進(jìn)行轉(zhuǎn)譯和限制,減少innerHTML的使用
4.3 CSRF防御
看了上面的CSRF攻擊方式,我們可以總結(jié)以下防御手段
- 后端設(shè)置secure,這個(gè)字段保證了只有是https的網(wǎng)站才會(huì)將cookie攜帶,因?yàn)閔ttps都是經(jīng)過安全認(rèn)證的,一般不會(huì)存在問題
- 后端設(shè)置SameSites字段是Strict,這個(gè)字段稱為嚴(yán)格模式,它會(huì)校驗(yàn)當(dāng)前發(fā)起后端請(qǐng)求的網(wǎng)站是不是自己站點(diǎn)的,如果不符合不會(huì)攜帶cookie,有效的避免了危機(jī)。
- token驗(yàn)證機(jī)制,這個(gè)很有意思啊,有個(gè)面試官曾經(jīng)問過這么一個(gè)問題,聽過token可以防止csrf攻擊,那你token放在哪里?是cookie還是localstorage上?這個(gè)要好好考慮,這個(gè)必須是放在localstorage上,如果放在未經(jīng)后端嚴(yán)格設(shè)置的cookie上,還是會(huì)被第三方通過cookie獲取到你的token密鑰。由于localstorage在瀏覽器上存在同源機(jī)制,第三方打死都無法獲取你localstoarge的值,除非第三方偷你電腦。所以我們可以將token放到localstorage上預(yù)防csrf攻擊。
以上就是前端面試之對(duì)安全防御的理解分析的詳細(xì)內(nèi)容,更多關(guān)于前端面試安全防御的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
跨站腳本攻擊XSS(Cross Site Script)的原理與常見場(chǎng)景分析
XSS指的是惡意攻擊者往Web頁面里插入惡意html代碼,當(dāng)用戶瀏覽該頁之時(shí),嵌入其中Web里面的html代碼會(huì)被執(zhí)行,從而達(dá)到惡意攻擊用戶的特殊目的。這篇文章主要給大家介紹了關(guān)于跨站腳本攻擊XSS(Cross Site Script)的原理與常見場(chǎng)景的相關(guān)資料,需要的朋友可以參考下。2017-12-12
看別人怎么查QQ聊天記錄 比較詳細(xì)查詢QQ聊天記錄的方法?
要想看或?qū)С鰧?duì)方的QQ聊天記錄,需要使用專門的黑客軟件嗎?許多人會(huì)說當(dāng)然需要!其實(shí)并非如此,我們應(yīng)該如何防范。2012-01-01
網(wǎng)絡(luò)安全滲透測(cè)試之musl堆利用技巧
這篇文章主要為大家介紹了網(wǎng)絡(luò)安全滲透測(cè)試之musl堆利用技巧,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-02-02
Iptables防火墻limit模塊擴(kuò)展匹配規(guī)則詳解
這篇文章主要為大家介紹了Iptables防火墻limit模塊擴(kuò)展匹配規(guī)則詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
怎么查QQ聊天記錄 怎樣恢復(fù)刪除的手機(jī)QQ聊天記錄技巧?
怎么查QQ聊天記錄 怎樣恢復(fù)刪除的手機(jī)QQ聊天記錄技巧?究竟對(duì)方在隱瞞什么呢,大家可以通過下面的方法試試。2012-01-01

