如果你正在構(gòu)建 web 應(yīng)用，那么你不僅要關(guān)注應(yīng)用的開發(fā)，還要關(guān)注其安全性。

事實(shí)上，由于 web 應(yīng)用程序設(shè)計(jì)不當(dāng)，每天發(fā)生的網(wǎng)絡(luò)攻擊超過 2,200 起^[1]。

因此，你必須了解 web 應(yīng)用中可能發(fā)生的不同類型的攻擊，以及如何防范這些攻擊。

1. 跨站腳本攻擊 (Cross-Site Scripting：XSS)

1. 攻擊者發(fā)現(xiàn)網(wǎng)站存在漏洞，然后注入腳本。
2. 攻擊者在網(wǎng)站上注入惡意腳本，目的是竊取每個(gè)訪問者的會(huì)話 cookie。
3. 每次訪問網(wǎng)站，惡意腳本都會(huì)被執(zhí)行。
4. 訪問者的會(huì)話 cookie 會(huì)被發(fā)送給攻擊者。

跨站腳本攻擊^[2]（XSS）是最常見的攻擊之一。在 XSS 攻擊中，攻擊者將惡意腳本注入可信網(wǎng)站，然后在用戶瀏覽器中執(zhí)行。

什么會(huì)導(dǎo)致 XSS 攻擊？

XSS 攻擊的主要原因之一是在頁面上渲染用戶輸入內(nèi)容之前，對這些輸入未處理或處理不當(dāng)。例如，攻擊者可以使用 JavaScript 注入惡意代碼，并在應(yīng)用渲染 DOM 時(shí)執(zhí)行。

這些惡意代碼最終會(huì)訪問并竊取用戶會(huì)話令牌、cookie 和其他存儲(chǔ)在瀏覽器中的敏感信息。

筆者舉例：比如用戶輸入 <script>alert('foolish!'')</script>，未進(jìn)行處理的話，在展示這段內(nèi)容時(shí)可能會(huì)在瀏覽器提示 foolish。

如何防止 XSS 攻擊？

防止跨站腳本攻擊并不難，對用戶輸入內(nèi)容的驗(yàn)證是核心。

確保對用戶插入的數(shù)據(jù)進(jìn)行過濾，內(nèi)容進(jìn)行編碼。此外，考慮使用內(nèi)容安全策略（CSP）^[3]來限制加載的資源和腳本?；蛘撸恍枋褂?Angular、Vue 和 React 等框架，這些框架都有針對跨站腳本攻擊的內(nèi)置預(yù)防機(jī)制。

2. SQL 注入

1. 攻擊者訪問 http://student.com?studentId=117 or 1=1; 接口。
2. 服務(wù)器生成 SQL（SELECT *FROM students WHERE studentId=117 or 1=1;） 訪問數(shù)據(jù)庫。
3. 數(shù)據(jù)庫返回所有學(xué)生數(shù)據(jù)給服務(wù)端。
4. 服務(wù)端接口把所有學(xué)生數(shù)據(jù)返回給攻擊者。

SQL 注入是一種存在已久的致命攻擊。攻擊會(huì)操縱數(shù)據(jù)庫查詢以獲得未經(jīng)授權(quán)的數(shù)據(jù)庫訪問權(quán)限，從而執(zhí)行惡意活動(dòng)，如破壞數(shù)據(jù)庫或竊取敏感數(shù)據(jù)。

簡單地說，SQL 注入可讓攻擊者從你的前端執(zhí)行 SQL 查詢。這可能會(huì)導(dǎo)致破壞性操作，使你的數(shù)據(jù)庫宕機(jī)！

例如，2020 年對愛沙尼亞中央健康數(shù)據(jù)庫的攻擊導(dǎo)致幾乎所有愛沙尼亞公民的健康記錄泄露，就是近年來發(fā)生的大規(guī)模 SQL 注入事件的一個(gè)令人痛心的例子。

如何防止 SQL 注入？

防止 SQL 注入的策略分為兩個(gè)部分：

1. 首先，需要確保前端輸入的字段經(jīng)過正確過濾和編碼。你需要防止用戶在輸入的字段中插入惡意代碼。
2. 前端對內(nèi)容驗(yàn)證后，后端接口對接收到的參數(shù)進(jìn)行驗(yàn)證和轉(zhuǎn)義同樣重要。不要相信你的接口參數(shù)，因?yàn)槿魏稳硕伎梢垣@取你的接口地址并開始發(fā)送惡意輸入。因此，后端也要確保對參數(shù)進(jìn)行驗(yàn)證。此外，利用 Burp Scanner^[4]、sqlmap^[5]、jSQL Injection^[6] 和 Invicti^[7] 等工具來檢測應(yīng)用中潛在的 SQL 攻擊和相關(guān)漏洞。

