web專案中，如何讓我們的頁面能夠只載入我允許的域名的資源呢？那就配一個白名單，CSP就是這麼來的。
what
CSP，內容安全策略（Content Security Policy）
用於檢測並削弱某些特定型別的攻擊，包括跨站指令碼 (XSS) 和資料注入攻擊等。
使用
CSP其實就是一個白名單策略，允許的域才能載入，其他一律拒絕。
使用CSP有兩種模式：meta設定 & http響應頭設定
meta設定
<meta http-equiv="Content-Security-Policy" content="CSP指令">
複製程式碼http響應頭設定
response: {
Content-Security-Policy: "CSP指令"
}
複製程式碼規則
懂得怎麼使用之後，我們就來看CSP指令怎麼寫。
/**
* 指令
*/
default-src // 預設規則，某些型別沒有特定規則時，則使用預設規則
script-src // javascript規則
style-src // 樣式規則
img-src // 圖片規則
connect-src // 連結規則，如ajax、websocket
font-src // 字型規則
object-src // 標籤引入flash外掛的規則
media-src // <video> <audio>引入多媒體的規則
frame-src // iframe載入規則
report-uri // 請求策略不被允許時，提交日誌的地址
複製程式碼/**
* 指令值
*/
空 // 不做限制
'none' // 不允許任何內容
'self' // 允許同源（協議/域名/埠）
data // data協議，如base64的圖片
binnie.qq.com // 指定域名
*.qq.com // 指定某個域
https://binnie.qq.com // 指定協議域名
https: // 允許https
'unsafe-inline' // 允許載入inline資源
'unsafe-eval' // 允許動態js，如eval()
複製程式碼舉個例子,下面這條CSP規則，就指明來script和style只能是同源的或*.qq.com的，如果載入其他源的地址均會被拒絕。
Content-Security-Policy: script-src 'self' *.qq.com; style-src 'self' *.qq.com;
複製程式碼實踐
meta模式
http響應頭模式
結果，這裡只截裡meta模式的錯誤，效果是一樣的。不允許的資源就會被瀏覽器拒絕。
注意
CSP規則無論是響應頭模式還是meta模式，如果在http的情況下，就有可能被運營商劫持修改（就是一些亂七八糟的廣告），所以最好使用CSP+https來確保專案的安全性。
由於CSP規則是白名單，不在白名單內的資源就會載入失敗，所以編輯規則的時候要確認不影響系統的正常使用，以免引起其他bug。
寫在最後
在專案開發過程中，安全無疑是最重要的，當然，沒有絕對的安全，所以我們能做的，就是讓系統儘可能的安全。
說不定哪天又出來新的攻擊呢？