給前端開發人員的10個安全建議

雷英

Web安全是前端開發人員經常忽略的主題。當我們評估網站的質量時，通常會查看性能，SEO友好性和可訪問性等指標，而網站抵御惡意攻擊的能力卻常常被忽略。即使敏感的用戶數據存儲在服務器端，后端開發人員也必須采取重要措施來保護服務器，最終保護數據的責任在后端和前端之間。雖然敏感數據可能被安全地鎖在后端倉庫中，但前端掌握著前門的鑰匙，竊取它們通常是獲得訪問權限的最簡單方法。

惡意用戶可以采取多種攻擊手段來破壞前端應用程序，但幸運的是，我們只需使用幾個正確配置，就可以在很大程度上減輕此類攻擊風險。本文將介紹10種簡單的操作，通過這些簡單的操作來改善對Web應用程序的保護。

關于響應頭的說明：處理響應頭曾經是后端的任務，如今經常將Web應用程序部署到Zeit或Netlify等無服務器云平臺，但配置它們返回正確的響應標頭成為前端責任。

下面來看一下具體的安全措施。

1.使用強大的內容安全策略

完善的內容安全策略（CSP）是前端應用程序安全的基石。CSP是瀏覽器中引入的一種標準，用于檢測和緩解某些類型的代碼注入攻擊，包括跨站點腳本（XSS）和點擊劫持。

強CSP可以禁止可能有害的內聯代碼執行，并限制加載外部資源的域。可以通過將Content-Security-Policy頭設置為以分號分隔的指令列表來啟用CSP。如果網站不需要訪問任何外部資源，一個良好的頭的起始值可能是這樣的：

Content-Security-Policy： default-src none； script-src self； img-srcself； style-srcself； connect-srcself；

在此，將script-src，img-src，style-src，connect-src指令設置為self，以指示所有腳本、圖像、樣式表和fetch調用都應該被限制在HTML文檔提供服務的同一來源。其他任何未明確提及的CSP指令將回退到default-src指令指定的值，將其設置為none表示默認行為是拒絕任何URL的連接。

然而，如今幾乎任何Web應用程序都不是獨立的，所以要調整這個頭，以便可以使用其他信任域，如域名為Google Fonts或AWS S3 bucket，但最好使用最嚴格的政策，在需要時再放寬，可以在MDN網站上找到CSP指令的完整列表。

2.啟用XSS保護模式

如果用戶確實被注入了惡意代碼，我們可以通過提供"X-XSS-Protection"： "1； mode = block"頭指令來指示瀏覽器阻止響應。

盡管現在大多數瀏覽器都默認啟用了XSS保護模式，并且使用內容安全策略來禁用內聯JavaScript，但仍建議包含X-XSS-Protection頭，以確保不使用內聯JavaScript的舊版瀏覽器，這樣才有更好的安全性。

3.禁用iframe嵌入以防止點擊劫持攻擊

點擊劫持是一種攻擊，其具體行為是網站A上的用戶被誘騙對網站B執行某些操作。為了實現這一點，惡意用戶將網站B嵌入到一個不可見的iframe中，然后將iframe放置在網站A上，當用戶單擊網站A上的元素時，他們實際上是單擊了網站B上的某個東西。

我們可以通過提供X-Frame-Options響應頭來防止此類攻擊，該響應頭禁止在框架中呈現網站：

"X-Frame-Options"："DENY"

另外，可以使用frame-ancestors CSP指令，該指令可以更好地控制父級將頁面嵌入iframe的程度。

4.限制對瀏覽器功能和API的訪問

安全做法是限制對網站不正常訪問。CSP應用可以限制網站可以連接的域的數量，它也可以應用到瀏覽器特性上。

我們可以使用Feature-Policy頭指示瀏覽器拒絕訪問應用不需要的某些功能和API。

我們將Feature-Policy設置為由分號分隔的一串規則，其中每個規則都是功能的名稱，后跟其策略名稱。

大多數情況下，我們希望為所有不使用的特性設置none。

5.不要泄露referrer值

當點擊一個鏈接，通過網站導航，目的地網站將收到網站上最后一個位置的URL在一個referrer頭。該URL可能包含敏感數據和半敏感數據（例如會話令牌和用戶ID），這些數據永遠都不應公開。

為了防止referrer值泄漏，我們將Referrer-Policy標頭設置為no-referrer。

6.不要根據用戶輸入設置innerHTML值

跨站點腳本攻擊可以通過許多不同的DOM API進行，其中惡意代碼被注入到網站中，最常用的是innerHTML。

永遠不應基于用戶未過濾的輸入來設置innerHTML。用戶可以直接操作的任何值，包括輸入字段中的文本、URL中的參數或本地存儲項，這些都應該首先進行轉義和清除。理想情況是使用textContent而不是innerHTML，這樣可以完全避免生成HTML輸出。如果確實需要為用戶提供富文本編輯，請使用專業的第三方庫。

不幸的是，innerHTML并不是DOM API的唯一弱點，而且容易受到XSS注入攻擊，這就是為什么一定要有一個嚴格的不允許內聯代碼執行的內容安全策略。

7.使用UI框架

諸如React，Vue，Angular之類的現代UI框架內置了良好的安全性，可以很大程度上消除XSS攻擊的風險。它們自動對HTML輸出進行編碼，減少對DOM API的使用，并為潛在危險（如dangerouslySetInnerHTML）提供明確而謹慎的名稱。

8.保持你的依賴關系是最新的

快速瀏覽一下node_modules文件夾，就會確認Web應用程序是由數百個依賴項組成的lego拼圖。確保這些依賴項不包含任何已知的安全漏洞對于網站的整體安全非常重要。

確保依賴關系保持安全和最新的最佳方法是使漏洞檢查成為開發過程的一部分。為此，可以集成Dependabot和Snyk之類的工具，這些工具將為過時或潛在易受攻擊的依賴項創建提取請求，并幫助您更快地修補程序。

9.添加第三方服務前請三思

第三方服務如Google Analytics，Intercom，Mixpanel等，可以為業務需求提供“一行代碼”的解決方案。但它們會使網站更容易受到攻擊，如果第三方服務受到損害，那么你的網站也會受到損害。

如果決定集成第三方服務，請確保設置最強大的CSP策略，在使用Google Tag Manager，Segment或任何其他第三方服務的工具時，應該特別注意。有權使用此工具的人員必須了解連接其他服務的安全隱患，并且最好與開發團隊進行討論。

10.對第三方腳本使用子資源完整性

對于使用的所有第三方腳本，請確保在可能的情況下包括Integrity屬性。瀏覽器具有Subresource Integrity功能，該功能可以驗證加載腳本的加密哈希，并確保它未被篡改。

值得說明的是，此技術對第三方庫有用，但對第三方服務的作用較小，大多數情況下無法檢查腳本的完整性，因為可以隨時對其進行修改，在這種情況下，我們必須依靠嚴格的內容安全策略。