红宝书第五十讲：内容安全策略（CSP）详解：小白的守护者

---

红宝书第五十讲：内容安全策略（CSP）详解：小白的守护者

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一句话理解CSP

CSP 是给浏览器颁发的规则清单，告诉它允许加载哪些资源（脚本、图片、样式等），阻止危险内容的加载，从而防止 XSS 等攻击。

---

一、CSP 的核心规则

通过 HTTP 头部或 <meta> 标签定义，常见的规则有：

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

• default-src 'self'：默认只允许加载当前域名下的资源。
• script-src 'self' https://trusted-cdn.com：脚本只能来自本站或指定的可信 CDN。
• img-src *：允许加载任何来源的图片（开放但可能存在风险）。

---

二、CSP 阻止恶意脚本的例子

假设页面中有如下代码：

<script>
  alert('恶意弹窗！'); <!-- 内联脚本（可能被攻击者注入） -->
</script>

配置 CSP 后：

Content-Security-Policy: script-src 'self';

• 效果：浏览器阻止执行内联脚本和未授权的第三方脚本，用户安全！

---

三、实战配置示例

1. Meta 标签设置（适合小型站点）：

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' 'nonce-random123';">

• 'nonce-xxx'：允许特定内联脚本（需生成随机数标记安全脚本）¹。

2. 结合 SRI 增强安全性：

<!-- 资料6中的SRI示例 -->
<script src="https://trusted-cdn.com/lib.js" 
        integrity="sha256-abc123..." 
        crossorigin="anonymous"></script>

• integrity 验证文件哈希值，确保脚本未被篡改（类似锁检查快递包裹是否完整）¹。

---

四、CSP 的优势与注意事项

优势：

1. 阻止 XSS：拦截未授权脚本。
2. 资源白名单：精准控制加载来源。

注意事项：

• 初次配置需测试：过于严格可能导致页面功能失效。

• 报告模式辅助调试：

  Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report-endpoint;

  浏览器仅报告违规行为，不拦截（调试阶段的“演习模式”）。

---

五、工作流程图

flowchart TD
    A[用户访问网页] --> B[浏览器获取CSP策略]
    B --> C[解析HTTP头中的CSP规则]
    C --> D{资源请求}
    D -->|每次请求| E[匹配策略指令]
    E --> F{是否符合规则?}
    F -->|允许| G[加载资源]
    F -->|禁止| H[拦截请求]
    
    G --> I[正常渲染页面内容]
    H --> J[阻止资源加载]
    
    J --> K[记录违规报告]
    K --> L[发送到report-uri端点]
    K --> M[控制台显示错误]
    
    I --> N[完整页面呈现]
    M --> O[用户看到部分内容缺失]
    
    subgraph 资源检查阶段
        D
        E
        F
    end
    
    subgraph 结果处理
        G
        H
    end
    
    subgraph 报告机制
        K
        L
        M
    end

---

目录：总目录
上篇文章：红宝书第四十九讲：XSS/CSRF攻击防御策略解析

下篇文章：红宝书第五十一讲：Web Components：创造你自己的HTML标签

脚注

---

1. 《JavaScript高级程序设计（第5版）》中提到integrity属性用于验证资源完整性，防止恶意脚本加载 ↩