Web 安全头完全指南：CSP、HSTS 与前端防御实战

你是否知道，仅靠添加几行 HTTP 响应头，就能阻止 90% 以上的常见 Web 攻击？根据 Google 的统计，正确配置 Content-Security-Policy（CSP）的网站，XSS 攻击成功率下降了 99.95%。然而，大多数开发者对安全头的认知还停留在「听说过 CORS」的阶段。本文将从实战角度出发，逐一拆解每个关键安全头的配置方法、常见陷阱和最佳实践。

🛡️ 一、为什么安全头是你的第一道防线

1.1 纵深防御的理念

Web 安全不是靠单一手段解决的。纵深防御（Defense in Depth）的核心思想是：每一层都应该假设上一层已经被突破。HTTP 安全头正是这个理念的典型实践——它们在浏览器层面强制执行安全策略，即使你的后端代码存在漏洞，也能提供额外的保护。

一个典型的攻击链如下：

1. 攻击者发现你的网站存在 XSS 漏洞
2. 注入恶意脚本，试图窃取用户的 Cookie
3. 如果配置了 CSP，浏览器会阻止内联脚本执行，攻击失败
4. 如果配置了 SameSite Cookie，即使 XSS 成功，Cookie 也无法被跨站发送

1.2 安全头全景图

下表列出了所有关键的 HTTP 安全头及其作用：

💡 **提示：**安全头不是「可选的优化」，而是生产环境的必备配置。在 OWASP Top 10 中，缺失安全头本身就是安全漏洞。

🔐 二、Content-Security-Policy 深度实战

CSP 是所有安全头中最强大、也最复杂的一个。它通过白名单机制，告诉浏览器只允许加载和执行哪些资源，从而从根本上阻止 XSS 攻击。

2.1 CSP 基础语法与指令

CSP 的核心是一组指令（Directive），每个指令控制一类资源的加载策略：

# Nginx 中配置基础 CSP
add_header Content-Security-Policy "
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';
" always;

每个指令的含义：

2.2 Nonce 与 Hash：告别 unsafe-inline

很多开发者在配置 CSP 时，为了图省事直接写 'unsafe-inline'，这等于放弃了 CSP 对内联脚本的保护。正确的做法是使用 Nonce（一次性令牌）或 Hash。

Nonce 方式（推荐动态页面）：

// Node.js + Express 中间件示例
const crypto = require('crypto');

function cspMiddleware(req, res, next) {
  // 每次请求生成唯一的 nonce
  const nonce = crypto.randomBytes(16).toString('base64');
  
  // 将 nonce 传递给模板引擎
  res.locals.cspNonce = nonce;
  
  // 设置 CSP 头
  res.setHeader('Content-Security-Policy', [
    `default-src 'self'`,
    `script-src 'self' 'nonce-${nonce}' https://cdn.example.com`,
    `style-src 'self' 'nonce-${nonce}'`,
    `img-src 'self' data: https:`,
    `connect-src 'self' https://api.example.com`,
    `frame-ancestors 'none'`,
    `base-uri 'self'`,
    `form-action 'self'`
  ].join('; '));
  
  next();
}

// 模板中使用 nonce
// <script nonce="<%= cspNonce %>">
//   console.log('This inline script is allowed');
// </script>

Hash 方式（适合静态页面）：

// 构建时计算脚本的 SHA-256 哈希
const crypto = require('crypto');

function calculateHash(scriptContent) {
  const hash = crypto.createHash('sha256').update(scriptContent).digest('base64');
  return `'sha256-${hash}'`;
}

// 示例：内联脚本
const inlineScript = `console.log('Hello, secure world!');`;
const hash = calculateHash(inlineScript);
// 输出: 'sha256-q2S7bXrK5Hk3O9xVWJ1YmMzODljNTQ0ZjcwMjA2ZDg='

// CSP 配置
const cspHeader = `script-src 'self' ${hash} https://cdn.example.com`;

⚠️ **警告：**永远不要在生产环境使用 'unsafe-inline' + 'unsafe-eval' 的组合。这几乎等同于没有 CSP，React、Vue 等框架的开发模式依赖这些指令，但生产构建应该通过 Nonce 或 Hash 来替代。

2.3 CSP 上报模式与渐进式部署

直接在生产环境开启强制 CSP 风险很大——一个误配就可能导致页面白屏。CSP 提供了两种安全的部署策略：

策略一：Report-Only 模式（推荐第一步）

# 先用报告模式观察，不影响页面功能
add_header Content-Security-Policy-Report-Only "
  default-src 'self';
  script-src 'self' 'nonce-abc123';
  report-uri /api/csp-report;
  report-to csp-endpoint;
" always;

策略二：带上报的强制模式（推荐第二步）

# 确认无误后切换到强制模式，同时保留上报
add_header Content-Security-Policy "
  default-src 'self';
  script-src 'self' 'nonce-abc123';
  report-uri /api/csp-report;
" always;

后端接收 CSP 违规报告：

