前端安全 - CSP

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。

寫在最後

在項目開發過程當中，安全無疑是最重要的，固然，沒有絕對的安全，因此咱們能作的，就是讓系統儘量的安全。

說不定哪天又出來新的攻擊呢？