文章中英模式

布魯斯前端面試題目 - Content Security Policy

深入解析Content Security Policy (CSP)的原理、配置和最佳實踐。了解如何透過CSP防止XSS攻擊和保護網站安全。

文章中英模式

懶得看文章？那就來看影片吧

內容安全政策(CSP)是什麼？

內容安全政策(CSP)就像網站的保安系統，告訴瀏覽器哪些資源可以載入，哪些不行。它主要用來防止XSS攻擊（有人在你網站注入惡意程式碼）。

CSP運作原理：

  網站                         瀏覽器
    |                           |
    |-- 設定CSP規則 ---------->  |
    |                           |-- 檢查資源是否符合規則
    |<-- 只載入符合規則的資源 --   |
    |                           |
    |<-- 阻擋不符合規則的資源 --   |

簡單來說，你可以告訴瀏覽器：「只執行來自我自己網站的程式碼，拒絕其他來源」。

<!-- 只允許自己網站的資源 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

💡 CSP的主要目標：

1. 防止XSS攻擊
2. 監控並報告安全違規
3. 控制資源載入來源
4. 提升網站整體安全性

CSP如何工作？

CSP通過HTTP標頭或HTML meta 標籤實現，告訴瀏覽器哪些資源可以加載和執行。瀏覽器隨後會強制執行這些政策，阻止加載不符合政策的資源。

透過HTTP標頭實現

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; img-src *

透過HTML meta標籤實現

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' https://trusted-cdn.com; img-src *">

CSP指令與來源值

常用CSP指令

指令	說明
`default-src`	所有資源的默認策略
`script-src`	JavaScript來源白名單
`style-src`	CSS樣式來源白名單
`img-src`	圖片來源白名單
`connect-src`	限制可通過XHR、WebSockets等連接的來源
`font-src`	字體來源白名單
`frame-src`	iframe來源白名單
`media-src`	音頻和視頻來源白名單
`object-src`	Flash和其他插件來源白名單
`report-uri`	違規報告發送的URL

常用來源值

來源值	說明
`'self'`	只允許來自同一來源的資源
`'none'`	不允許任何來源
`'unsafe-inline'`	允許內聯資源（如內聯<script>標籤）
`'unsafe-eval'`	允許使用eval()和類似功能
`https:`	只允許HTTPS協議的資源
`example.com`	允許特定域名的資源
`*.example.com`	允許特定域名及其子域名的資源
`*`	允許任何來源（不推薦使用）

CSP配置實例

基礎安全配置

// 只允許從當前域名加載所有資源
Content-Security-Policy: default-src 'self'

混合內容配置

// 配置多種資源類型
Content-Security-Policy: default-src 'self';
                         script-src 'self' https://cdn.jsdelivr.net;
                         style-src 'self' https://fonts.googleapis.com;
                         img-src 'self' https://images.unsplash.com;
                         font-src 'self' https://fonts.gstatic.com;
                         connect-src 'self' https://api.example.com;
                         frame-src https://www.youtube.com

報告模式

// 僅報告違規，不阻止內容加載
Content-Security-Policy-Report-Only: default-src 'self';
                                    report-uri https://example.com/csp-reports

嚴格配置（適合高安全性應用）

// 嚴格限制所有資源來源
Content-Security-Policy: default-src 'none';
                         script-src 'self';
                         style-src 'self';
                         img-src 'self';
                         font-src 'self';
                         connect-src 'self';
                         form-action 'self';
                         frame-ancestors 'none';
                         base-uri 'self';
                         block-all-mixed-content;
                         upgrade-insecure-requests

內聯腳本的處理

CSP默認會阻止內聯腳本，但許多應用依賴於內聯腳本。

解決方案：

使用 nonce 屬性：為每個內聯腳本添加隨機生成的nonce值

<!-- 使用nonce值 -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-2726c7f26c'">
<script nonce="2726c7f26c">
  alert('Hello, world!');
</script>

🔥 常見面試題目

(一) 什麼是內容安全政策(CSP)? 它解決了哪些安全問題?

解答：內容安全政策(CSP)就像網站的安全守門員，它告訴瀏覽器哪些資源可以載入，哪些必須拒絕。簡單說，它限制了JavaScript、CSS和圖片等資源的來源。

CSP工作原理：

網站設定規則 → 瀏覽器執行規則 → 阻擋不符合的資源

// 設定CSP的兩種方式
// 1. HTTP標頭
Content-Security-Policy: default-src 'self'

// 2. HTML meta標籤
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'">

CSP主要解決四大安全問題：

安全問題	CSP解決方式	簡單例子
XSS攻擊	阻止惡意腳本執行	script-src 'self'
點擊劫持	控制頁面是否可被嵌入框架	frame-ancestors 'none'
數據竊取	限制可連接的API來源	connect-src 'self' api.example.com

即使網站有安全漏洞，CSP也能作為最後防線，限制攻擊者能做的事情，大幅降低安全風險。