内容安全策略（CSP）：Web安全的"守门人"机制详解

在Web安全防御体系中，内容安全策略（Content Security Policy，简称CSP）是一道强大的"主动防御屏障" 。它不像XSS过滤那样被动拦截恶意代码，而是通过明确规定页面可以加载哪些资源、执行哪些脚本，从根源上切断大多数注入攻击的路径。本文将深入解析CSP的核心作用，系统讲解配置要点，并提供实战场景的配置示例，帮助开发者构建更安全的Web应用。

一、CSP的核心作用

CSP本质上是一种由服务器发送的安全策略声明，浏览器根据这份声明限制页面的资源加载和代码执行。其核心价值在于将"默认允许" 的安全模型转变为"默认拒绝"，仅放行明确允许的资源和操作，从而大幅降低注入攻击风险。

1. 限制资源加载，防止恶意资源引入

现代Web页面依赖大量外部资源（脚本、样式、图片、字体等），若这些资源的来源不受控制，攻击者可能通过劫持CDN、注入恶意链接等方式引入有害资源。

CSP通过精确指定允许加载资源的域名、协议等，彻底阻止从不可信来源加载资源：

• 仅允许从官方域名或可信CDN加载脚本和样式
• 限制图片只能来自指定域名，防止恶意图片追踪或包含有害内容
• 禁止加载未授权的插件（如Flash），减少插件漏洞带来的风险

比喻来说，这就像公司的门禁系统——只有在白名单上的人员（可信资源）才能进入，陌生人（恶意资源）会被直接拦截。

2. 防御注入攻击，遏制XSS等漏洞

XSS攻击的核心是注入并执行恶意脚本，而CSP通过以下方式直接瓦解这类攻击：

• 禁止内联脚本：阻止页面中<script>标签内的代码或事件处理器（如onclick）执行
• 禁止eval()等危险函数：防止通过字符串动态生成并执行代码
• 限制脚本来源：即使攻击者注入了<script src="evil.js">，若evil.js不在允许列表中，也会被浏览器拒绝加载

例如，当页面设置了script-src 'self' https://trusted-cdn.com，以下恶意注入都会失效：

<!-- 内联脚本被阻止 -->
<script>alert('XSS')</script>

<!-- 事件处理器被阻止 -->
<button onclick="stealData()">点击领奖</button>

<!-- 外部恶意脚本被阻止 -->
<script src="https://evil.com/attack.js"></script>

3. 减少数据泄露风险

CSP通过限制资源加载和脚本执行，间接降低了数据泄露的可能性：

• 禁止向不可信域名发送请求，防止敏感数据被偷偷发送给攻击者
• 限制form-action，确保表单只能提交到指定域名，防止表单劫持
• 通过frame-ancestors指令控制页面被嵌入的范围，减少点击劫持风险

4. 提供违规报告，强化安全监控

CSP不仅能阻止违规行为，还能通过配置将违规事件（如尝试加载恶意脚本）报告给指定服务器。这让开发者能实时监控潜在的攻击尝试，及时发现并修复安全漏洞。

例如，当攻击者尝试注入恶意脚本时，浏览器会向report-uri指定的地址发送详细报告，包含违规时间、资源地址、页面URL等信息，帮助安全团队追踪攻击来源。

二、CSP的配置要点

CSP的配置灵活性极高，可根据业务需求精细控制各种资源的加载规则。掌握核心指令、配置方式和常见场景的配置逻辑，是正确应用CSP的关键。

1. 核心指令说明

CSP通过一系列指令（directive）定义安全策略，每个指令控制一类资源或操作的权限。以下是最常用的核心指令：

指令	作用	常用值示例
default-src	所有资源的默认加载规则（未单独指定的资源遵循此规则）	'self'（仅同源）、'none'（禁止所有）
script-src	控制JavaScript的加载和执行	'self'、https://cdn.example.com、'unsafe-inline'（允许内联脚本，不推荐）
style-src	控制CSS样式的加载和应用	'self'、https://styles.example.com、'unsafe-inline'（允许内联样式）
img-src	控制图片资源的加载	'self'、data:（允许data URI）、https://images.example.com
connect-src	控制AJAX、WebSocket等网络请求	'self'、https://api.example.com
font-src	控制字体资源的加载	'self'、https://fonts.gstatic.com
object-src	控制插件资源（如Flash、Java）	'none'（推荐，禁用所有插件）、'self'
frame-src	控制iframe嵌入的内容（已被child-src替代，部分浏览器仍支持）	'self'、https://video.example.com
child-src	控制iframe和worker的来源	'self'、https://trusted-iframe.com
frame-ancestors	控制当前页面可被哪些页面通过iframe嵌入（防御点击劫持）	'self'、'none'（禁止被任何页面嵌入）
form-action	控制表单提交的目标地址	'self'、https://payment.example.com
report-uri	指定违规报告发送的地址（已被report-to替代，兼容性更好）	/csp-report-endpoint

