内容安全策略（CSP）详解：Web安全的关键防线

一、CSP基础概念与核心价值

[1.1 CSP的核心优势](#1.1 CSP的核心优势)

[1.2 主要防护目标](#1.2 主要防护目标)

二、CSP策略配置详解

[2.1 基本指令集](#2.1 基本指令集)

[2.2 典型配置方案](#2.2 典型配置方案)

三、高级防护技术与实践

[3.1 非ce替代方案](#3.1 非ce替代方案)

[3.2 哈希与nonce应用](#3.2 哈希与nonce应用)

[3.3 常见配置错误与修正](#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端点