// Express 接收 CSP 违规报告
app.post('/api/csp-report', express.json({ type: 'application/csp-report' }), (req, res) => {
  const report = req.body['csp-report'];
  
  console.error('[CSP Violation]', {
    blockedUri: report['blocked-uri'],
    violatedDirective: report['violated-directive'],
    documentUri: report['document-uri'],
    sourceFile: report['source-file'],
    lineNumber: report['line-number'],
    timestamp: new Date().toISOString()
  });
  
  // 可以接入 Sentry、日志系统等
  // logger.warn('CSP violation', report);
  
  res.status(204).end();
});

💡 **提示：**建议先在 Report-Only 模式下运行 2-4 周，收集所有违规报告，修复问题后再切换到强制模式。这是大型网站的标准部署流程。

🚀 三、HSTS、X-Frame-Options 与其他关键头

3.1 HSTS：强制 HTTPS

HSTS（HTTP Strict Transport Security）告诉浏览器：在指定时间内，只能通过 HTTPS 访问这个域名，即使是用户手动输入 http:// 也不行。

# Nginx HSTS 配置
# max-age=31536000 = 1 年
# includeSubDomains = 包含所有子域名
# preload = 提交到浏览器预加载列表
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

⚠️ HSTS 的坑：

1. 首次访问无法保护：用户第一次访问你的网站时（浏览器还没有 HSTS 记录），仍然可能被中间人攻击。解决方案是申请加入 HSTS Preload List，让浏览器内置你的域名。

2. 误配 includeSubDomains 的后果：如果你的子域名有 HTTP 服务（如内部管理系统），开启 includeSubDomains 会导致这些子域名无法访问。务必在所有子域名都支持 HTTPS 后再添加此参数。

3. 不可逆性：一旦设置 max-age 为一年，即使你删除了 HSTS 头，浏览器在一年内仍然会强制 HTTPS。在测试阶段建议先用较短的 max-age（如 300 秒）。

# ⚠️ 测试阶段：5 分钟有效期
add_header Strict-Transport-Security "max-age=300" always;

# ✅ 生产环境：1 年 + 预加载
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

3.2 X-Frame-Options vs frame-ancestors

X-Frame-Options 用于防止点击劫持（Clickjacking），即攻击者通过 <iframe> 嵌入你的页面，诱导用户点击。

# 旧方案：X-Frame-Options（仅支持 DENY 和 SAMEORIGIN）
add_header X-Frame-Options "SAMEORIGIN" always;

# 新方案：CSP frame-ancestors（更灵活，支持域名白名单）
add_header Content-Security-Policy "frame-ancestors 'self' https://trusted-partner.com" always;

📌 **记住：**现代浏览器中，CSP frame-ancestors 优先级高于 X-Frame-Options。建议两者都配置，以兼容旧浏览器。

3.3 X-Content-Type-Options 与 MIME 嗅探

某些浏览器会「猜测」服务器返回的文件类型（MIME Sniffing），攻击者可以利用这一点，让浏览器把一个看似图片的文件当作 HTML 执行。

# 禁止浏览器进行 MIME 类型嗅探
add_header X-Content-Type-Options "nosniff" always;

这是一个极其简单的配置，但防护效果显著。设置后，浏览器会严格遵循服务器返回的 Content-Type，不会进行任何猜测。

3.4 Referrer-Policy：控制信息泄露

当用户从你的页面点击链接跳转时，浏览器会把当前页面的 URL 作为 Referer 发送给目标网站。这可能泄露敏感信息（如 URL 中的 token、用户 ID 等）。

# 推荐：仅发送源信息，不包含路径
add_header Referrer-Policy "strict-origin-when-cross-origin" always;

⚠️ **警告：**永远不要使用 unsafe-url，它会将完整的 URL 路径泄露给第三方网站。

3.5 Permissions-Policy：限制浏览器功能

Permissions-Policy（原 Feature-Policy）控制页面可以使用哪些浏览器功能，防止恶意脚本访问摄像头、麦克风、定位等敏感 API。

# 禁用所有敏感功能
add_header Permissions-Policy "
  camera=(),
  microphone=(),
  geolocation=(self),
  payment=(self),
  usb=(),
  magnetometer=(),
  gyroscope=(),
  accelerometer=()
" always;

💡 提示：() 表示禁止所有来源使用该功能，(self) 表示仅允许同源使用。如果你的网站不需要摄像头和麦克风，务必显式禁用。

🏗️ 四、完整配置模板与部署实践

4.1 Nginx 完整安全头配置

以下是生产可用的 Nginx 安全头配置模板，可以直接复制使用：

# /etc/nginx/snippets/security-headers.conf
# 在 server 块中用 include 引入

# === 核心安全头 ===
# CSP（根据实际域名替换）
add_header Content-Security-Policy "
  default-src 'self';
  script-src 'self' 'nonce-$request_id' https://cdn.jsdelivr.net https://unpkg.com;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  img-src 'self' data: https: blob:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com wss://ws.example.com;
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';
  upgrade-insecure-requests;
" always;

# HSTS（1 年，包含子域名）
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

# 禁止 MIME 嗅探
add_header X-Content-Type-Options "nosniff" always;

