Hello，大家好，我是 Sunday。

最近有個同學(xué)面試的時候被問到了特別多 網(wǎng)絡(luò)安全 相關(guān)的問題：

圖片

對于我們很多開發(fā)者來說，寫代碼一般都會只考慮業(yè)務(wù)，對于安全方面的問題確實不會過多考慮。所以一旦面試被問到安全相關(guān)的問題，那么不知道如何回答了。

所以說，咱們今天這篇文章就專門來說一下：前端常見的安全攻擊方式、原理、以及如何防護！

1.跨站腳本攻擊（XSS）

跨站點腳本攻擊(XSS)是最常見的網(wǎng)絡(luò)共計之一。在 XSS 攻擊中，攻擊者將惡意客戶端腳本注入受信任的網(wǎng)站，然后在用戶的瀏覽器中執(zhí)行。

XSS 攻擊的原因是什么？

圖片

XSS 攻擊的主要原因之一是在將用戶生成的輸入呈現(xiàn)在頁面上。例如，攻擊者可能能夠使用 JavaScript 注入惡意代碼，并且該代碼可以在你的應(yīng)用呈現(xiàn) DOM 時執(zhí)行。

此惡意代碼最終可能會訪問并竊取 用戶Token、cookie 以及瀏覽器中存儲的其他敏感信息。

如何防止 XSS 攻擊？

防止 XSS 攻擊并不困難。

可以從三個部分進行思考

• 確保驗證和清理允許用戶在必要時插入數(shù)據(jù)和編碼輸出的表單、輸入字段。
• 實施內(nèi)容安全策略 (CSP) 以限制加載的資源和腳本。
• 使用 Vue 和 React 等框架，它們具有針對跨站點腳本攻擊的內(nèi)置預(yù)防機制。

2.SQL注入

SQL 注入是一種非常危險的攻擊方式，并且已經(jīng)存在很長一段時間了。攻擊操縱數(shù)據(jù)庫查詢以獲得未經(jīng)授權(quán)的數(shù)據(jù)庫訪問，以執(zhí)行惡意活動，例如損壞數(shù)據(jù)庫或竊取敏感數(shù)據(jù)。

SQL注入的原理是什么？

圖片

簡而言之，SQL 注入讓攻擊者可以從前端執(zhí)行 SQL 查詢。這可能會導(dǎo)致破壞性操作，從而獲取你數(shù)據(jù)庫中的信息！

如何防止 SQL 注入？

防止 SQL 注入的策略分為兩部分：

• 首先，你需要確保前端輸入字段經(jīng)過正確驗證和處理。防止用戶在輸入的字段中插入惡意代碼。
• 驗證前端后，清理后端收到的數(shù)據(jù)也很重要。后端不要信任前端輸入的任何數(shù)據(jù)，因為任何人都可以獲取你的 API 端點并開始發(fā)送惡意輸入。因此，后端也需要進行驗證。此外，利用Burp Scanner 、 sqlmap、jSQL Injection和Invicti等工具來檢測應(yīng)用程序中潛在的 SQL 攻擊和相關(guān)漏洞。

3.跨站請求偽造(CSRF)

跨站點請求偽造 (CSRF) 是一種前端安全攻擊，它通過偽造的形式來執(zhí)行 你原本不希望執(zhí)行的操作。

跨站請求偽造的原理是什么？

圖片

通過偽裝的表單、鏈接或按鈕，用于更改用戶憑據(jù)、刪除或操縱敏感數(shù)據(jù)。

如何防止 跨站請求偽造(CSRF)

防止 CSRF 攻擊的最簡單方法之一是使用從服務(wù)器生成的 CSRF 令牌。你可以與客戶端共享這些令牌，以便后端可以在收到的每個請求中檢查令牌并驗證其真實性。因此，如果客戶端無法提供準確的令牌，你的服務(wù)器可以拒絕請求的操作。