特殊值说明：

• 'self'：允许同源资源（同域名、协议、端口）
• 'none'：禁止所有资源
• 'unsafe-inline'：允许内联脚本/样式（会降低安全性，尽量避免）
• 'unsafe-eval'：允许eval()、new Function()等动态执行函数（高风险，不推荐）
• 'strict-dynamic'：允许由可信脚本动态生成的脚本（用于复杂前端框架）
• https:：允许所有HTTPS来源的资源

2. 配置方式

CSP有两种配置方式，各有适用场景：

（1）通过HTTP响应头配置（推荐）

服务器在响应页面时，通过Content-Security-Policy头传递CSP策略，这是最完整、最灵活的配置方式，支持所有CSP指令（包括 frame-ancestors、report-uri等meta标签不支持的指令）。

配置示例：

# 基本策略：仅允许同源资源
Content-Security-Policy: default-src 'self'

# 更精细的策略：不同资源不同规则
Content-Security-Policy: 
  default-src 'self';
  script-src 'self' https://cdn.jsdelivr.net;
  style-src 'self' https://fonts.googleapis.com;
  img-src 'self' data: https://picsum.photos;
  font-src 'self' https://fonts.gstatic.com;
  frame-ancestors 'self';
  report-uri /csp-violation-report

服务器配置代码示例：

• Nginx（在nginx.conf或站点配置中）：

  add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://cdn.jsdelivr.net; style-src 'self' https://fonts.googleapis.com; img-src 'self' data: https://picsum.photos; font-src 'self' https://fonts.gstatic.com; frame-ancestors 'self'; report-uri /csp-report";

• Apache（在httpd.conf或.htaccess中）：

  Header always set Content-Security-Policy "default-src 'self'; script-src 'self' https://cdn.jsdelivr.net; style-src 'self' https://fonts.googleapis.com; img-src 'self' data: https://picsum.photos; font-src 'self' https://fonts.gstatic.com; frame-ancestors 'self'; report-uri /csp-report"

• Node.js（Express）：

  const express = require('express');
  const app = express();
  
  app.use((req, res, next) => {
    res.setHeader(
      'Content-Security-Policy',
      "default-src 'self'; " +
      "script-src 'self' https://cdn.jsdelivr.net; " +
      "style-src 'self' https://fonts.googleapis.com; " +
      "img-src 'self' data: https://picsum.photos; " +
      "font-src 'self' https://fonts.gstatic.com; " +
      "frame-ancestors 'self'; " +
      "report-uri /csp-report"
    );
    next();
  });

（2）通过<meta>标签配置

在HTML页面的<head>中通过<meta>标签配置，适用于无法修改服务器响应头的场景（如静态页面托管）。

限制：

• 不支持frame-ancestors、report-uri、sandbox等指令
• 无法使用Content-Security-Policy-Report-Only模式（仅报告不拦截）

配置示例：

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' https://cdn.jsdelivr.net;
  style-src 'self' https://fonts.googleapis.com;
  img-src 'self' data: https://picsum.photos;
  font-src 'self' https://fonts.gstatic.com
">

3. 常见场景配置示例

CSP配置需要平衡安全性和功能性，不同场景的策略差异较大。以下是三类典型场景的配置方案：

（1）静态展示型网站（如企业官网、博客）

特点：资源相对固定，以展示为主，几乎没有动态脚本执行需求。

配置策略：严格限制资源来源，禁止内联脚本和eval，禁用插件。

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.jsdelivr.net;  # 仅允许同源和可信CDN的脚本
  style-src 'self' https://fonts.googleapis.com;  # 允许同源和Google字体的样式
  img-src 'self' https://picsum.photos data:;  # 允许图片来自同源、指定图床和data URI
  font-src 'self' https://fonts.gstatic.com;  # 允许Google字体
  object-src 'none';  # 禁用所有插件
  frame-ancestors 'self';  # 仅允许同源页面嵌入
  form-action 'self';  # 表单只能提交到同源
  report-uri /csp-report