3. 跨站請求偽造（Cross Site Request Forgery: CSRF）

1. 攻擊者偽造一個(gè)向網(wǎng)站轉(zhuǎn)賬的請求。
2. 攻擊者會(huì)將請求嵌入在一個(gè)超鏈接中，并將其發(fā)送給可能已登錄網(wǎng)站的訪問者。
3. 訪問者點(diǎn)擊鏈接，無意中將請求發(fā)送至網(wǎng)站。
4. 網(wǎng)站驗(yàn)證完請求并從訪問者賬戶向攻擊者轉(zhuǎn)賬。

跨站請求偽造（CSRF）是一種前端安全攻擊，它會(huì)欺騙特定應(yīng)用上的認(rèn)證用戶，讓他們執(zhí)行他們不希望執(zhí)行的請求。

這可能是一個(gè)偽裝過的表單、鏈接或按鈕，在用戶發(fā)出請求時(shí)會(huì)更改用戶憑據(jù)、刪除或篡改敏感數(shù)據(jù)，或無意中從用戶的銀行賬戶中轉(zhuǎn)移資金。

筆者舉例：<img src="http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory" />，登錄的用戶訪問到這個(gè) img 標(biāo)簽時(shí)，會(huì)發(fā)起轉(zhuǎn)賬請求并自動(dòng)帶上登錄相關(guān)的 cookie。

如何防止 CSRF 攻擊？

防止 CSRF 攻擊的最簡單方法之一就是使用從服務(wù)器生成的 CSRF 令牌。你可以與客戶端共享這些令牌，這樣服務(wù)端就可以在收到的每個(gè)請求中檢查令牌并驗(yàn)證其真實(shí)性。如果客戶端未能提供準(zhǔn)確的令牌，服務(wù)器就可以拒絕所請求的操作。

此外，.NET、Joomla、Spring（Spring Security）和 Ruby on Rails 等框架都內(nèi)置了 CSRF 支持，可防止此類攻擊。

4. 中間人攻擊

中間人（MitM）攻擊指攻擊者截獲并操縱雙方之間傳輸?shù)男畔ⅰ?/p>

例如，攻擊者可以攔截你與 Facebook.com 的連接，竊取你的憑據(jù)，然后將你的請求轉(zhuǎn)發(fā)給 Facebook。

當(dāng)攻擊者利用不安全的通信渠道（通常通過公共 WiFi）時(shí)，就可以發(fā)生此類攻擊。這種攻擊的受害者并不覺得自己受到了攻擊，因?yàn)樗麄冋J(rèn)為自己正在與服務(wù)器進(jìn)行非常正常和安全的對話，而他們正在共享的信息卻在途中被窺探或篡改。

如何防止中間人攻擊？

1. 使用安全的互聯(lián)網(wǎng)連接，并在不使用應(yīng)用時(shí)及時(shí)退出登錄。
2. 不要連接不熟悉的網(wǎng)絡(luò)。例如，不要連接咖啡館里的免費(fèi) WiFi。
3. 使用安全通信協(xié)議，如 HTTPS 和 TLS，對傳輸中的所有數(shù)據(jù)進(jìn)行加密。

5. 點(diǎn)擊劫持

1. 攻擊者將點(diǎn)擊劫持的 “內(nèi)容” 放在廣告位置的頂部。
2. 用戶訪問廣告所在頁面。
3. 用戶點(diǎn)擊廣告后會(huì)被重定向到與廣告無關(guān)的頁面 - 這時(shí)用戶就被 “點(diǎn)擊劫持”了。

