一、CSP 是什么？
CSP 本质上是一套由网站开发者定义、浏览器负责执行的 "内容加载规则" 。它通过明确告诉浏览器 "哪些来源的资源（如脚本、图片、样式表）是安全的，可以加载；哪些来源是危险的，必须拒绝"，从根源上限制恶意代码的执行，弥补传统安全防护（如输入过滤、输出编码）的不足。
1. CSP 的核心逻辑："白名单机制"
CSP 的核心思想是 "默认拒绝，例外允许"------ 除非开发者明确将某个资源来源加入 "白名单"，否则浏览器会默认阻止该资源的加载或执行。这种机制彻底改变了传统网页 "默认允许所有资源" 的宽松模式，大幅降低了恶意资源注入的风险。
2. CSP 的实现载体：两种部署方式
CSP 的规则通常通过以下两种方式传递给浏览器，开发者可根据场景选择：
- HTTP 响应头（推荐） ：在服务器返回的 HTTP 响应中添加
Content-Security-Policy头，例如：Content-Security-Policy: default-src 'self'; script-src https://cdn.example.com。这种方式优先级高、规则覆盖全面，适用于整站或特定页面的安全管控。 <meta>标签 ：众所周知可以通过<meta>标签来模拟响应头，例如：<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://img.example.com">。这种方式无需服务器配置，适合静态页面或无法修改服务器响应头的场景（如静态博客、第三方平台托管页面）。
二、CSP 的核心作用 ------ 抵御哪些威胁？解决什么问题？
CSP 的核心价值在于 "精准管控资源加载，阻断恶意代码执行"，具体可拆解为以下 4 个关键作用：
1. 抵御 XSS 攻击：从 "事后过滤" 到 "事前阻止"
XSS 攻击的本质是恶意脚本被注入到网页中并执行，而 CSP 通过限制 "脚本的加载来源" 和 "脚本的执行方式"，直接切断恶意脚本的执行路径：
- 禁止加载未知来源的脚本：例如通过
script-src 'self' https://cdn.tencent.com，仅允许加载网站自身（'self'）和腾讯 CDN 的脚本，恶意网站的脚本会被直接拦截； - 禁止内联脚本（如
<script>alert(1)</script>）和eval()函数：内联脚本是 XSS 攻击的常用载体，CSP 默认拒绝内联脚本（需显式配置'unsafe-inline'才允许，且不推荐），同时禁用eval()等动态执行脚本的函数，彻底杜绝 "动态注入恶意代码" 的可能。
2. 防止数据注入与恶意资源加载
除了脚本，CSP 还能管控图片、样式表、字体、iframe 等各类资源的加载来源：
- 例如通过
img-src https://img.example.com data:，仅允许加载指定域名的图片和data:协议的 Base64 图片，避免攻击者注入恶意图片（如包含恶意代码的 SVG）； - 通过
frame-src 'none'禁止加载任何 iframe，防止 "点击劫持"（Clickjacking）攻击 ------ 即攻击者通过 iframe 嵌套合法网站，诱导用户点击恶意按钮。
3. 增强网站的 "安全透明度"：报告机制
CSP 支持 "违规报告" 功能：当浏览器检测到违反 CSP 规则的行为时（如尝试加载未授权的脚本），会自动向开发者指定的 "报告地址" 发送 JSON 格式的日志，包含违规资源的 URL、违规类型、触发页面等信息。
这一机制让开发者能实时监控网站的安全风险，例如：
- 发现未被注意的第三方脚本加载（可能存在安全隐患）；
- 验证 CSP 规则是否配置正确（避免误拦截合法资源）。
4. 兼容 "渐进式安全"：从测试到强制
为了避免直接启用 CSP 导致合法资源被拦截（影响网站功能），CSP 提供了 "测试模式"：将 HTTP 响应头改为Content-Security-Policy-Report-Only，此时浏览器仅会记录违规行为（发送报告），但不会实际阻止资源加载。
三、CSP 的具体使用 ------ 规则配置、常见场景与注意事项
CSP 的使用核心是 "配置规则"，而规则由 "指令（Directive）" 和 "源（Source）" 两部分组成。下面从基础配置逻辑、常见场景示例、避坑指南三个方面，讲解 CSP 的实际应用。
1. 基础：CSP 的 "指令" 与 "源" 详解
（1）核心指令：管控不同类型的资源
CSP 提供了数十种指令，覆盖各类资源和行为，以下是最常用的 8 个指令：
| 指令（Directive） | 作用 | 示例 |
|---|---|---|
default-src |
所有资源的 "默认加载规则"，当其他指令（如script-src）未配置时，会继承default-src的规则 |
default-src 'self'（默认仅允许加载自身域名资源） |
script-src |
管控 JavaScript 脚本的加载与执行（最关键的指令之一） | script-src 'self' https://cdn.jsdelivr.net |
style-src |
管控 CSS 样式表的加载与执行 | style-src 'self' https://fonts.googleapis.com |
img-src |
管控图片资源（jpg、png、svg 等）的加载 | img-src 'self' https://img.baidu.com data: |
font-src |
管控字体文件（woff、ttf 等）的加载 | font-src 'self' https://fonts.gstatic.com |
frame-src |
管控 iframe 嵌套的来源 | frame-src 'none'（禁止所有 iframe） |
report-uri / report-to |
指定违规报告的接收地址（report-uri是旧标准，report-to是新标准，建议同时配置） |
report-uri /csp-report; report-to csp-endpoint |
object-src |
管控插件资源（如 Flash、Java Applet，现在较少使用） | object-src 'none'（禁止所有插件） |
（2）常见 "源" 值：定义 "安全的资源来源"
"源" 是指令后紧跟的 "允许加载的资源地址"，支持多种格式，以下是最常用的 5 种：
| 源（Source） | 含义 | 示例 |
|---|---|---|
'self' |
允许加载当前网站的同源资源（同协议、同域名、同端口） | default-src 'self' |
| 完整域名 | 允许加载指定域名的资源（可带端口，默认 80/443） | script-src https://cdn.example.com:8443 |
| 通配符域名 | 允许加载指定域名下的所有子域名（如*.example.com） |
img-src *.example.com |
data: |
允许加载 Base64 编码的资源（如data:image/png;base64,...） |
img-src data: |
'none' |
禁止加载该类型的所有资源 | frame-src 'none' |
⚠️ 注意：'self'、'none'、'unsafe-inline'等带引号的值，必须使用单引号包裹 ，否则浏览器会将其识别为 "域名"（如self会被当作self.com），导致规则失效。