（2）交互型Web应用（如电商平台、管理系统）

特点：依赖较多前端框架（如React、Vue），可能有内联脚本或动态加载需求。

配置策略：在安全基础上适度放开必要权限，使用strict-dynamic支持框架动态脚本。

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'strict-dynamic' https://cdn.example.com 'nonce-abc123';  # nonce用于授权特定内联脚本
  style-src 'self' 'unsafe-inline' https://cdn.example.com;  # 允许必要的内联样式
  img-src 'self' https://img.example.com data: blob:;  # 允许图片、data URI和blob
  connect-src 'self' https://api.example.com wss://ws.example.com;  # 允许API请求和WebSocket
  font-src 'self' https://fonts.example.com;
  child-src 'self' https://payment-gateway.com;  # 允许支付网关的iframe
  frame-ancestors 'none';  # 禁止被任何页面嵌入（防止点击劫持）
  report-uri /csp-report

说明：

• 'nonce-abc123'：为特定内联脚本授权（需在<script nonce="abc123">中匹配）
• 'strict-dynamic'：允许由可信脚本动态生成的脚本执行（适合React等框架的动态渲染）
• blob:：允许URL.createObjectURL()生成的二进制资源

（3）仅报告不拦截模式（测试阶段）

特点：首次部署CSP时，为避免策略配置错误导致功能异常，可先启用报告模式。

配置策略：使用Content-Security-Policy-Report-Only头，仅记录违规行为不阻断资源加载。

Content-Security-Policy-Report-Only:
  default-src 'self';
  script-src 'self';
  style-src 'self';
  report-uri /csp-report  # 所有违规行为会被报告，但不影响页面功能

违规报告格式示例（发送到/csp-report的JSON数据）：

{
  "csp-report": {
    "document-uri": "https://example.com/page",
    "referrer": "https://evil.com",
    "violated-directive": "script-src 'self'",
    "effective-directive": "script-src",
    "original-policy": "default-src 'self'; script-src 'self'; report-uri /csp-report",
    "blocked-uri": "https://evil.com/attack.js",
    "status-code": 200
  }
}

通过分析报告，可逐步调整策略直至符合业务需求，再切换为正式拦截模式。

三、CSP配置常见问题与解决方案

1. 内联脚本/样式被拦截导致功能异常

   • 解决方案1：将内联代码移至外部文件，通过script-src/style-src授权
   • 解决方案2：使用nonce（随机数）或hash（代码哈希值）授权特定内联代码：

     # 使用nonce
     script-src 'self' 'nonce-random123'
     # 对应页面中的脚本：<script nonce="random123">...</script>
     
     # 使用hash（SHA-256哈希）
     script-src 'self' 'sha256-abcdef123456...'

2. 第三方脚本（如统计、广告）无法加载

   • 解决方案：在script-src中明确添加第三方域名（如https://analytics.example.com），避免使用*通配符

3. 框架动态生成的脚本被拦截

   • 解决方案：使用'strict-dynamic'指令，允许由可信脚本动态生成的代码执行：

     script-src 'self' 'strict-dynamic' https://cdn.framework.com

4. 配置后页面空白或资源加载失败

   • 排查方法：打开浏览器开发者工具（Console面板），查看CSP相关错误信息，根据提示调整策略
   • 建议：先使用报告模式收集违规信息，再逐步优化配置

总结

内容安全策略（CSP）是Web应用安全的"基础设施"，它通过"白名单机制" 从根源上限制资源加载和代码执行，有效防御XSS、点击劫持等多种攻击。配置CSP的核心原则是"最小权限"——只允许必要的资源和操作，逐步收紧策略。

在实际应用中，建议：

1. 从报告模式开始，收集并分析违规数据，避免直接拦截影响业务
2. 优先通过HTTP响应头配置，充分利用所有CSP指令
3. 结合业务场景精细调整策略，平衡安全性和功能性
4. 持续监控CSP报告，及时发现新的攻击尝试

CSP并非银弹，但它与输入验证、输出编码等措施结合，能构建多层次的安全防御体系，显著提升Web应用的抗攻击能力。记住：安全是一个持续过程，而非一次性配置——定期审查和更新CSP策略，才能应对不断变化的安全威胁。