内容安全策略（CSP）详解：Web安全的关键防线
目录
一、CSP基础概念与核心价值
1.1 CSP的核心优势
1.2 主要防护目标
二、CSP策略配置详解
2.1 基本指令集
2.2 典型配置方案
三、高级防护技术与实践
3.1 非ce替代方案
3.2 哈希与nonce应用
3.3 常见配置错误与修正
一、CSP基础概念与核心价值
内容安全策略（Content Security Policy）是一种通过HTTP头或<meta>元素定义的安全标准，用于精确控制网页可以加载哪些外部资源，从根本上减少XSS、数据注入等攻击面。
1.1 CSP的核心优势
-
资源白名单控制：只允许加载受信任源的资源
-
内联脚本禁用：消除最常见的XSS攻击载体
-
数据泄露防护：阻止未经授权的数据外传
-
报告机制：实时监控潜在违规行为
1.2 主要防护目标
二、CSP策略配置详解
2.1 基本指令集
| 指令 | 示例值 | 作用说明 |
|---|---|---|
| default-src | 'self' cdn.example.com | 默认资源加载规则 |
| script-src | 'unsafe-inline' 'strict-dynamic' | 控制JavaScript加载 |
| style-src | 'self' fonts.googleapis.com | 控制CSS加载 |
| img-src | * data: | 控制图片资源 |
| connect-src | https://api.example.com | 控制XHR、WebSocket等连接 |
| report-uri | https://report.example.com | 违规报告接收地址 |
2.2 典型配置方案
严格策略（推荐）：Content-Security-Policy: default-src 'none';script-src 'self' 'sha256-abc123...';style-src 'self' 'unsafe-inline';img-src 'self' data:;font-src 'self';connect-src 'self';form-action 'self';frame-ancestors 'none';report-uri /csp-report;
渐进式部署策略：Content-Security-Policy-Report-Only: default-src 'self';report-uri /csp-report;三、高级防护
3.1 非ce替代方案
// 传统危险写法
<button onclick="doSomething()">Click</button>
// CSP兼容写法
document.querySelector('button').addEventListener('click', doSomething);3.2 哈希与nonce应用
<!-- 允许特定内联脚本 -->
<script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">console.log('Allowed script');
</script>
<!-- 允许特定样式 -->
<style nonce="EDNnf03nceIOfn39fn3e9h3sdfa">body { color: red; }
</style>3.3 常见配置错误与修正
| 错误配置 | 安全风险 | 正确方案 |
|---|---|---|
script-src '*' | 任意JS执行 | script-src 'self' |
unsafe-inline | 内联XSS漏洞 | 使用nonce/hash替代 |
缺失object-src | 恶意Flash/PDF注入 | object-src 'none' |
宽松的connect-src | 数据泄露风险 | 明确指定API端点 |