Nginx 设置内容安全策略：保护网站免受 XSS 攻击

在搭建网站时，很多人只关注功能和性能，却忽略了安全性。尤其是使用 Nginx 作为反向代理或静态服务器时，很容易成为跨站脚本（XSS）攻击的目标。开启内容安全策略（Content Security Policy，简称 CSP）能有效减少这类风险。

什么是内容安全策略（CSP）？

CSP 是一种浏览器安全机制，通过设置 HTTP 响应头，告诉浏览器哪些资源可以加载，比如脚本、样式、图片等。例如，你可以规定页面只能加载本站的 JavaScript，禁止内联脚本执行，这样即使攻击者注入了恶意代码，也不会被运行。

在 Nginx 中配置 CSP

要在 Nginx 中启用 CSP，只需在 server 或 location 块中添加 add_header 指令。下面是一个基础配置示例：

add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; object-src 'none'; frame-ancestors 'self';";

这个策略的含义是：

• default-src 'self'：默认所有资源只能从同源加载
• script-src 'self'：JavaScript 只允许来自本站
• style-src 'self' 'unsafe-inline'：样式表允许同源和内联（如某些 UI 框架需要）
• img-src 'self' data:：图片允许同源和 data URI（比如小图标）
• font-src 'self'：字体文件仅限同源
• object-src 'none'：禁止 <object>、<embed> 等插件内容
• frame-ancestors 'self'：防止被嵌入到其他网站的 iframe 中（防点击劫持）

逐步上线避免页面异常

直接启用 CSP 可能导致页面某些资源加载失败，特别是引入了第三方统计、CDN 资源或内联脚本的情况。建议先用报告模式观察问题：

add_header Content-Security-Policy-Report-Only "default-src 'self'; report-uri /csp-report;";

加上 Report-Only 后，浏览器不会阻止资源加载，但会把违规行为发送到指定的 report-uri。你可以先收集日志，再调整策略。

配合 Nginx 日志分析 CSP 报告

如果设置了 report-uri /csp-report，可以在 Nginx 中配置一个 location 来接收这些报告：

location = /csp-report {
    access_log /var/log/nginx/csp-report.log csp;
    add_header Content-Type text/plain;
    return 204;
}

同时在 log_format 中定义 csp 格式：

log_format csp '$remote_addr - $remote_user [$time_local] "$request" '
                '$status $body_bytes_sent "$http_referer" '
                '"$http_user_agent" "$http_content_type" "$request_body"';

这样所有 CSP 违规信息都会记录在 csp-report.log 中，便于排查。

常见问题处理

如果页面用了 jQuery 或 Vue，并且有大量内联脚本，可能会遇到阻塞。可以临时加入 'unsafe-inline'，但更推荐使用非ces哈希或随机数方式：

script-src 'self' 'sha256-B2JDOHEV8dNBu+STszuY1g9ZkxxQHqyEzLorOe0jwvc=';

把实际脚本内容计算出 SHA-256 哈希值，加入策略，这样既安全又灵活。

线上项目建议定期检查 CSP 策略，随着业务变化更新规则，确保既能防护攻击，又不影响正常功能。