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;</span>

如果我們允許加載符合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之類的攻擊。值得去學習並應用。

參考資料:



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章