此外，可以利用 .NET、Joomla、Spring (Spring Security) 和 Ruby on Rails 等框架的內(nèi)置 CSRF 支持來防止此類攻擊。

4.中間人攻擊

中間人 (MitM) 攻擊迫使攻擊者攔截和操縱在兩方之間傳輸?shù)男畔?/span>

中間人攻擊的原理是什么？

圖片

當攻擊者利用不安全的通信通道（通常通過公共 WiFi）時，就會發(fā)生這些攻擊。這種攻擊的受害者不會覺得自己受到了攻擊，因為他們認為自己正在與服務(wù)器進行完全正常且安全的對話，而他們共享的信息在此過程中遭到監(jiān)視或更改。

例如：你連接了一個 wifi 原本請求 lgdsunday.club 的地址，但是卻被這個 wifi 攔截代理（有點像 devServer 代理請求的感覺）

如何防止中間人攻擊

主要有三步：

• 使用安全的互聯(lián)網(wǎng)連接并注銷不再使用的應(yīng)用程序。
• 不要連接到你不知道的網(wǎng)絡(luò)。例如，不要連接到咖啡館提供的免費 WiFi。
• 使用 HTTPS 和 TLS 等安全通信協(xié)議對傳輸中的所有數(shù)據(jù)進行加密。

5.點擊劫持

點擊劫持（又名 — UI 糾正攻擊）是一種欺騙機制，它會誘騙用戶點擊與他們認為完全不同的內(nèi)容。

點擊劫持的原理是什么？

圖片

如圖所示，它將隱藏元素覆蓋在網(wǎng)站上合法可點擊組件的頂部。在這種情況下，用戶實際上點擊了一個無意的元素，這可能會在未經(jīng)他們同意的情況下觸發(fā)攻擊者的期望操作（比如轉(zhuǎn)賬）等意外操作。

如何防止點擊劫持

為了減輕點擊劫持攻擊的潛在風(fēng)險，可以使用的一種機制是使用X-Frame-Options標頭，它可以確保你的網(wǎng)站不會嵌入到其他網(wǎng)站或 IFrame 中。

6.安全配置錯誤攻擊

應(yīng)用程序的安全配置錯誤問題通常是由不正確的設(shè)置、默認值和過時的配置引起的，這些問題可能導(dǎo)致攻擊者利用的漏洞進行攻擊。

安全配置錯誤攻擊的原理是什么？

圖片

例如，在某些情況下，啟用目錄列表可能會泄露敏感信息，密碼和密鑰不會更新并保留為默認值，并且會暴露錯誤處理信息。

如何防止安全配置錯誤攻擊

• 始終確保更新使用的服務(wù)的默認密鑰和密碼，并定期執(zhí)行配置審核。
• 定期檢查安全設(shè)置還可以幫助降低可能存在安全配置錯誤或過時配置漏洞的風(fēng)險。
• 對于具有不同憑據(jù)的類似配置的生產(chǎn)、開發(fā)和測試環(huán)境進行自動化構(gòu)建和部署流程。

7.依賴性利用

前端應(yīng)用程序由許多第三方庫組成，用于使開發(fā)人員的工作更加輕松。但開發(fā)人員普遍忽視的是，這些庫有時可能存在安全漏洞。

依賴性利用的原理是什么？

圖片

例如，xxxxx 這個依賴庫存在一個巨大的漏洞，允許攻擊者執(zhí)行遠程代碼。因此，任何使用 xxxxx 的應(yīng)用程序都成為此攻擊的受害者。

我印象中有個庫之前出現(xiàn)過 主動作惡 的情況，但是具體忘記是哪個庫了。有知道的小伙伴，可以給我發(fā)消息哈

如何防止依賴性利用

這個沒有太好的防范方式，只能是使用廣泛使用且維護得當?shù)目煽壳医?jīng)過社區(qū)測試的庫。

除此之外，最好可以定期審核、依賴項更新和使用漏洞掃描工具進行檢查。