作者： ConardLi code秘密花園
轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/S2NeE_hpOX5cM1Yaxz3YDw
內(nèi)容安全策略（CSP）是一個(gè) HTTP Header，CSP 通過告訴瀏覽器一系列規(guī)則，嚴(yán)格規(guī)定頁(yè)面中哪些資源允許有哪些來源， 不在指定范圍內(nèi)的統(tǒng)統(tǒng)拒絕。
使用它是防止跨站點(diǎn)腳本（XSS）漏洞的最佳方法。由于難以使用 CSP 對(duì)現(xiàn)有網(wǎng)站進(jìn)行改造（可通過漸進(jìn)式的方法），因此 CSP 對(duì)于所有新網(wǎng)站都是強(qiáng)制性的，強(qiáng)烈建議對(duì)所有現(xiàn)有高風(fēng)險(xiǎn)站點(diǎn)進(jìn)行 CSP 策略配置。
為什么要配置
CSP 的主要好處就是可以全面禁止使用不安全的嵌入式 JAVAScript。內(nèi)聯(lián) JavaScript（無(wú)論是反射的還是存儲(chǔ)的），意味著不正確的轉(zhuǎn)義用戶輸入都可以被 Web 瀏覽器解釋為 JavaScript 代碼。通過使用 CSP 禁用嵌入式 JavaScript，你可以有效消除針對(duì)你站點(diǎn)的幾乎所有XSS 攻擊。
注意，禁用內(nèi)聯(lián) JavaScript 意味著必須從 src 標(biāo)記加載所有 JavaScript <script>。直接在標(biāo)記上使用的事件處理程序（例如 onclick ）將無(wú)法正常工作，<script>標(biāo)記內(nèi)的 JavaScript 也會(huì)通過。此外，使用 <style> 標(biāo)簽或 style 屬性的內(nèi)聯(lián)樣式表也將無(wú)法加載。因此為了讓 CSP 易于實(shí)現(xiàn)，在設(shè)計(jì)站點(diǎn)時(shí)必須非常小心。
如何配置？
開啟 CSP 很簡(jiǎn)單, 你只需要配置你的網(wǎng)絡(luò)服務(wù)器返回 Content-Security-Policy 這個(gè) HTTP Header (有時(shí)你會(huì)看到一些關(guān)于X-Content-Security-Policy Header 的提法, 那是舊版本，你無(wú)須再如此指定它)。
除此之外，<meta> 元素也可以被用來配置該策略, 例如
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
指令
無(wú)論是 header ，還是在 <meta> 標(biāo)簽中指定，其值的格式都是統(tǒng)一的，由一系列 CSP 指令（directive）組合而成。
Content-Security-Policy: <policy-directive>; <policy-directive>
這里 directive，即指令，是 CSP 規(guī)范中規(guī)定用以詳細(xì)詳述某種資源的來源，比如前面示例中使用的 script-src，指定腳本可以有哪些合法來源，img-src 則指定圖片的合法淶源，以下是常用指令：
- base-uri 限制可出現(xiàn)在頁(yè)面 <base> 標(biāo)簽中的鏈接。
- child-src 列出可用于 worker 及以 frame 形式嵌入的鏈接。譬如: child-src https://youtube.com 表示只能從 Youtube 嵌入視頻資源。
- connect-src 可發(fā)起連接的地址 (通過 XHR, WebSockets 或 EventSource)。
- font-src 字體來源。譬如，要使用 google web fonts 則需要添加 font-src https://themes.googleusercontent.com 規(guī)則。
- form-action <form>標(biāo)簽可提交的地址。
- frame-ancestors 當(dāng)前頁(yè)面可被哪些來源所嵌入（與 child-src 正好相反）。作用于<frame>, <iframe>, <embed>及 <Applet>。該指令不能通過 <meta>指定且只對(duì)非 html文檔類型的資源生效。
- frame-src 該指令已在 level 2 中廢棄但會(huì)在 level 3 中恢復(fù)使用。未指定的情況下回退到 tochild-src 指令。
- img-src 指定圖片來源。
- media-src 限制音視頻資源的來源。
- object-src Flash 及其他插件的來源。
- plugin-types 限制頁(yè)面中可加載的插件類型。
- report-uri 指定一個(gè)可接收 CSP 報(bào)告的地址，瀏覽器會(huì)在相應(yīng)指令不通過時(shí)發(fā)送報(bào)告。不能通過 <meta> 標(biāo)簽來指定。
- style-src 限制樣式文件的來源。
- upgrade-insecure-requests 指導(dǎo)客戶端將頁(yè)面地址重寫，HTTP 轉(zhuǎn) HTTPS。用于站點(diǎn)中有大量舊地址需要重定向的情形。
- worker-src CSP Level 3 中的指令，規(guī)定可用于 worker, shared worker, 或 service worker 中的地址。
預(yù)設(shè)值
除了配置指定的淶源以外，這些指令還可以配置一些預(yù)定義的值來完成一些默認(rèn)配置：
- none 不匹配任何東西。
- self 匹配當(dāng)前域，但不包括子域。比如 example.com 可以，api.example.com 則會(huì)匹配失敗。
- unsafe-inline 允許內(nèi)嵌的腳本及樣式。是的，沒看錯(cuò)，對(duì)于頁(yè)面中內(nèi)嵌的內(nèi)容也是有相應(yīng)限制規(guī)則的。
- unsafe-eval 允許通過字符串動(dòng)態(tài)創(chuàng)建的腳本執(zhí)行，比如 eval，setTimeout 等。
如果頁(yè)面中非得用內(nèi)聯(lián)的寫法，還有種方式。即頁(yè)面中這些內(nèi)聯(lián)的腳本或樣式標(biāo)簽，賦值一個(gè)加密串，這個(gè)加密串由服務(wù)器生成，同時(shí)這個(gè)加密串被添加到頁(yè)面的響應(yīng)頭里面。
<script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">
// 這里放置內(nèi)聯(lián)在 HTML 中的代碼
</script>
頁(yè)面 HTTP 響應(yīng)頭的 Content-Security-Policy配置中包含相同的加密串：
Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'
配置示例
示例 1
所有內(nèi)容均來自站點(diǎn)的同一個(gè)源 (不包括其子域名)
Content-Security-Policy: default-src 'self'
示例 2
允許內(nèi)容來自信任的域名及其子域名 (域名不必須與CSP設(shè)置所在的域名相同)
Content-Security-Policy: default-src 'self' *.trusted.com
示例 3
允許網(wǎng)頁(yè)應(yīng)用的用戶在他們自己的內(nèi)容中包含來自任何源的圖片, 但是限制音頻或視頻需從信任的資源提供者(獲得)，所有腳本必須從特定主機(jī)服務(wù)器獲取可信的代碼.
Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com
在這里，各種內(nèi)容默認(rèn)僅允許從文檔所在的源獲取, 但存在如下例外:
- 圖片可以從任何地方加載(注意 "*" 通配符)。
- 多媒體文件僅允許從 media1.com 和 media2.com 加載(不允許從這些站點(diǎn)的子域名)。
- 可運(yùn)行腳本僅允許來自于userscripts.example.com。
示例 4
一個(gè)線上銀行網(wǎng)站的管理者想要確保網(wǎng)站的所有內(nèi)容都要通過SSL方式獲取，以避免攻擊者竊聽用戶發(fā)出的請(qǐng)求。
Content-Security-Policy: default-src https://onlinebanking.jumbobank.com
該服務(wù)器僅允許通過HTTPS方式并僅從onlinebanking.jumbobank.com域名來訪問文檔。
示例 5
一個(gè)在線郵箱的管理者想要允許在郵件里包含HTML，同樣圖片允許從任何地方加載，但不允許JavaScript或者其他潛在的危險(xiǎn)內(nèi)容(從任意位置加載)。
Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *
注意這個(gè)示例并未指定script-src。在此CSP示例中，站點(diǎn)通過 default-src 指令的對(duì)其進(jìn)行配置，這也同樣意味著腳本文件僅允許從原始服務(wù)器獲取。
上報(bào)你的數(shù)據(jù)
當(dāng)檢測(cè)到非法資源時(shí)，除了控制臺(tái)看到的報(bào)錯(cuò)信息，也可以讓瀏覽器將日志發(fā)送到服務(wù)器以供后續(xù)分析使用。接收?qǐng)?bào)告的地址可在 Content-Security-Policy 響應(yīng)頭中通過 report-uri指令來配置。當(dāng)然，服務(wù)端需要編寫相應(yīng)的服務(wù)來接收該數(shù)據(jù)。
配置 report-uri
Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;`
服務(wù)端收到請(qǐng)求：
{
"csp-report": {
"document-uri": "http://example.org/page.html",
"referrer": "http://evil.example.com/",
"blocked-uri": "http://evil.example.com/evil.js",
"violated-directive": "script-src 'self' https://apis.google.com",
"original-policy": "script-src 'self' https://apis.google.com; report-uri http://example.org/my_amazing_csp_report_parser"
}
}
Report Only
CSP 提供了一種報(bào)告模式，該模式下資源不會(huì)真的被限制加載，只會(huì)對(duì)檢測(cè)到的問題進(jìn)行上報(bào) ，以 JSON 數(shù)據(jù)的形式發(fā)送到 report-uri 指定的地方。
通過指定 Content-Security-Policy-Report-Only 而不是 Content-Security-Policy，則開啟了報(bào)告模式。
Content-Security-Policy-Report-Only: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;
當(dāng)然，你也可以同時(shí)指定兩種響應(yīng)頭，各自里的規(guī)則還會(huì)正常執(zhí)行，不會(huì)互相影響。比如：
Content-Security-Policy: img-src *;
Content-Security-Policy-Report-Only: img-src ‘none’; report-uri http://reportcollector.example.com/collector.cgi
這里圖片還是會(huì)正常加載，但是 img-src ‘none’ 也會(huì)檢測(cè)到并且發(fā)送報(bào)告。
報(bào)告模式對(duì)于測(cè)試非常有用。在開啟 CSP 之前肯定需要對(duì)整站做全面的測(cè)試，將發(fā)現(xiàn)的問題及時(shí)修復(fù)后再真正開啟，比如上面提到的對(duì)內(nèi)聯(lián)代碼的改造。
如何檢驗(yàn)配置成功了？
在Network中可以看到配置成功的header：
下面是 Twitter 的一個(gè)配置示例，非常完善：
在控制臺(tái)可以看到資源 block 報(bào)錯(cuò)：
Network中可以看到Block資源上報(bào)：
作者： ConardLi code秘密花園
轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/S2NeE_hpOX5cM1Yaxz3YDw
