home > webfront > SGML > web >

前端安全配置xss預防針Content-Security-Policy(csp)配置詳解

author:zhoulujun    hits:

CSP是2008年由 Mozilla 的 Sterne 提出的瀏覽器安全框架被設計為一個完整的框架來防御 XSS和CSRF攻擊,我們知道前端有個很著名的”同源策略”,簡而言之,就是說一個頁面的資源只能從與之同源的服務器獲取,而不允許跨域獲取

什么是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 中定義規則

通過網頁的標簽

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">


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>

推薦閱讀:

http://www.cnblogs.com/heyuqing/p/6215761.html

Content Security Policy(簡稱CSP)瀏覽器內容策略的使用

CSP內容安全策略


轉載本站文章《前端安全配置xss預防針Content-Security-Policy(csp)配置詳解》, 請注明出處:http://www.qsexmk.tw/html/webfront/SGML/web/2017_0503_8004.html