內容安全策略（CSP）詳解

時間 2019-11-16

原文原文鏈接

1.背景

1.1.同源策略

網站的安全模式源於「同源策略」，web瀏覽器容許第一個web頁面中的腳本訪問頁面中的數據，但前提是兩個web頁面具備相同的源。此策略防止一個頁面的惡意腳本經過該頁面的文檔訪問另外一個網頁上的敏感數據。規則：協議、主機、和端口號css

安全風險例子： 1,假設你正在訪問銀行網站但未註銷 2,這時候你跳轉到另一個站點 3,該站點注入一些惡意代碼(好比：進行交易操做等)html

1.2.網頁安全漏洞----跨網站腳本XSS

在某些狀況下，同源策略的限制性若是太強，實際上是不太友好的，好比說大型網站的子域之間的數據傳遞，開發過程當中的一些調試等；可是人類是比較聰明的，利用一些技術、從而放寬策略可是，跨網站腳本 (XSS)攻擊可經過欺騙網站提供惡意代碼和計劃好的內容來繞過同源政策：經過尋找將惡意腳本注入網頁，攻擊者能夠得到對敏感頁面內容，會話cookie以及瀏覽器表明用戶維護的各類其餘信息的提高訪問權限。 1,盜號 2,強制發送郵件...jquery

2.CSP內容安全策略

爲了緩解很大一部分潛在的跨腳本問題，瀏覽器的擴展程序系統引入了內容安全策略（CSP）的通常概念；簡單來講這一技術就是：web

開發者明確告訴客戶端（制定比較嚴格的策略和規則），哪些外部資源是能夠加載和執行的，即便攻擊者發現漏洞，可是它是沒辦法注入腳本的api

開發人員可使用這種工具以各類方式鎖定其應用程序，下降內容注入漏洞（如跨站點腳本）的風險，並下降其應用程序執行的權限瀏覽器

3.怎麼啓用CSP？

能夠經過兩種方式：安全

1,一種是經過 HTTP 頭信息的Content-Security-Policy的字段 bash

2,經過網頁的<meta>標籤cookie

<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
複製代碼

咱們在頁面引入一個cdn，可是meta的content只設置爲script-src 'self'工具

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Security-Policy"  content="script-src 'self'"/>
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
複製代碼

那麼，咱們將會看到以下結果

4 常見配置

該策略容許加載同源的圖片、腳本、AJAX和CSS資源，並阻止加載其餘任何資源，對於大多數網站是一個不錯的配置。

default-src ‘none’; script-src ‘self’; connect-src ‘self’; img-src ‘self’; style-src ‘self’;

CSP的意義

防XSS等攻擊的利器。CSP 的實質就是白名單制度，開發者明確告訴客戶端，哪些外部資源能夠加載和執行，等同於提供白名單。它的實現和執行所有由瀏覽器完成，開發者只需提供配置。CSP 大大加強了網頁的安全性。攻擊者即便發現了漏洞，也無法注入腳本，除非還控制了一臺列入了白名單的可信主機。

CSP的分類

（1）Content-Security-Policy 配置好並啓用後，不符合 CSP 的外部資源就會被阻止加載。（2）Content-Security-Policy-Report-Only 表示不執行限制選項，只是記錄違反限制的行爲。它必須與report-uri選項配合使用。

CSP的使用

（1）在HTTP Header上使用（首選）

"Content-Security-Policy:" 策略
"Content-Security-Policy-Report-Only:" 策略
複製代碼

（2）在HTML上使用

<meta http-equiv="content-security-policy" content="策略">
<meta http-equiv="content-security-policy-report-only" content="策略">
複製代碼

Meta 標籤與 HTTP 頭只是行式不一樣而做用是一致的，若是 HTTP 頭與 Meta 定義同時存在，則優先採用 HTTP 中的定義。若是用戶瀏覽器已經爲當前文檔執行了一個 CSP 的策略，則會跳過 Meta 的定義。若是 META 標籤缺乏 content 屬性也一樣會跳過。

策略應該怎麼寫

（1）舉個例子

// 限制全部的外部資源，都只能從當前域名加載
Content-Security-Policy: default-src 'self'

// default-src 是 CSP 指令，多個指令之間用英文分號分割；多個指令值用英文空格分割
Content-Security-Policy: default-src https://host1.com https://host2.com; frame-src 'none'; object-src 'none'  

// 錯誤寫法，第二個指令將會被忽略
Content-Security-Policy: script-src https://host1.com; script-src https://host2.com

// 正確寫法以下
Content-Security-Policy: script-src https://host1.com https://host2.com

// 經過report-uri指令指示瀏覽器發送JSON格式的攔截報告到某個地址
Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser; 
複製代碼

// 報告看起來會像下面這樣

{  
  "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"  
  }  
} 
複製代碼

（2）經常使用的CSP指令