隨著 Web 的應用廣泛普及，前端安全性成為不可忽視的課題。攻擊者透過前端漏洞進行攻擊，不僅會損害使用者的資料隱私，還可能導致業務系統崩潰，帶來嚴重的經濟損失和聲譽危機。為了確保前端應用的安全性，開發者需要了解並防範常見的安全威脅。
接著將介紹幾種主要的安全威脅及其應對措施，以建置更安全的前端應用。
跨站腳本攻擊（XSS，Cross-Site Scripting） 是最常見的前端安全威脅之一。攻擊者藉由在網頁中注入惡意腳本，使得當使用者訪問其頁面時，這些腳本會在使用者的瀏覽器中執行，進而竊取使用者的敏感資訊（如登入憑證）或操縱頁面行為。
防範措施
輸入驗證與輸出編碼
對使用者輸入的資料進行嚴格驗證和清理，防止攻擊者透過輸入惡意腳本。對動態內容進行 HTML 編碼，確保特殊字符（如 < 和 >）不會被誤解為 HTML 標籤或 JavaScript 代碼。
使用 Content Security Policy（CSP）
CSP 是一種安全機制，能夠限制網頁上可以執行的內容類型。通過配置 CSP，開發者可以禁止在網頁中執行未授權的腳本，進一步防止 XSS 攻擊。
避免直接插入使用者輸入到 DOM
如果必須插入使用者輸入到頁面，使用安全的 DOM 操作方法（如 textContent 或 innerText） 而不是直接插入 HTML 片段。
跨站請求偽造（CSRF，Cross-Site Request Forgery） 是一種透過誘騙使用者執行未授權操作的攻擊方式。攻擊者會建立惡意連結或表單，一旦使用者點擊或提交，這些請求將以使用者的身份發送到受信任的網站，導致使用者帳戶被盜或被篡改。
防範措施
使用 CSRF 令牌
CSRF 防禦的最佳方法之一是使用 CSRF 令牌。服務器可以生成一個唯一的 CSRF 令牌並將其嵌入到表單或請求中，只有持有正確令牌的請求才能被服務器接受。服務器在接收請求時會驗證該令牌，確保請求是從合法來源發出的，而不是透過偽造的連結發送的。
設置 SameSite Cookie 屬性
SameSite Cookie 是一種瀏覽器機制，透過限制跨站點 Cookie 的發送行為，可以減少 CSRF 攻擊的發生。將 Cookie 的 SameSite 屬性設置為 Strict 或 Lax，可以確保 Cookie 只能在同站點的請求中發送，可以防止 Cookie 在跨站請求中被自動發送，從而有效阻止 CSRF 攻擊。
驗證請求來源
檢查請求的 Referer 或 Origin 標頭內容，確保請求來源是合法的。如果請求來源與預期不符，可以拒絕處理請求。
點擊劫持（Clickjacking） 是一種使用 iframe 覆蓋使用者介面的攻擊。攻擊者誘使用者點擊一個看似無害的按鈕或連結，但實際上使用者點擊的是隱藏的惡意元素，導致使用者無意間執行了攻擊者設計的操作。
防範措施
**使用 X-Frame-Options HTTP Header **
設置 X-Frame-Options 為 DENY 或 SAMEORIGIN，可以防止網頁被嵌入到 iframe 中，從而避免點擊劫持攻擊。
配置 Content Security Policy（CSP）中的 frame-ancestors
CSP 中的 frame-ancestors 指令可以指定網頁允許被哪些來源嵌入。透過限制 frame-ancestors 的來源，可以防止頁面被惡意嵌入。
開放重定向漏洞使攻擊者能夠利用網頁中的不安全重定向機制，將使用者引導至惡意網站。這類攻擊通常用於釣魚攻擊，使用者誤以為自己正在訪問合法站點，實際上卻被重定向至惡意頁面。
防範措施
驗證重定向目標
開發者應在所有重定向操作中嚴格驗證重定向的目標 URL，確保目標 URL 屬於預期的可信域名。不要允許使用者輸入的 URL 參數直接決定重定向的目標，而是應使用固定的、經過驗證的目標地址。
使用白名單
對於必須使用重定向的場景，可以實現一個 URL 白名單，確保網頁只能重定向至可信的 URL 集合，避免惡意重定向的發生。
在前端應用中，儲存和傳輸敏感資訊（如使用者密碼、信用卡號等）時，如果沒有採取適當的安全措施，這些資訊可能會被攻擊者攔截或竊取。
防範措施
使用 HTTPS
確保應用使用 HTTPS 加密通訊，防止敏感資訊在傳輸過程中被竊聽或篡改。TLS 加密可以為資料提供安全保障，確保其在客戶端和服務器之間的傳輸過程中不被攻擊者攔截。
避免在前端儲存敏感資訊
不要在本地儲存（localStorage、sessionStorage）或 Cookie 中儲存敏感資訊。如果必須儲存相關資訊，確保對資料進行加密，並設置合理的過期時間。
啟用 HTTP Header 的安全功能
使用 HTTP Header（如 Strict-Transport-Security、X-Content-Type-Options 和 X-Frame-Options）增強其安全性，防止瀏覽器通過不安全的協議訪問網頁或執行不必要的 MIME 類型嗅探（MIME Type Sniffing）。
現代前端開發大量依賴第三方套件和框架。雖然這些提供了便捷的開發支持，但其中的安全漏洞也可能被攻擊者利用，進而影響整個網頁的安全性。
防範措施
定期更新第三方套件
前端開發中常用的套件和框架（如 React、Vue.js、Angular 等）不斷發布新版本，以修復已知的安全漏洞。因此保持依賴套件的最新狀態至關重要。
使用自動化安全掃描工具
使用像 npm audit 等工具，定期檢查和更新專案中所使用的第三方套件，檢測潛在的安全漏洞，並及時修復，確保使用的是最新的、安全的版本。
盡量減少依賴項
盡量減少使用不必要的第三方套件，避免引入過多的依賴項目。每一個套件都可能帶來潛在的安全風險，因此使用時要仔細評估其必要性和安全性，以減少潛在的攻擊。
前端開發不僅關乎使用者體驗和介面設計，安全性也是至關重要的考量因素。因隨著技術的發展，新的威脅和攻擊手段也在不斷湧現。因此藉由理解並防範常見的安全威脅，開發者可以確保網頁在面對潛在攻擊時依然安全可靠。定期審查程式碼、關注安全更新，並使用合適的安全工具，是保護網頁和使用者的最佳途徑。在前端安全領域，防患於未然永遠比事後補救更為有效。
iThome鐵人賽
看影片追技術