Content Security Policy(簡稱CSP)瀏覽器內容策略的使用

首先要提一下，在作開發測試的過程當中，使用chrome時，從新加載更改後的應用時（修改了後端代碼的話），要記得清理下緩存。。。清理緩存。。。清理緩存。。。。

 

前言

最近，項目中須要增長一個代碼高亮的小功能，因而在調研後就選擇了Prism.js插件，小巧易用，贊！在使用過程當中，卻遇到了瀏覽器內容策略限制致使的錯誤。項目中掉用Prism.highlightElement()方法後，執行方法體裏的worker = new Worker()時，報了以下的錯誤：

再看看響應頭中的csp指令都是什麼？

顯示的是，csp規則中的child-src指令的值未明確指定，回退執行 「default-src none」的安全規則，然而該規則表示禁止加載任何資源，固然也包括項目裏使用的prism插件的內容。因此也就報了上面貼出的錯誤。那麼CSP到底是個神馬東東呢？

CSP簡介

CSP官網是這樣介紹它的：「The new Content-Security-Policy HTTP response header helps you reduce XSS risks on modern browsers by declaring what dynamic resources are allowed to load via a HTTP Header.」

大意是說，經過在http的響應頭中設定csp的規則，能夠規定當前網頁能夠加載的資源的白名單，從而減小網頁收到XSS攻擊的風險。因此說csp是一個在現代瀏覽器加載資源白名單的安全機制，只有響應頭中白名單裏列出的資源纔可以被加載、執行。

當前瀏覽器對csp支持狀況以下表所示：

 

csp指令

CSP level1 和CSP level2共列舉了15個指令，其中frame-src是被廢棄的指令，可是瀏覽器還仍支持。

 

csp指令的取值

 

經過在響應頭中設置所須要的指令及對應的值，咱們就能夠經過設定的白名單規定本身網頁應用裏能夠加載哪些資源了，白名單以外的資源將不備加載、執行。

CSP配置下阻止內聯代碼執行是防止內容注入的最大安全保障。這裏的內聯代碼包括：<script>塊內容，內聯事件，內聯樣式。

CSP舉例

好比經常使用的：default-src指令，取值爲none時，表示默認不容許加載任何內容

default-src ‘none’;

 

對於script-src和style-src指令，取值unsafe-inline，表示容許加載內聯的腳本和css樣式，指定特定的網址時，表示能夠加載對應域下的資源。

script-src 'unsafe-inline' js.example.com;  

style-src  'unsafe-inline' css.example.com;  

 

若是咱們容許加載符合https協議的網站的資源，則

img-src https:  

 

解決問題

項目中使用了一個叫Helmet.js的nodejs模塊，該模塊是對csp策略的nodejs版本的實現，在應用初始化時能夠調用其csp(options)或者contentSecuriPolicy(options)方法，設定響應頭的csp指令規則

app.use(helmet.contentSecurityPolicy({  

defaultSrc: ['\'none\''],  

connectSrc: ['*'],  

scriptSrc: ['\'self\'', '\'unsafe-eval\'', '\'unsafe-inline\''],  

styleSrc: ['\'self\'', 'fonts.googleapis.com', '\'unsafe-inline\''],  

fontSrc: ['\'self\'', 'fonts.gstatic.com'],  

mediaSrc: ['\'self\''],  

objectSrc: ['\'self\''],  

imgSrc: ['*','data:']  

}));  

 

可見在該規則下，並無設定文章開始提到的child-src指令，而default-src設的值爲none；在child-src的描述中提到，該指令是用來定義是否容許使用Workers或者是其餘嵌入式的上下文環境，在highlightElement方法種用到了 new Worker()方法新建一個js運行環境，因此在執行時按照默認規則是不被容許的。因此出現了開頭的錯誤。

要解決該問題也很簡單，只須要添加相應的規則或更改default規則便可，使得當前的應用調用web workers執行相應域的資源。在項目裏，能夠直接添加以下規則，

childSrc:['\'self\'']  

這樣在不擴大默認規則範圍的條件下，又容許使用應用所在域裏的資源調用web workers 或者是使用<frame>等標籤加載相應的資源。

總結

CSP是很好的瀏覽器安全策略，在應用裏設定資源白名單，能夠幫助咱們的應用很好的抵禦一些XSS之類的攻擊。值得去學習並應用。

參考資料：

Security Policy

Content Security policy

瀏覽器安全策略以內容安全策略CSP

抄襲來自於 

http://blog.csdn.net/zhouxingxingzxy/article/details/50802908