Hello，大家好，我是 Sunday。

最近有個同學面試的時候被問到了特別多 網絡安全 相關的問題：

圖片

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

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

1.跨站腳本攻擊（XSS）

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

XSS 攻擊的原因是什么？

圖片

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

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

如何防止 XSS 攻擊？

防止 XSS 攻擊并不困難。

可以從三個部分進行思考

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

2.SQL注入

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

SQL注入的原理是什么？

圖片

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

如何防止 SQL 注入？

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

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

3.跨站請求偽造(CSRF)

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

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

圖片

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

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

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

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

4.中間人攻擊

中間人 (MitM) 攻擊迫使攻擊者攔截和操縱在兩方之間傳輸的信息

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

圖片

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

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

如何防止中間人攻擊

主要有三步：

• 使用安全的互聯網連接并注銷不再使用的應用程序。
• 不要連接到你不知道的網絡。例如，不要連接到咖啡館提供的免費 WiFi。
• 使用 HTTPS 和 TLS 等安全通信協議對傳輸中的所有數據進行加密。

5.點擊劫持

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

點擊劫持的原理是什么？

圖片

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

如何防止點擊劫持

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

6.安全配置錯誤攻擊

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

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

圖片

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

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

• 始終確保更新使用的服務的默認密鑰和密碼，并定期執行配置審核。
• 定期檢查安全設置還可以幫助降低可能存在安全配置錯誤或過時配置漏洞的風險。
• 對于具有不同憑據的類似配置的生產、開發和測試環境進行自動化構建和部署流程。

7.依賴性利用

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

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

圖片

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

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

如何防止依賴性利用

這個沒有太好的防范方式，只能是使用廣泛使用且維護得當的可靠且經過社區測試的庫。

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