# 防止点击劫持
add_header X-Frame-Options "SAMEORIGIN" always;

# Referrer 策略
add_header Referrer-Policy "strict-origin-when-cross-origin" always;

# 限制浏览器功能
add_header Permissions-Policy "camera=(), microphone=(), geolocation=(self)" always;

# === 非安全头但推荐 ===
# 隐藏 Nginx 版本号
server_tokens off;

4.2 Spring Boot 安全头配置

// Spring Security 自动配置安全头（推荐方式）
@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            // CSP 配置
            .headers(headers -> headers
                .contentSecurityPolicy(csp -> csp
                    .policyDirectives(
                        "default-src 'self'; " +
                        "script-src 'self'; " +
                        "style-src 'self' 'unsafe-inline'; " +
                        "img-src 'self' data: https:; " +
                        "frame-ancestors 'none'; " +
                        "base-uri 'self'"
                    )
                )
                // HSTS 配置
                .httpStrictTransportSecurity(hsts -> hsts
                    .includeSubDomains(true)
                    .maxAgeInSeconds(31536000)
                    .preload(true)
                )
                // 禁用 MIME 嗅探
                .contentTypeOptions(cto -> {})
                // X-Frame-Options
                .frameOptions(FrameOptionsConfig::sameOrigin)
            );

        return http.build();
    }
}

4.3 安全头检测清单

部署安全头后，使用以下命令验证配置是否生效：

# 检查所有安全头
curl -sI https://your-site.com | grep -iE "(content-security|strict-transport|x-content-type|x-frame|referrer-policy|permissions-policy)"

# 使用 Mozilla Observatory 在线检测（推荐）
# https://observatory.mozilla.org/

# 使用 SecurityHeaders.com 在线检测
# https://securityheaders.com/

部署检查清单：

• ✅ CSP 在 Report-Only 模式下运行至少 2 周
• ✅ HSTS 先用短 max-age 测试，再设置为 1 年
• ✅ 所有子域名都支持 HTTPS 后才添加 includeSubDomains
• ✅ 确认没有内联脚本依赖 'unsafe-inline'
• ✅ 确认第三方 CDN 域名已加入 CSP 白名单
• ✅ CSP 违规报告接口正常接收数据
• ✅ X-Frame-Options 和 frame-ancestors 同时配置
• ✅ 生产环境 server_tokens off 隐藏版本号

💡 五、常见坑点与避坑指南

坑点 1：CSP 阻断了合法资源

症状： 部署 CSP 后，页面样式丢失或脚本不执行，控制台出现 Refused to load 错误。

排查方法：

// 在浏览器控制台快速排查
// 打开 DevTools → Console，筛选 "CSP" 或 "Refused"
// 找到被阻止的资源 URL，加入对应的 CSP 指令

常见遗漏：

• Google Analytics：需要加入 script-src https://www.googletagmanager.com
• 字体 CDN：需要加入 font-src https://fonts.gstatic.com
• 内联样式：Vue/React 的 scoped styles 需要 'unsafe-inline'（style-src）
• Data URI 图片：需要加入 img-src data:

坑点 2：HSTS 预加载的不可逆性

一旦你的域名被加入浏览器的 HSTS Preload List，即使你删除了 HSTS 头，浏览器仍然会强制 HTTPS。要从预加载列表中移除，需要提交申请并等待数月。

⚠️ **警告：**只有在所有子域名都 100% 支持 HTTPS 后，才申请 HSTS Preload。否则子域名的 HTTP 服务将永久不可访问。

坑点 3：CSP 与 SPA 框架的冲突

单页应用（SPA）框架如 Vue、React 在开发模式下大量使用 eval 和内联脚本。解决方案：

// vite.config.js - 生产构建时移除 eval
export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        // 生产构建不使用 eval
        evaluate: false
      }
    }
  }
});

坑点 4：多个 Content-Security-Policy 头的叠加

如果 Nginx 和应用同时设置了 CSP，浏览器会取所有策略的交集（最严格的生效）。这常常导致意外的资源阻止。

# 检查是否有重复的 CSP 头
curl -sI https://your-site.com | grep -i content-security-policy
# 如果出现两行 CSP，说明有重复配置

📊 总结与建议

Web 安全头是投入产出比最高的安全措施之一——几行配置就能显著提升网站的安全水位。关键在于渐进式部署：先用 Report-Only 模式观察，收集数据后再逐步开启强制模式。记住，安全不是一次性的工作，而是持续迭代的过程。

⚡ **关键结论：**如果你只能配置一个安全头，选 CSP；如果你能配置两个，加上 HSTS。这两个头覆盖了 Web 安全中最常见的攻击向量。

相关工具推荐：

• 🔧 Mozilla Observatory — 免费的网站安全头检测工具
• 🔧 SecurityHeaders.com — 一键检测安全头配置
• 🔧 CSP Evaluator — Google 出品的 CSP 配置分析工具
• 🔧 HSTS Preload List — HSTS 预加载申请与检查
• 🔧 jsjson.com 在线工具 — JSON 格式化、编码解码等开发者常用工具