Content Security Policy (CSP) — 幫你網站列白名單吧
Understanding Frontend Security 系列文
1. 簡單弄懂同源政策 (Same Origin Policy) 與跨網域 (CORS)
2. [XSS 1] 從攻擊自己網站學 XSS (Cross-Site Scripting)
3. [XSS 2] 如何防禦 XSS 攻擊
4. Content Security Policy (CSP) — 幫你網站列白名單吧
5. [CSRF] One click attack: 利用網站對使用者瀏覽器信任達成攻擊
雖然瀏覽器有同源政策的保護 (Same Origin Policy)，但聰明的壞人還是可以找到你網站的漏洞進而去攻擊。怎麼防範呢? 這一篇會介紹 CSP，新增方法也非常容易，只要加幾行就可以讓你網站保護力上升。
OS. CSP 建議在 server 端加 ，雖然前端可以利用 meta http-equiv給瀏覽器一些額外資訊， 但所有文件還是 prefer 在 Server 那邊加 HTTP header 👍
🔖 文章索引1. 為什麼需要 CSP
2. 常用規範 (Policy)
3. 常用來源 (Source)
4. 最佳實踐
Source allowlists: 列白名單告訴瀏覽器哪些來源 (Origin) 是值得信任的
會被 XSS 攻擊原因就是 browser 區分不了哪些是網站內安全的 script 哪些是從第三方被注入的惡意 script。跨來源嵌入通常被允許 (embed)，所以以下兩支 script 都會被 browser 很順利的 download 並執行，但你無法保證所有被 download 檔案都是安全的
<script src="https://react.com/react.development.js"></script>
<script src="https://evil.example.com"></script>所以新增 CSP 建立你認為安全的名單，也只有這些名單內資源可以被 browser 執行/render！這時就算 attacker 載你網站找到漏洞並注入 https://evil.com/evil.js 想偷你網站的機密也不能得逞
