雷英

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

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

關(guān)于響應(yīng)頭的說明：處理響應(yīng)頭曾經(jīng)是后端的任務(wù)，如今經(jīng)常將Web應(yīng)用程序部署到Zeit或Netlify等無服務(wù)器云平臺，但配置它們返回正確的響應(yīng)標(biāo)頭成為前端責(zé)任。

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

1.使用強大的內(nèi)容安全策略

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

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

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

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

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

2.啟用XSS保護(hù)模式

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

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

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

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

我們可以通過提供X-Frame-Options響應(yīng)頭來防止此類攻擊，該響應(yīng)頭禁止在框架中呈現(xiàn)網(wǎng)站：

"X-Frame-Options"："DENY"

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

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

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

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

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

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

5.不要泄露referrer值

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

為了防止referrer值泄漏，我們將Referrer-Policy標(biāo)頭設(shè)置為no-referrer。

6.不要根據(jù)用戶輸入設(shè)置innerHTML值

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

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

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

7.使用UI框架

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

8.保持你的依賴關(guān)系是最新的

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

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

9.添加第三方服務(wù)前請三思

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

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

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

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

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