前端面試之對安全防禦的理解分析

2022-10-02 14:01:02

1.引言

每逢前端面試，80%的候選人都會被問到這個問題。這問題確確實實是一道八股文。為了應付面試，我自己也是反反覆覆背了好幾次，但是記了又忘，忘了又記，如此優雅的惡性迴圈讓我痛下決心去搞定其中的枝枝葉葉。廢話不多說，上車吧。

2.常見前端攻擊策略

SQL隱碼攻擊
XSS攻擊
CSRF攻擊

3.攻擊策略解釋

3.1 SQL隱碼攻擊

sql注入通常是在url頭或者表單內部通過拼接sql語句實現攻擊。

它的原理比較簡單，當瀏覽器url頭或者表單提交資料到後端時，後端會進行資料庫操作，如果未經過處理請求引數，那麼攻擊者會通過任意sql語句獲取關鍵敏感資料從而實現攻擊。

3.2 XSS攻擊

xss攻擊也是十分經典的，在前端發展歷程中也是打不死的小強，現在已經衍生出了許多xss攻擊策略。

儲存型：經過後端+經過資料庫

儲存型攻擊通常指攻擊者在前端的表單上輸入惡意指令碼程式碼，後端將表單資料儲存到資料庫，之後通過讀取資料庫資訊顯示在前端。

如下所示，假設該表單是一個評論功能，後端將表單內容儲存到資料庫後展示在介面上。如果前端解析表單內容是通過innerHTML,那使用者的cookie資訊就會被竊取。

反射型：經過後端+不經過資料庫

反射型攻擊有個十分經典的案例，用過qq的小夥伴都知道每年都會爆料某誘騙連結偽造qq登入騙取使用者登入資訊造成個人資料洩露。這類誘導連結十分有趣，我本人也上當過。它的標題經常是"什麼，你竟然和同班xxx一起合過影"等刺激資訊誘騙使用者點選進而輸入個人賬號資訊。然後攻擊者後端會收到使用者輸入的賬號和密碼進而盜竊。

Dom型：前端

談到dom型攻擊，也是十分簡單。根據名稱就知道和dom元素相關。此類攻擊方式是建立在dom節點上。如下例子

//正確的連結
<img src='http://www.baidu.com'/>
//錯誤的連結
<img src="http://error.com"/ onerror=()=>{alert(document.cookie())}>

看了上面的例子，相比有的小夥伴有了點頭緒，攻擊者修改img標籤的src，並給dom新增錯誤觸發事件，當圖片無法載入就會觸發指令碼程式碼從而獲取使用者資訊。

3.3 CSRF攻擊

csrf攻擊又稱為跨站偽造攻擊，具體解釋就是你在存取淘寶頁面，此時一個yellow網站的彈窗突然出現，由於你經受不住好奇心，於是想一探究竟。然後你就進入這個yellow網站，由於你在淘寶頁面有了登入狀態，前端自動儲存了cookie資訊，當你在進入yellow網站時已經向它的後端發起了http請求，此時cookie身份資訊就被這個yellow網站竊取了。

4.攻擊防禦的正確姿勢

4.1 SQL隱碼攻擊防禦

此處我們只是討論前端在sql注入的防禦措施，通常我們在表單提交時對sql語句的特殊變數進行轉譯，這樣可以將其作為普通字串處理而組織獲取敏感資訊。

4.2 XSS防禦

針對登入方式的，可以採取掃碼和動態驗證碼等結合方式
針對竊取使用者cookie的，我們可以在後端設定httponly防止前端讀取使用者的cookie
不相信使用者輸入的任何資料，所有輸入的資料應該在前端進行轉譯和限制，減少innerHTML的使用

4.3 CSRF防禦

看了上面的CSRF攻擊方式，我們可以總結以下防禦手段

後端設定secure,這個欄位保證了只有是https的網站才會將cookie攜帶，因為https都是經過安全認證的，一般不會存在問題
後端設定SameSites欄位是Strict，這個欄位稱為嚴格模式，它會校驗當前發起後端請求的網站是不是自己站點的，如果不符合不會攜帶cookie,有效的避免了危機。
token驗證機制，這個很有意思啊，有個面試官曾經問過這麼一個問題，聽過token可以防止csrf攻擊，那你token放在哪裡？是cookie還是localstorage上？這個要好好考慮，這個必須是放在localstorage上，如果放在未經後端嚴格設定的cookie上，還是會被第三方通過cookie獲取到你的token金鑰。由於localstorage在瀏覽器上存在同源機制，第三方打死都無法獲取你localstoarge的值，除非第三方偷你電腦。所以我們可以將token放到localstorage上預防csrf攻擊。

以上就是前端面試之對安全防禦的理解分析的詳細內容，更多關於前端面試安全防禦的資料請關注it145.com其它相關文章！