什么是CSP
CSP全稱Content Security Policy ,可以直接翻譯為內容安全策略,說白了,就是為了頁面內容安全而制定的一系列防護策略. 通過CSP所約束的的規責指定可信的內容來源（這里的內容可以指腳本、圖片、iframe、fton、style等等可能的遠程的資源）。通過CSP協定，讓WEB處於一個安全的運行環境中。
有什么用?
我們知道前端有個很著名的”同源策略”,簡而言之,就是說一個頁面的資源只能從與之同源的服務器獲取,而不允許跨域獲取.這樣可以避免頁面被注入惡意代碼,影響安全.但是這個策略是個雙刃劍,擋住惡意代碼的同時也限制了前端的靈活性,那有沒有一種方法既可以讓我們可以跨域獲取資源,又能防止惡意代碼呢?
答案是當然有了,這就是csp,通過csp我們可以制定一系列的策略,從而只允許我們頁面向我們允許的域名發起跨域請求,而不符合我們策略的惡意攻擊則被擋在門外.從而實現
需要說明的一點是,目前主流的瀏覽器都已支持csp.所以我們可以放心大膽的用了.
指令說明
指令就是csp中用來定義策略的基本單位,我們可以使用單個或者多個指令來組合作用,功能防護我們的網站.
以下是常用的指令說明:
| 指令名 |
demo |
說明 |
| default-src |
'self' cdn.example.com |
默認策略,可以應用於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執行等,你可以通過添加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 策略來放開相應的操作 |
| report-uri |
/some-report-uri |
|
指令值
所有以-src結尾的指令都可以用一下的值來定義過濾規則,多個規則之間可以用空格來隔開
| 值 |
demo |
說明 |
| * |
img-src * |
允許任意地址的url,但是不包括 blob: filesystem: schemes. |
| 'none' |
object-src 'none' |
所有地址的咨詢都不允許加載 |
| 'self' |
script-src 'self' |
同源策略,即允許同域名同端口下,同協議下的請求 |
| 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協議來從指定域名下加載資源 |
| https: |
img-src https: |
只允許通過https協議加載資源 |
| 'unsafe-inline' |
script-src 'unsafe-inline' |
允許行內代碼執行 |
| 'unsafe-eval' |
script-src 'unsafe-eval' |
允許不安全的動態代碼執行,比如 JavaScript的 eval()方法 |
例子：<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline' my.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' my.com">