本文目录导读：
安全策略,Content Security Policy）是一种重要的安全机制，用于防止跨站脚本攻击（XSS）、数据注入攻击等，它通过 HTTP 响应头或 HTML 的 <meta> 标签来告诉浏览器哪些来源的资源是可信的。
以下是设置 CSP 的详细方法和常见策略配置：
通过 HTTP 响应头设置（推荐）
在服务器端（如 Nginx、Apache、Node.js 等）配置 HTTP 响应头，这是最常用且安全的方式。
示例：Nginx 配置
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://apis.google.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none'; base-uri 'self';";
示例：Apache 配置
Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted-cdn.com;"
示例：Node.js (Express)
app.use((req, res, next) => {
res.setHeader(
'Content-Security-Policy',
"default-src 'self'; font-src 'self' fonts.gstatic.com;"
);
next();
});
通过 HTML <meta> 标签设置（较简单，但限制较多）
在页面的 <head> 部分添加 <meta> 标签，注意：<meta> 方式不能完全覆盖 HTTP 头，且无法设置部分高级指令（如 report-uri 或 frame-ancestors）。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval';">
常见 CSP 指令及含义
| 指令 | 作用 | 示例值 |
|---|---|---|
default-src |
没有单独设置时的默认策略 | 'self' |
script-src |
允许加载 JavaScript 的源 | 'self' https://cdn.example.com |
style-src |
允许加载 CSS 的源 | 'self' 'unsafe-inline' |
img-src |
允许加载图片的源 | 'self' data: https://* |
font-src |
允许加载字体的源 | 'self' fonts.googleapis.com |
connect-src |
允许通过 Ajax/Fetch/WebSocket 连接的源 | 'self' https://api.myapp.com |
frame-src / child-src |
允许被嵌入的 <frame> 或 <iframe> 源 |
'self' https://player.vimeo.com |
object-src |
允许加载 <object>, <embed>, <applet> 的源 |
'none'（推荐禁止） |
media-src |
允许加载音频/视频的源 | 'self' https://media.example.com |
base-uri |
限制 <base> 标签的 URL |
'self' |
form-action |
限制表单提交的 URL | 'self' https://secure.example.com |
frame-ancestors |
限制当前页面可被哪些源嵌入（防点击劫持） | 'none' 或 'self' |
report-uri / report-to |
当策略被违反时，向指定 URL 发送报告 | /csp-violation-report-endpoint |
特殊值说明
- `'self'：只允许同源（协议+域名+端口相同）。
- `'none'：禁止任何来源。
- `'unsafe-inline'：允许内联脚本/样式（有风险，尽量用哈希或 nonce 替代）。
- `'unsafe-eval'：允许使用
eval()、setTimeout(string)等（高风险）。 - `'strict-dynamic'：允许信任由已信任脚本动态加载的脚本（现代 CSP 推荐）。
https:：允许所有 HTTPS 源。data:：允许data:URI（如图片 base64）。
实战：一个相对安全且不误伤正常功能的 CSP 示例
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-随机字符串' 'strict-dynamic' https://www.google-analytics.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://api.example.com wss://ws.example.com; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; report-uri /csp-report;
说明：
- 用
nonce或hash代替'unsafe-inline'可以更安全地允许内联脚本。 - 禁止了
object-src（Flash、Java 插件等）。 - 禁止了
frame-ancestors（防止被嵌入到其他网站）。 - 设置了
report-uri以收集违规报告。
如何调试与测试？
-
使用报告模式（只报告，不拦截）： 在正式启用前，先使用
Content-Security-Policy-Report-Only头，它只会收集违规报告，不会实际拦截资源，等确认无误后再改为Content-Security-Policy。Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;
-
浏览器开发者工具： Chrome/Firefox 控制台会显示 CSP 违规的详细信息，包括被拦截的资源地址和策略指令。
-
在线工具： 使用 CSP Evaluator 检查策略的安全性。
常见问题与注意事项
'unsafe-inline'与nonce或hash：如果网站有大量内联脚本（如<script>alert(1)</script>），直接禁用内联会导致功能崩溃，优先使用nonce（每次请求生成随机值）或hash的 SHA 哈希值）。- CDN 资源：如果使用了外部 CDN（如 jQuery、Bootstrap 的 CDN），必须在
script-src或style-src中显式允许。 - 第三方服务：Google Analytics、Facebook Pixel 等需要添加对应的域名到
script-src和img-src等指令。 - WebSocket 连接：需要在
connect-src中添加wss://或ws://源。 - 报告接收：设置
report-uri并实现一个服务器端端点来接收 JSON 格式的违规报告，有助于持续优化策略。
设置 CSP 的核心步骤：
- 分析网站需要加载哪些资源（脚本、样式、图片、字体、接口等）。
- 从严格策略开始：
default-src 'self'，然后逐一放宽。 - 用
Report-Only模式测试，确保不破坏功能。 - 生产环境使用完整策略，并持续监控违规报告。
如果你能提供具体的网站需求（如使用哪些 CDN、框架、第三方服务），我可以帮你定制更精确的 CSP 策略。
