<!-- 惡意用戶在評論區(qū)寫的腳本 -->
<script src="https://evil-site.com/steal-cookie.js"></script>

┌──────────────┐     HTTP 響應頭         ┌──────────────┐
│   用戶瀏覽器  │ ←────────────────────── │   網站服務器  │
└──────────────┘                       └──────────────┘
       ↓                                         
  接收 CSP 規(guī)則
       ↓
  解析并存儲到內存
       ↓
  頁面開始加載資源
       ↓
  ┌─────────────────┐
  │  每加載一個資源  │
  │   都要問 CSP：   │
  │  "這個資源能來嗎？"│
  └─────────────────┘
       ↓
  ┌───────┴───────┐
  ↓               ↓
允許            拒絕
正常加載        阻止 + 報錯

// 1. 加載外部腳本
<script src="https://cdn.example.com/app.js"></script>
// ↓ CSP 檢查：script-src 允許這個域名嗎？

// 2. 加載外部圖片
<img src="https://img.example.com/logo.png">
// ↓ CSP 檢查：img-src 允許這個域名嗎？

// 3. 發(fā)起 AJAX 請求
fetch('https://api.example.com/data');
// ↓ CSP 檢查：connect-src 允許這個域名嗎？

// 4. 加載 CSS 樣式
<link rel="stylesheet"  rel="external nofollow" >
// ↓ CSP 檢查：style-src 允許這個域名嗎？

// 5. 創(chuàng)建 Blob URL
const blobUrl = URL.createObjectURL(blob);
img.src = blobUrl;
// ↓ CSP 檢查：img-src 允許 blob: 嗎？

錯誤流程：
用戶請求資源 → 下載資源 → 檢查 CSP → 發(fā)現(xiàn)違規(guī) → 刪除資源 ?

正確流程：
用戶請求資源 → 檢查 CSP → 不允許 → 直接拒絕，根本不發(fā)請求 ?

Content-Security-Policy: 
  default-src 'self'; 
  script-src 'self' 'unsafe-inline'; 
  img-src 'self' data: https: blob:; 
  style-src 'self' 'unsafe-inline'; 
  connect-src 'self' https: wss: blob:

default-src 'self'

script-src 'self' 'unsafe-inline' https://cdn.example.com

img-src 'self' data: https: blob:

connect-src 'self' https: wss: blob:

當前頁面：https://www.example.com:443/index.html

允許的 'self' 資源：
? https://www.example.com/api/data
? https://www.example.com/img/logo.png

不允許：
? http://www.example.com/api/data    (協(xié)議不同)
? https://api.example.com/data      (域名不同)
? https://www.example.com:8080/data  (端口不同)

<!-- 內聯(lián)圖片 -->
<img src="data:image/png;base64,iVBORw0KG...">

<!-- 內聯(lián)字體 -->
<style>
  @font-face {
    src: url('data:font/woff2;base64,...');
  }
</style>

const blob = new Blob(['hello'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
// url: "blob:https://example.com/xxx"

<!-- 內聯(lián)腳本 -->
<script>alert('hello');</script>

<!-- 內聯(lián)樣式 -->
<div style="color: red;">hello</div>

// 1. 用戶選擇文件
const file = event.target.files[0];

// 2. 創(chuàng)建 Blob URL
const blobUrl = URL.createObjectURL(file);
// 結果：blob:https://example.com/xxx

// 3. 創(chuàng)建圖片預覽
const img = new Image();
img.src = blobUrl;  // ← CSP 檢查點！

// CSP 檢查：
// img-src 允許 blob: 嗎？
// → 如果不允許，圖片無法加載

// 1. 用戶選擇文件
const file = event.target.files[0];

// 2. 轉換為 Base64
const reader = new FileReader();
reader.readAsDataURL(file);

// 3. 讀取完成后使用
reader.onload = function(e) {
    const dataUrl = e.target.result;
    // 結果：data:image/png;base64,iVBORw0KG...
    
    // 4. 創(chuàng)建圖片預覽
    const img = new Image();
    img.src = dataUrl;  // ← CSP 檢查點！
};

// CSP 檢查：
// img-src 允許 data: 嗎？
// → 如果允許，圖片正常加載 ?

Content Security Policy: The page's settings blocked the loading of a resource at chrome-extension://xxx

Content-Security-Policy: script-src 'self' 'unsafe-eval'

<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>

Content-Security-Policy: script-src 'self' https://cdn.jsdelivr.net

img.src = 'https://user-uploaded.com/xxx.jpg';  // 被阻止

Content-Security-Policy: img-src 'self' data: https://user-uploaded.com

Content Security Policy: The page's settings blocked the loading of a resource at 
https://example.com/script.js ("script-src").

Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'
Report-To: {"url":"https://example.com/csp-report"}

最嚴格：只允許 'self'
        ↓
        中等：允許必要的 CDN
        ↓
        較寬松：允許 'unsafe-inline'
        ↓
最寬松：允許 '*'