.htaccess配置Content-Security-Policy/CSP headers遭拦截求助

你的问题核心在于当前CSP规则只定义了script-src，但没有为CSS、图片等其他资源类型配置允许的加载源，同时Header add指令可能导致重复添加CSP头，引发浏览器解析冲突。

问题分析 #

当CSP未指定default-src（默认资源策略）时，浏览器会对所有未单独配置的资源类型（比如style、img、font等）采用默认拒绝策略，这就是为什么你的CSS、图片也被拦截。另外，Header add会在已有CSP头的基础上追加新规则，可能导致多个CSP头并存，浏览器处理时会取最严格的规则，进一步加剧拦截问题。

修复方案 #

1. 补充完整的资源类型规则，根据实际需求添加style-src、img-src、font-src等，同时建议设置default-src作为兜底策略。
2. 改用Header set指令，确保只输出一个CSP头，避免冲突。

修改后的配置示例：

Header set X-XSS-Protection "1; mode=block"
Header set Content-Security-Policy "default-src 'self'; 
  script-src 'self' https://*.google.com https://*.googleapis.com; 
  style-src 'self' 'unsafe-inline' https://*.googleapis.com; 
  img-src 'self' data: https://*.google.com; 
  font-src 'self' https://*.googleapis.com"

• default-src 'self'：所有未单独配置的资源默认允许从当前域名加载
• style-src中添加'unsafe-inline'：如果页面存在内联CSS（开发环境常见），需要允许该规则；生产环境可替换为nonce或hash值提升安全性
• img-src中添加data:：允许加载base64格式的图片
• 保留原有的Google相关域名，适配第三方脚本/资源加载

调试技巧 #

打开浏览器开发者工具（F12）的「控制台」面板，CSP拦截错误会明确提示哪个资源被拦截以及需要添加的源地址，根据提示针对性调整规则即可。

内容的提问来源于stack exchange，提问作者Mr.Singh