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

“保護用戶數據在后端和前端之間共享的責任。”

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

測量結果

在我們開始改善網站安全性之前，重要的一點是要對我們所做更改的有效性提供反饋。雖然量化“良好開發實踐”的構成可能很困難，但可以非常準確地測量安全頭的強度。就像我們使用Lighthouse獲取性能，SEO和可訪問性分數一樣，我們可以使用SecurityHeaders.com根據當前響應標頭獲取安全分數。對于不完美的分數，它還將為我們提供一些有關如何提高分數并因此增強安全性的提示：

SecurityHeaders可以給我們的最高分是“ A +”，我們應該始終為此努力。

注意響應頭

處理響應標頭曾經是后端的任務，但是如今，我們經常將Web應用程序部署到Zeit或Netlify之類的“無服務器”云平臺，并配置它們以返回正確的響應標頭成為前端責任。確保了解您的云托管提供商如何使用響應標頭，并進行相應配置。

安防措施

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

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

強大的CSP可能會禁用潛在有害的內聯代碼執行，并限制從中加載外部資源的域。您可以通過將 Content-Security-Policy 標頭設置為以分號分隔的指令列表來啟用CSP 。如果您的網站不需要訪問任何外部資源，則標題的起始值可能看起來像這樣：

Content-Security-Policy: default-src 'none'; script-src 'self'; img-src 'self'; style-src 'self'; connect-src 'self';

這里我們設置script-src，img-src，style-src，和connect-src指令，以自我，以表明所有的腳本，圖片，樣式，分別取電話應僅限于相同的起源html文檔從服務。未明確提及的任何其他CSP指令將回退到指令指定的值default-src。我們將其設置none為指示默認行為是拒絕與任何URL的連接。

但是，如今幾乎沒有任何Web應用程序是自包含的，因此您可能需要調整此標頭以允許使用其他受信任的域，例如google Fonts或AWS S3存儲桶的域，但始終最好以最嚴格的政策，并在需要時稍后放寬。

您可以在MDN網站上找到CSP指令的完整列表。

2.啟用XSS保護模式

如果確實從用戶輸入中注入了惡意代碼，我們可以通過提供 "X-XSS-Protection": "1; mode=block" 標頭指示瀏覽器阻止響應。

盡管大多數現代瀏覽器默認情況下都啟用了XSS保護模式，并且我們也可以使用內容安全策略來禁用內聯JAVAScript，但仍建議使用 X-XSS-Protection 標頭，以確保不支持CSP標頭的舊版瀏覽器具有更好的安全性。

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

點擊劫持是一種誘騙，誘使網站A上的用戶在網站B上執行某些操作。為此，惡意用戶將網站B嵌入到看不見的iframe中，然后將其放置在網站A上毫無疑問的用戶光標下方，因此當點擊，或者認為他們點擊了網站A上的元素，實際上是點擊了網站B上的某些內容。

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

"X-Frame-Options": "DENY"

另外，我們可以使用frame-ancestorsCSP指令，該指令可以更好地控制父級可以或不能將頁面嵌入到iframe中。

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

良好的安全做法的一部分是限制對正確使用我們的網站所不需要的任何內容的訪問。我們已經使用CSP應用了該原理來限制允許網站連接的域數量，但是它也可以應用于瀏覽器功能。我們可以通過使用Feature-Policy標頭指示瀏覽器拒絕訪問應用程序不需要的某些功能和API 。

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

"Feature-Policy": "accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; camera 'none'; encrypted-media 'none'; fullscreen 'self'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; payment 'none';  picture-in-picture 'none'; speaker 'none'; sync-xhr 'none'; usb 'none'; vr 'none';"

Smashing Magazine上有一篇很棒的文章Feature-Policy，詳細解釋了該問題，但是大多數時候您會想要none為所有不使用的功能進行設置。

5.不要泄漏引薦來源網址的值

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

為了防止referrer值泄漏，我們將Referrer-Policyheader 設置為no-referrer：

"Referrer-Policy": "no-referrer"

在大多數情況下，此值應該很好，但是如果在某些情況下您的應用程序邏輯要求您保留引薦來源，請查看Scott Helme的這篇文章，其中他分解了所有可能的標頭值以及何時應用它們。

6.不要基于用戶輸入設置innerHTML值

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

永遠不要innerHTML基于用戶未過濾的輸入進行設置。用戶可以直接操作的任何值-輸入字段中的文本，URL中的參數或本地存儲條目-應該先進行轉義和清理。理想情況下，請使用textContent而不是innerHTML完全阻止生成HTML輸出。如果確實需要為用戶提供富文本編輯，請使用建立良好的庫，該庫使用白名單而不是黑名單來指定允許的HTML標簽。

不幸的是，innerHTML這并不是DOM API的唯一弱點，而且容易受到XSS注入攻擊的代碼仍然難以檢測。這就是為什么始終具有禁止內聯代碼執行的嚴格內容安全策略很重要的原因。

將來，您可能希望關注新的Trusted Types規范，該規范旨在防止所有基于DOM的跨站點腳本攻擊。

7.使用UI框架

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

8.使您的依賴關系保持最新

快速瀏覽內部 node_modules 文件夾將確認我們的Web應用程序是由數百個（如果不是數千個）依賴項構建而成的難題。確保這些依賴項不包含任何已知的安全漏洞對于網站的整體安全非常重要。

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

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

諸如Google Analytics（分析），Intercom，Mixpanel等第三方服務以及其他一百種服務可以為您的業務需求提供“一行代碼”解決方案。同時，它們會使您的網站更容易受到攻擊，因為如果第三方服務受到損害，那么您的網站也會受到損害。

如果您決定集成第三方服務，請確保設置最強大的CSP策略，該策略仍將允許該服務正常運行。大多數流行的服務都記錄了它們要求的CSP指令，因此請確保遵循其準則。

使用Google跟蹤代碼管理器，細分或任何其他允許組織中任何人集成更多第三方服務的工具時，都應格外小心。有權使用此工具的人員必須了解連接其他服務的安全隱患，并且最好與開發團隊進行討論。

10.將子資源完整性用于第三方腳本

對于您使用的所有第三方腳本，請確保 integrity 在可能的情況下包括屬性。瀏覽器具有“子資源完整性”功能，該功能可以驗證您正在加載的腳本的加密哈希，并確保它未被篡改。

這怎么您script的標簽可能是這樣的：

<script src="https://example.com/example-framework.js"        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux..."        crossorigin="anonymous"></script>

值得澄清的是，該技術對第三方庫很有用，但對第三方服務的作用較小。大多數情況下，當您為第三方服務添加腳本時，該腳本僅用于加載另一個從屬腳本。無法檢查依賴腳本的完整性，因為可以隨時對其進行修改，因此在這種情況下，我們必須依靠嚴格的內容安全策略。

結論

保存瀏覽體驗是任何現代Web應用程序的重要組成部分，并且用戶希望確保其個人數據保持安全和私有。而且，盡管這些數據存儲在后端，但確保數據安全的責任也擴展到了客戶端應用程序。

惡意用戶可以利用多種UI優先攻擊，但是，如果按照本文中的建議進行操作，則可以大大提高防御它們的機會。

大前端洞見——認知引導方向，洞見改變格局！