CSP（Content-Security-Policy）是一種防止XSS 等惡意代碼注入的前端安全機(jī)制。 1. 它通過(guò)HTTP 響應(yīng)頭聲明哪些資源可加載執(zhí)行，核心思想是“白名單”策略；2. 設(shè)置方式是在服務(wù)器響應(yīng)頭添加Content-Security-Policy 字段，如default-src、script-src 等指令控制不同資源類(lèi)型；3. 內(nèi)聯(lián)腳本和eval 默認(rèn)被阻止，可通過(guò)nonce 或hash 臨時(shí)允許，但推薦使用外部腳本文件；4. 開(kāi)發(fā)階段可用Content-Security-Policy-Report-Only 進(jìn)行測(cè)試並收集違規(guī)報(bào)告，上線後啟用嚴(yán)格策略以確保安全性與功能正常。

CSP（Content Security Policy）是前端安全的一個(gè)重要機(jī)制，它能有效防止XSS（跨站腳本攻擊）等惡意代碼注入行為。在JavaScript 項(xiàng)目中合理配置CSP，不僅能增強(qiáng)網(wǎng)站的安全性，還能避免一些不必要的資源加載問(wèn)題。

什麼是CSP？

簡(jiǎn)單來(lái)說(shuō)，CSP 是一種聲明式的安全機(jī)制，通過(guò)HTTP 響應(yīng)頭Content-Security-Policy來(lái)告訴瀏覽器哪些資源可以加載、執(zhí)行，哪些不能。比如你可以限制頁(yè)面只能加載同源的腳本、禁止內(nèi)聯(lián)腳本執(zhí)行、不允許加載不明來(lái)源的圖片等等。

CSP 的核心思想是“白名單”，即只允許你信任的內(nèi)容運(yùn)行，其他的一律攔截。這對(duì)於現(xiàn)代Web 應(yīng)用，尤其是使用大量第三方腳本或用戶(hù)生成內(nèi)容的站點(diǎn)尤為重要。

如何設(shè)置CSP？

要啟用CSP，最常見(jiàn)的方式是在服務(wù)器響應(yīng)頭中添加Content-Security-Policy字段。例如：

 Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com

上面這行表示默認(rèn)所有資源都只能從當(dāng)前域名加載，而腳本還可以從https://trusted-cdn.com加載。

常見(jiàn)的指令包括：

• default-src ：默認(rèn)策略，適用於未單獨(dú)指定的資源類(lèi)型。
• script-src ：控制哪些地方可以加載JS。
• style-src ：控制CSS 加載。
• img-src ：控製圖片來(lái)源。
• connect-src ：控制AJAX 請(qǐng)求的目標(biāo)地址。
• object-src ：控制插件如Flash 的加載（現(xiàn)在基本不用了）。
• font-src ：字體文件來(lái)源。
• frame-src或child-src ：iframe 等嵌套內(nèi)容的來(lái)源。

你可以根據(jù)實(shí)際需求組合這些指令，逐步收緊策略。

內(nèi)聯(lián)腳本和eval 的問(wèn)題

很多網(wǎng)站為了方便，會(huì)直接寫(xiě)<script>...</script>或者用eval()執(zhí)行字符串代碼。但CSP 默認(rèn)會(huì)阻止這類(lèi)行為，因?yàn)樗鼈兪荴SS 攻擊的常見(jiàn)入口。

如果你必須使用內(nèi)聯(lián)腳本，有幾種方式可以繞過(guò)限制：

• 使用nonce ：為特定的<script>標(biāo)籤加上一個(gè)一次性密鑰，服務(wù)器在CSP 中聲明允許該nonce。

  示例：

   Content-Security-Policy: script-src 'nonce-abc123';

  HTML：

   <script nonce="abc123">alert(&#39;allowed&#39;);</script>

• 使用hash ：對(duì)內(nèi)聯(lián)腳本內(nèi)容進(jìn)行哈希計(jì)算，並在策略中允許該hash。

  示例：

   Content-Security-Policy: script-src 'sha256-abc...';

不過(guò)這兩種方法都不太推薦頻繁使用，因?yàn)榫S護(hù)起來(lái)麻煩，而且容易出錯(cuò)。更推薦的做法是把腳本移到外部文件中，這樣更容易管理和審核。

至於eval()和new Function()這類(lèi)動(dòng)態(tài)執(zhí)行代碼的方法，默認(rèn)是被'unsafe-eval'控制的，建議盡量避免使用，或者明確禁止。

開(kāi)發(fā)和上線階段的策略差異

在開(kāi)發(fā)環(huán)境，我們通常希望調(diào)試方便，所以CSP 可以寬鬆一點(diǎn)，比如允許任意來(lái)源的腳本加載，甚至允許內(nèi)聯(lián)腳本。但到了生產(chǎn)環(huán)境，就應(yīng)該嚴(yán)格限制，只允許必要的資源加載。

可以通過(guò)兩個(gè)不同的策略頭來(lái)實(shí)現(xiàn)：

• 上線環(huán)境用Content-Security-Policy
• 開(kāi)發(fā)環(huán)境用Content-Security-Policy-Report-Only ，這個(gè)頭不會(huì)真正阻止資源加載，只會(huì)報(bào)告違規(guī)行為，適合測(cè)試

舉個(gè)例子：

 Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-violation-report-endpoint/

這樣你可以在不中斷功能的前提下，觀察當(dāng)前頁(yè)面是否有違反CSP 的情況，再逐步調(diào)整策略。

另外，建議在部署前做一次完整的CSP 檢查，確保沒(méi)有遺漏的關(guān)鍵資源，否則可能導(dǎo)致頁(yè)面功能異常。

基本上就這些。 CSP 不復(fù)雜但容易忽略細(xì)節(jié)，尤其在大型項(xiàng)目中，前期規(guī)劃好策略結(jié)構(gòu)非常重要。

以上是深入研究JavaScript內(nèi)容安全策略（CSP）的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！