Nginx Content Security Policy(CSP)问题

问题

最近在部署Hexo时，发现页面加载时，浏览器控制台报错如下：

Refused to load the script 'https://cn.vercount.one/js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

问题分析

问了AI之后了解，CSP是一种安全机制，用于防止跨站脚本攻击（XSS）等安全问题。CSP通过限制网页可以加载的资源类型，来减少XSS攻击的风险。

在Nginx中，可以通过add_header指令来配置CSP。例如，以下配置将CSP设置为只允许加载本站点的脚本：

add_header Content-Security-Policy "script-src 'self'";

于是在站点配置文件中添加了如下配置：

# 添加 CSP 规则
add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cn.vercount.one;";

重启Nginx后发现依旧报错，查看Nginx其他配置，发现/etc/nginx/nginxconfig.io/security.conf中配置使用了 default-src，它是一个通用的指令，会覆盖 script-src 的具体行为：

add_header Content-Security-Policy   "default-src 'self' http: https: ws: wss: data: blob: 'unsafe-inline'; frame-ancestors 'self';" always;

修改 CSP 规则，明确 script-src：

add_header Content-Security-Policy "default-src 'self' http: https: ws: wss: data: blob: 'unsafe-inline'; frame-ancestors 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cn.vercount.one;" always;

问题解决

重启Nginx后，问题解决。