From: https://www.cnblogs.com/heyuqing/p/6215761.html

什么是CSP

CSP全稱Content Security Policy ,可以直接翻譯為內(nèi)容安全策略,說白了,就是為了頁面內(nèi)容安全而制定的一系列防護(hù)策略. 通過CSP所約束的的規(guī)責(zé)指定可信的內(nèi)容來源（這里的內(nèi)容可以指腳本、圖片、iframe、fton、style等等可能的遠(yuǎn)程的資源）。通過CSP協(xié)定，讓W(xué)EB處于一個安全的運行環(huán)境中。

有什么用?

我們知道前端有個很著名的”同源策略”,簡而言之,就是說一個頁面的資源只能從與之同源的服務(wù)器獲取,而不允許跨域獲取.這樣可以避免頁面被注入惡意代碼,影響安全.但是這個策略是個雙刃劍,擋住惡意代碼的同時也限制了前端的靈活性,那有沒有一種方法既可以讓我們可以跨域獲取資源,又能防止惡意代碼呢?

答案是當(dāng)然有了,這就是csp,通過csp我們可以制定一系列的策略,從而只允許我們頁面向我們允許的域名發(fā)起跨域請求,而不符合我們策略的惡意攻擊則被擋在門外.從而實現(xiàn)

需要說明的一點是,目前主流的瀏覽器都已支持csp.所以我們可以放心大膽的用了.

指令說明

指令就是csp中用來定義策略的基本單位,我們可以使用單個或者多個指令來組合作用,功能防護(hù)我們的網(wǎng)站.

以下是常用的指令說明:

指令名	demo	說明
default-src	'self' cdn.example.com	默認(rèn)策略,可以應(yīng)用于js文件/圖片/css/ajax請求等所有訪問
script-src	'self' js.example.com	定義js文件的過濾策略
style-src	'self' css.example.com	定義css文件的過濾策略
img-src	'self' img.example.com	定義圖片文件的過濾策略
connect-src	'self'	定義請求連接文件的過濾策略
font-src	font.example.com	定義字體文件的過濾策略
object-src	'self'	定義頁面插件的過濾策略,如 <object>, <embed> 或者<applet>等元素
media-src	media.example.com	定義媒體的過濾策略,如 HTML6的 <audio>, <video>等元素
frame-src	'self'	定義加載子frmae的策略
sandbox	allow-forms allow-scripts	沙盒模式,會阻止頁面彈窗/js執(zhí)行等,你可以通過添加allow-forms allow-same-origin allow-scripts allow-popups, allow-modals, allow-orientation-lock, allow-pointer-lock, allow-presentation, allow-popups-to-escape-sandbox, and allow-top-navigation 策略來放開相應(yīng)的操作
report-uri	/some-report-uri

?

指令值

所有以-src結(jié)尾的指令都可以用一下的值來定義過濾規(guī)則,多個規(guī)則之間可以用空格來隔開

值	demo	說明
*	img-src *	允許任意地址的url,但是不包括 blob: filesystem: schemes.
'none'	object-src 'none'	所有地址的咨詢都不允許加載
'self'	script-src 'self'	同源策略,即允許同域名同端口下,同協(xié)議下的請求
data:	img-src 'self' data:	允許通過data來請求咨詢 (比如用Base64 編碼過的圖片).
domain.example.com	img-src?domain.example.com	允許特性的域名請求資源
*.example.com	img-src *.example.com	允許從 example.com下的任意子域名加載資源
https://cdn.com	img-src https://cdn.com	僅僅允許通過https協(xié)議來從指定域名下加載資源
https:	img-src https:	只允許通過https協(xié)議加載資源
'unsafe-inline'	script-src 'unsafe-inline'	允許行內(nèi)代碼執(zhí)行
'unsafe-eval'	script-src 'unsafe-eval'	允許不安全的動態(tài)代碼執(zhí)行,比如 JavaScript的?eval()方法

?

示例

default-src 'self'; ??

只允許同源下的資源

?

script-src 'self'; ????

只允許同源下的js

?

script-src 'self' www.google-analytics.com ajax.googleapis.com;

允許同源以及兩個地址下的js加載

?

default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';

多個資源時,后面的會覆蓋前面的

?

服務(wù)器端配置

• Apache服務(wù)

在VirtualHost的httpd.conf文件或者.htaccess文件中加入以下代碼

Header set Content-Security-Policy "default-src 'self';"

• Nginx

在?server {}對象塊中添加如下代碼

add_header Content-Security-Policy "default-src 'self';";

• IIS?

web.config:中添加

<system.webServer>

? <httpProtocol>

??? <customHeaders>

????? <add name="Content-Security-Policy" value="default-src 'self';" />

??? </customHeaders>

? </httpProtocol>

</system.webServer>

?

參考鏈接:

https://www.zhihu.com/question/21979782

https://content-security-policy.com/

總結(jié)

以上是生活随笔為你收集整理的前端安全配置之Content-Security-Policy(csp)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。