内容安全策略（CSP）是通过HTTP响应头或meta标签来声明页面可以加载哪些资源的机制，能有效降低XSS、数据注入等攻击的风险。如果配置不当，不仅无法发挥防护作用，还可能被攻击者绕过，因此掌握正确的配置方法和漏洞修复思路非常重要。
常见的CSP配置错误场景
1. 通配符滥用
很多开发者为了方便，会在default-src或者script-src等指令中使用通配符*，比如配置script-src *，这会让页面允许加载任意域名的脚本，攻击者可以注入恶意脚本到任意可访问的域名，直接绕过CSP的防护。
2. 遗漏关键指令配置
只配置了script-src而忽略style-src、img-src等指令，会导致内联样式、图片等资源不受限制，攻击者可以通过注入内联样式执行恶意代码，或者加载外部的恶意资源。
3. 未禁用不安全的inline执行
如果配置了script-src 'unsafe-inline'，相当于允许页面执行所有内联脚本，这会让XSS攻击中的内联恶意脚本直接生效，完全失去了CSP对脚本执行的管控作用。
4. 未设置report-only模式直接上线
没有先通过Content-Security-Policy-Report-Only头测试策略兼容性，直接上线强制策略，可能导致页面正常功能失效，比如部分合法资源被拦截，影响用户体验。
CSP漏洞修复的正确配置方案
1. 最小化资源加载域名
避免使用通配符，只声明页面确实需要加载资源的域名，比如页面只从自身域名和CDN域名加载脚本，就配置script-src 'self' https://cdn.ippipp.com，如果需要允许内联脚本，不要直接用'unsafe-inline'，而是使用nonce或者hash的方式。
使用nonce的meta标签配置示例如下：
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-abc123'">
<script nonce="abc123">
// 合法的脚本，nonce值和CSP中声明的一致，允许执行
console.log('正常脚本执行');
</script>
<script>
// 没有对应nonce值的内联脚本会被拦截
console.log('恶意脚本');
</script>
2. 补全所有必要的指令
根据页面实际使用的资源类型，配置完整的指令，常见的指令包括：
default-src：默认资源加载规则，其他指令未设置时生效script-src：脚本资源加载规则style-src：样式资源加载规则img-src：图片资源加载规则font-src：字体资源加载规则connect-src：AJAX、WebSocket等连接规则frame-src：iframe加载规则
完整的meta标签配置示例：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'nonce-abc123'; style-src 'self' 'sha256-abc456def789'; img-src 'self' https://img.ipipp.com; font-src 'self'; connect-src 'self' https://api.ipipp.com; frame-src 'none'">
3. 使用hash替代unsafe-inline
如果页面有固定的内联脚本或样式，可以计算其内容的hash值，添加到对应的指令中，比如内联样式的hash值为sha256-abc456def789，配置style-src 'self' 'sha256-abc456def789'，该内联样式就会被允许执行，其他未声明hash的内联样式会被拦截。
计算内联样式hash的示例脚本：
// 计算内联样式内容的sha256 hash
const crypto = require('crypto');
const styleContent = 'body { color: #333; }';
const hash = crypto.createHash('sha256').update(styleContent).digest('base64');
console.log(`sha256-${hash}`);
// 输出的结果可以直接放到style-src指令中
4. 先使用report-only模式测试
上线前先通过Content-Security-Policy-Report-Only头或者对应的meta标签测试策略，同时配置report-uri或者report-to指令接收违规报告，确认没有误拦截合法资源后，再切换为强制模式。
report-only模式的meta配置示例：
<meta http-equiv="Content-Security-Policy-Report-Only" content="default-src 'self'; script-src 'self'; report-uri /csp-report">
配置后验证方法
配置完成后可以通过以下方式验证是否生效：
- 在浏览器开发者工具的Network面板中查看页面的响应头，确认CSP头或者meta标签已经正确设置
- 尝试在页面中注入内联脚本、加载未声明域名的资源，查看是否被浏览器拦截，控制台会输出对应的CSP违规信息
- 如果配置了report-uri，可以查看服务端接收到的违规报告，确认是否有合法的请求被误拦截
如果是在服务端配置CSP响应头，以Node.js的Express框架为例，正确配置示例如下：
const express = require('express');
const app = express();
app.use((req, res, next) => {
// 设置CSP响应头，只允许自身域名的脚本和图片，内联脚本需要nonce
res.setHeader(
'Content-Security-Policy',
"default-src 'self'; script-src 'self' 'nonce-abc123'; img-src 'self'; report-uri /csp-report"
);
next();
});
app.get('/', (req, res) => {
res.send(`
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSP测试页面</title>
</head>
<body>
<script nonce="abc123">
console.log('合法脚本执行');
</script>
</body>
</html>
`);
});
app.listen(3000, () => {
console.log('服务启动在3000端口');
});