今天在瀏覽微信頁面的時候，發現他的script標簽上都有個once屬性，好奇之下查閱了一番，發現這個屬性是和一個http header Content-Security-Policy有關，這個header不看不知道，一看嚇一跳啊，一把利器啊
1. 同源限制
首先我們要知道web瀏覽器為了安全都有會同源限制，什么是同源限制？就是來自 https://mybank.com 的代碼應僅能訪問 https://mybank.com 的數據，而絕不被允許訪問 https://evil.example.com。同源政策的目的，是為了保證用戶信息的安全，防止惡意的網站竊取數據，比如cookie/locaStoragy/IndexDB就遵守同源限制。XMLHettpRequest也是存在同源限制，相信只要開發過web的同學在ajax獲取數據時都遇到過這個問題。
同源限制可以一定程度上限制我們的用戶信息不會被盜取，但是卻沒法防止我們的頁面被插入不法分子的資源（js，img，css等），畢竟頁面上帶src的元素資源是不受同源限制的。這些頁面上的牛皮鮮讓人很討厭，影響是極其惡劣的：會讓我們的js監控誤報、會影響用戶體驗、甚至隱私泄露，所以我們需要對src資源也作出一定的限制，這就得Content-Security-Policy來了
2. Content-Security-Policy（內容安全政策,下文簡稱為CSP）
- 主要作用
了解一樣東西，我們首先的知道他有啥用，沒用不是浪費時間么，畢竟大家都在假裝生活很忙的樣子，作用呢主要有兩點：
- 使用白名單的方式告訴客戶端（瀏覽器）允許加載和不允許加載的資源。
- 向服務器舉報這種強貼牛皮鮮廣告的行為，以便做出更加針對性的措施予以絕殺。
- 怎么用
我們知道了好處還是很犀利的啊，這么好的東西怎么玩？其實也很簡單，前面說到了他其實就是一個http header嘛，所以我們只需要在返回html頁面的同時加上個response header 就行了，后面的script-src代表是一個指令，指示瀏覽器你只能加載我屁股后面那些規則下的js代碼，其他的都一律拒絕。
Content-Security-Policy: script-src 'self' https://apis.google.com
你還可以通過元標記的方式使用：
<meta http-equiv="Content-Security-Policy" content="default-src https://cdn.example.net; child-src 'none'; object-src 'none'">
- 指令
前面說到script-src是一個指令，那就說明還有其他的指令羅，沒有錯，下面的都是指令，覆蓋了web頁面的所有資源
base-uri: 用于限制可在頁面的 <base> 元素中顯示的網址。
child-src: 用于列出適用于工作線程和嵌入的幀內容的網址。例如：child-src https://youtube.com 將啟用來自 YouTube（而非其他來源）的嵌入視頻。 使用此指令替代已棄用的 frame-src 指令。
connect-src: 用于限制可（通過 XHR、WebSockets 和 EventSource）連接的來源。
font-src: 用于指定可提供網頁字體的來源。Google 的網頁字體可通過 font-src https://themes.googleusercontent.com 啟用。
form-action: 用于列出可從 <form> 標記提交的有效端點。
frame-ancestors: 用于指定可嵌入當前頁面的來源。此指令適用于 <frame>、<iframe>、<embed> 和 <applet> 標記。此指令不能在 <meta> 標記中使用，并僅適用于非 HTML 資源。
frame-src: 已棄用。請改用 child-src。
img-src: 用于定義可從中加載圖像的來源。
media-src: 用于限制允許傳輸視頻和音頻的來源。
object-src: 可對 Flash 和其他插件進行控制。
plugin-types: 用于限制頁面可以調用的插件種類。
report-uri: 用于指定在違反內容安全政策時瀏覽器向其發送報告的網址。此指令不能用于 <meta> 標記，這就是舉報電話。
style-src: 是 script-src 版的樣式表。
upgrade-insecure-requests: 指示 User Agent 將 HTTP 更改為 HTTPS，重寫網址架構。 該指令適用于具有大量舊網址（需要重寫）的網站。
這么多指令都要寫？寫起來不是很麻煩，不是的。你只需要寫自己要求限制的指令就行，沒寫的都會默認沒有限制。
你還可以通過指定一個 default-src 指令替換大部分指令的默認行為，也就說如果你寫了default-src 指令，那其他沒寫的指令都會服從default-src 的規則。
- 規則
規則主要是羅列一些你信任的域名，除此之外還有四個關鍵詞：
none表示不執行任何匹配。
self'表示與當前來源（而不是其子域）匹配。
unsafe-inline表示允許使用內聯 JavaScript 和 CSS。
unsafe-eval表示允許使用類似 eval 的 text-to-JavaScript 機制。
- nonce屬性
講了這么多那和我一開始發現的那個script標簽上的nonce屬性有啥關系呢？首先說明不存在不正當*關系。主要是現代瀏覽器認為內聯css和內聯js都是應該被視為危險的行為，但是你總不能因為菜刀能殺人就不讓百姓用菜刀了吧，所以開個口子吧。如果你在使用CSP策略的同時有確實需要使用內聯css和js怎么辦？用nonce+隨機數的方式
<script nonce=EDNnf03nceIOfn39fn3e9h3sdfa>
//Some inline code I cant remove yet, but need to asap.
</script>
然后我們在CSP的白名單中加上
Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'
這樣你這段內聯js就可以生效了
補充說明
CSP 1 在 Chrome、Safari 和 Firefox 中非常實用，但在 IE 10 中僅得到非常有限的支持。 您可以 在 canisue.com 上查看具體信息。CSP Level 2 在 Chrome 40 及更高版本中可用。 Twitter 和 Facebook 等大量網站已部署此標頭（Twitter 的案例研究值得一讀），并為您開始在自己的網站上進行部署制定了相應標準。
實戰效果
我們加上CSP頭部后，開啟csp上報功能后發現，10分鐘上報了幾千條，這被強奸的厲害啊，所以加上這個頭部就顯得更加有必要了
遇到的坑
在應用CSP后，有用戶反映訪問我們的站點出現問題，我們發現用戶獲取到的meta頭亂了，而且在里面發現了一個不是我們寫的域名：local.adguard.com，一查發現adguard是款 vpn軟件，他對我們meta頭部進行修改，修改就算了，還修改錯了。后面我們改成response header的方式，不使用meta了，發現他也會修改http的response header，但是沒修改錯，垃圾VPN害死人啊
今天發現有個CDN劫持相關的議題也挺有意思的
具體內容可以看這篇知乎回答，里面提到一個關鍵詞SRI
