前端面試寶典四（網路安全篇）

如何攻擊

如何防禦

防範 csrf 可以遵循以下幾種規則：

get 請求不對資料進行修改

不讓第三方**訪問到使用者 cookie

阻止第三方**請求介面

請求時附帶驗證資訊，比如驗證碼或者 token

samesite

可以對 cookie 設定 samesite 屬性。該屬性設定 cookie 不隨著跨域請求傳送，該屬性可以很大程度減少 csrf 的攻擊，但是該屬性目前並不是所有瀏覽器都相容。

#驗證 referer

對於需要防範 csrf 的請求，我們可以通過驗證 referer 來判斷該請求是否為第三方**發起的。

token

伺服器下發乙個隨機 token（演算法不能複雜），每次發起請求時將 token 攜帶上，伺服器驗證 token 是否有效。

如何攻擊

例如通過 url 獲取某些引數

}上述 url 輸入可能會將 html 改為

，這樣頁面中就憑空多了一段可執行指令碼。這種攻擊型別是反射型攻擊，也可以說是 dom-based 攻擊。

也有另一種場景，比如寫了一篇包含攻擊**的文章，那麼可能瀏覽文章的使用者都會被攻擊到。這種攻擊型別是儲存型攻擊，也可以說是 dom-based 攻擊，並且這種攻擊打擊面更廣。

如何防禦

最普遍的做法是轉義輸入輸出的內容，對於引號，尖括號，斜槓進行轉義

function escape(str)

通過轉義可以將攻擊**變成

// ->

escape('')

對於顯示富文字來說，不能通過上面的辦法來轉義所有字元，因為這樣會把需要的格式也過濾掉。這種情況通常採用白名單過濾的辦法，當然也可以通過黑名單過濾，但是考慮到需要過濾的標籤和標籤屬性實在太多，更加推薦使用白名單的方式。

var xss = require('xss')

var html = xss('')

// ->

console.log(html)

以上示例使用了 js-xss 來實現。可以看到在輸出中保留了 h1 標籤且過濾了 script 標籤

密碼安全雖然大多是後端的事情，但是作為一名優秀的前端程式設計師也需要熟悉這方面的知識。

加鹽對於密碼儲存來說，必然是不能明文儲存在資料庫中的，否則一旦資料庫洩露，會對使用者造成很大的損失。並且不建議只對密碼單純通過加密演算法加密，因為存在彩虹表的關係。

通常需要對密碼加鹽，然後進行幾次不同加密演算法的加密。

## 加鹽也就是給原密碼新增字串，增加原密碼長度

sha256(sha1(md5(salt + password + salt)))

但是加鹽並不能阻止別人盜取賬號，只能確保即使資料庫洩露，也不會暴露使用者的真實密碼。一旦攻擊者得到了使用者的賬號，可以通過暴力破解的方式破解密碼。對於這種情況，通常使用驗證碼增加延時或者限制嘗試次數的方式。並且一旦使用者輸入了錯誤的密碼，也不能直接提示使用者輸錯密碼，而應該提示賬號或密碼錯誤。