點(diǎn)擊劫持（A.K.A - UI 糾錯(cuò)攻擊）是一種欺騙機(jī)制，它欺騙用戶點(diǎn)擊了不是他們想要訪問的東西。

它將隱藏元素覆蓋在網(wǎng)站上一些可點(diǎn)擊的內(nèi)容之上。在這種情況下，用戶實(shí)際上是在點(diǎn)擊一個(gè)非預(yù)期元素，而該元素可能會(huì)在未經(jīng)用戶同意的情況下觸發(fā)資金轉(zhuǎn)移等意外操作。

筆者舉例：攻擊者開發(fā)了一個(gè)頁面，里面用 iframe 加載平鋪了百度頁面，并在百度搜索的按鈕上覆蓋一個(gè)元素，用戶點(diǎn)擊搜索時(shí)，實(shí)際點(diǎn)擊的是搜索之上的那個(gè)元素。

如何防止點(diǎn)擊劫持攻擊？

為了降低點(diǎn)擊劫持攻擊的潛在風(fēng)險(xiǎn)，可以使用一種機(jī)制，即使用 X-Frame-Options^[8] 標(biāo)頭，以確保你的網(wǎng)站沒有嵌入到其他網(wǎng)站或 IFrames 中。

6. 安全配置錯(cuò)誤攻擊

不恰當(dāng)?shù)脑O(shè)置、默認(rèn)值和過時(shí)的配置往往會(huì)導(dǎo)致應(yīng)用出現(xiàn)安全配置錯(cuò)誤問題，從而使網(wǎng)絡(luò)犯罪分子有機(jī)可乘。

例如，可能會(huì)出現(xiàn)以下情況：啟用目錄列表可能會(huì)泄露敏感信息、密碼和仍是默認(rèn)值的密鑰，以及暴露錯(cuò)誤處理信息。

如何防止安全配置錯(cuò)誤問題？

1. 始終確保已更新服務(wù)的默認(rèn)密鑰和密碼，并定期進(jìn)行配置審計(jì)。
2. 定期審查安全設(shè)置也有助于降低可能存在安全配置錯(cuò)誤或過時(shí)配置漏洞的風(fēng)險(xiǎn)。
3. 在配置相似的生產(chǎn)、開發(fā)和測試環(huán)境中使用不同的憑據(jù)進(jìn)行自動(dòng)構(gòu)建和部署流程，也有助于保護(hù)你的應(yīng)用。

7. 依賴性利用

筆者：上圖中公司內(nèi)部和公共 npm 上都有名為 company-interal-lib 的庫，如果你安裝時(shí)不指定公司的源，你可能會(huì)安裝 npm 上的包，這個(gè)包有安全漏洞。

前端應(yīng)用由大量第三方庫組成，這些庫的使用使開發(fā)人員的工作變得更加輕松。但開發(fā)人員經(jīng)常疏忽的一點(diǎn)是，這些庫有時(shí)可能存在安全漏洞。

例如，Log4j^[9] 存在一個(gè)巨大的漏洞，攻擊者可以在 Java 環(huán)境中執(zhí)行遠(yuǎn)程代碼。因此，任何使用 Log4j 的應(yīng)用程序都會(huì)成為這種攻擊的受害者！

如何防止依賴性利用？

使用廣泛使用、維護(hù)得當(dāng)、可靠并經(jīng)過社區(qū)測試的庫。

除此之外，定期審計(jì)、更新依賴關(guān)系和使用漏洞掃描工具^[10]也能確保前端應(yīng)用的安全。

總結(jié)

確保你構(gòu)建的 web 應(yīng)用保持高度安全非常重要。這不僅僅是為了你的應(yīng)用有良好的用戶體驗(yàn)，更是為了確保用戶數(shù)據(jù)的安全。

閱讀完這篇文章后，我建議你檢查一下你的應(yīng)用代碼，看看你的應(yīng)用是否容易出現(xiàn)上述問題，如果有，請立即采取相關(guān)策略！