红宝书第五十讲：内容安全策略（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;
  

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

---

五、工作流程图

---

目录：总目录
上篇文章：红宝书第四十九讲：XSS/CSRF攻击防御策略解析
下篇文章：红宝书第五十一讲：Web Components：创造你自己的HTML标签

脚注

---

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