前端安全配置xss預防針Content-Security-Policy(csp)配置詳解
文章轉載自：https://www.xaheimi.com/jianzhan/117.html
什麼是Content Secruity Policy(CSP)
CSP全稱Content Security Policy ,可以直接翻譯為內容安全策略,說白了,就是為了頁面內容安全而制定的一系列防護策略. 通過CSP所約束的的規責指定可信的內容來源（這裡的內容可以指指令碼、圖片、iframe、fton、style等等可能的遠端的資源）。通過CSP協定，讓WEB處於一個安全的執行環境中。
CSP是2008年由 Mozilla 的 Sterne 提出的瀏覽器安全框架
被設計為一個完整的框架來防禦 XSS 和 CSRF 攻擊
通常也可以用來控制 app 和擴充套件的許可權
CSP 允許開發者覆寫(SOP)每個 document 的許可權
CSP有什麼用?
我們知道前端有個很著名的”同源策略”,簡而言之,就是說一個頁面的資源只能從與之同源的伺服器獲取,而不允許跨域獲取.這樣可以避免頁面被注入惡意程式碼,影響安全.但是這個策略是個雙刃劍,擋住惡意程式碼的同時也限制了前端的靈活性,那有沒有一種方法既可以讓我們可以跨域獲取資源,又能防止惡意程式碼呢?
答案是當然有了,這就是csp,通過csp我們可以制定一系列的策略,從而只允許我們頁面向我們允許的域名發起跨域請求,而不符合我們策略的惡意攻擊則被擋在門外.從而實現
需要說明的一點是,目前主流的瀏覽器都已支援csp.所以我們可以放心大膽的用了.
csp應用配置
Server 在 header 中定義規則
Server 在HTML 中定義規則
通過網頁的標籤
CSP 讓開發者提高了對 XSS 攻擊的防禦能力, 但也存在一些問題.
難部署(如要改動左右inline scripts)
對 Origin 的定義不夠細緻
Binary 安全
DEMO
資料庫裡存了一個使用者輸入的資訊, 簡單的彈窗JS.(外鏈JS也是同理)
alert('I was stored by an attacker.');
無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' 定義頁面外掛的過濾策略,如 media-src media.example.com 定義媒體的過濾策略,如 HTML6的 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()方法
示例
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';
多個資源時,後面的會覆蓋前面的
伺服器端配置
Apache服務
在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>