关于Web前端安全防御之内容安全策略（CSP）

一、CSP 的核心作用

CSP（Content Security Policy，内容安全策略）是一种由浏览器强制执行的安全层，核心作用是限制网页可以加载和执行的资源来源（如脚本、样式、图片等），以及控制页面的行为（如是否、表单提交等）。通过明确指定可信的资源来源和允许的操作，CSP 能有效防御 XSS、点击劫持、数据注入等多种攻击，从根源上阻断恶意代码的加载和执行。

二、三个关键 CSP 指令及用途

CSP 通过多个指令精细控制不同类型的资源和行为，以下是三个核心指令：

1.script-src

• 用途：限制页面可以加载和执行的脚本来源（包括 <script> 标签、事件处理器、eval() 等）。
• 示例：script-src 'self' https://trusted-cdn.com 表示仅允许加载本站域名（'self'）和 trusted-cdn.com 的脚本，禁止其他来源的脚本（如恶意网站的脚本）。

2.img-src

• 用途：限制页面可以加载的图片资源来源（包括 <img>、CSS background-image 等）。
• 示例：img-src 'self' data: https://images.example.com 表示允许加载本站图片、data: 协议的 Base64 图片，以及 images.example.com 域名的图片，防止恶意图片（如用于追踪或钓鱼的图片）被加载。

3.default-src

• 用途：作为所有其他资源指令（如 script-src、img-src）的默认值，当某个资源类型未单独指定指令时，使用 default-src 的配置。
• 示例：default-src 'self' 表示所有未明确指定的资源类型（如音频、视频、字体等）均仅允许从本站加载，简化配置的同时提供基础安全保障。

三、配置 CSP 允许信任的 CDN 加载脚本，同时禁止内联脚本

要实现 “允许可信 CDN 加载脚本 + 禁止内联脚本”，需通过 script-src 指令精确配置，并禁用内联脚本的所有形式（包括 <script> 标签内容、onclick 等事件属性、javascript: 协议）。

配置示例：

Content-Security-Policy: script-src 'self' https://cdn.example.com https://another-trusted-cdn.com; object-src 'none'

• 允许可信来源：'self' 允许本站脚本，https://cdn.example.com 和 https://another-trusted-cdn.com 允许指定 CDN 的脚本。
• 禁止内联脚本：未包含 'unsafe-inline'（允许内联脚本的关键词），因此浏览器会拦截所有内联脚本（如 <script>alert(1)</script>、οnclick="..." 等）。
• 额外加固：object-src 'none' 禁止加载 <object>、<embed> 等潜在危险资源，进一步减少攻击面。

注意事项：

若需保留部分内联脚本（不推荐），可使用哈希值或随机 nonce 授权：

• 哈希值：script-src 'sha256-abc123...'（计算内联脚本的哈希值，仅允许匹配的内联脚本执行）。
• Nonce：script-src 'nonce-random123' 并在 <script nonce="random123"> 中使用相同 nonce（每次请求生成随机值，避免复用）。

四、2025 年 CSP 新增指令及 require-trusted-types-for 的作用

CSP 标准持续演进，2025 年新增的指令主要聚焦于强化 XSS 防护和资源控制，以下是几个重要更新：

1.require-trusted-types-for 'script'

1. 作用：强制要求所有动态插入到 DOM 的内容（如通过 innerHTML、document.write 等 API）必须经过 “可信类型”（Trusted Types）验证，禁止直接使用字符串作为 HTML / 脚本插入。
2. 增强 XSS 防护的原理：

• 传统防御依赖开发者手动转义输入，而 require-trusted-types-for 从 API 层面阻断危险操作 —— 若代码尝试将字符串直接传给 innerHTML，浏览器会拒绝执行并报错。
• 开发者必须通过预定义的 “可信类型策略”（如 TrustedHTML）处理内容，确保输入经过自动转义或过滤，从根源上防止未处理的恶意字符串被注入 DOM。

2.style-src-attr 和 style-src-elem（进一步细化样式控制）

• 作用：将原有的 style-src 拆分为两个指令，分别控制样式属性（如 <div style="...">）和 <style> 标签的来源，更精细地限制内联样式和外部样式表。

3.navigate-to

• 作用：限制页面可以导航到的 URL 来源（包括 <a> 链接、window.location 跳转等），防止恶意跳转至钓鱼网站。

总结

• CSP 的核心是通过限制资源来源和行为，构建网页的安全边界。
• 关键指令如 script-src、img-src、default-src 分别控制脚本、图片和默认资源的加载。
• 配置可信 CDN 并禁止内联脚本时，需通过 script-src 明确指定来源，避免 'unsafe-inline'。
• 2025 年新增的 require-trusted-types-for 等指令通过强制内容验证机制，进一步强化了 XSS 防护，降低了人为编码失误导致的安全风险。