浏览器未应用HTTP头传递的CSP？Rails后端CSP生效问题排查

问题概述 #

目标是在Rails后端通过HTTP头配置Content Security Policy（CSP）并让浏览器强制执行，但设置的严格CSP规则并未生效——浏览器已接收后端发送的头，但仍允许JS执行、图片加载等操作，仅在前端index.html通过meta标签配置CSP时规则有效。

已确认信息 #

• 环境：Rails 7.1.3.4、Node v20.18.2、最新版Firefox/Chrome
• 后端发送的CSP头内容：

Content-Security-Policy: default-src 'none'; script-src 'none'; style-src 'none'; img-src 'none'; font-src 'none'; connect-src 'none'; frame-src 'none'; object-src 'none'; media-src 'none'; worker-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'

• 现象：浏览器网络面板显示已接收该头，但规则未强制执行；meta标签配置方式有效。

排查方向与解决方法 #

1. 检查Rails内置CSP中间件冲突 #

Rails 7+默认启用ContentSecurityPolicy中间件，若你手动设置HTTP头，会被中间件的配置覆盖。

• 解决方式：
  • 推荐通过Rails中间件配置CSP：在config/initializers/content_security_policy.rb中添加规则：

    Rails.application.config.content_security_policy do |policy|
      policy.default_src :none
      policy.script_src :none
      policy.style_src :none
      policy.img_src :none
      policy.font_src :none
      policy.connect_src :none
      policy.frame_src :none
      policy.object_src :none
      policy.media_src :none
      policy.worker_src :none
      policy.base_uri :none
      policy.form_action :none
      policy.frame_ancestors :none
    end
    

  • 若需手动设置HTTP头，先禁用内置中间件：在config/application.rb中添加：

    config.content_security_policy = false
    

2. 验证HTTP头格式正确性 #

确保头名称严格为Content-Security-Policy（连字符分隔，大小写不敏感但建议规范），头值无多余空格或语法错误。例如避免头名称后冒号加空格的写法（虽部分浏览器兼容，但不符合标准格式）。

3. 清除缓存 #

• 浏览器端：强制刷新页面（Ctrl+Shift+R），或在开发者工具中勾选「禁用缓存」后重新测试。
• 服务端/CDN：若使用反向代理或CDN，检查是否缓存了未携带CSP头的旧响应，需更新缓存策略。

4. 排除Report-Only模式 #

检查响应头中是否存在Content-Security-Policy-Report-Only字段，该模式仅上报违规行为不强制执行规则，确保使用的是强制执行的Content-Security-Policy头。

5. 检查内嵌资源的自动豁免 #

若页面存在内嵌脚本/样式，Rails中间件可能自动添加nonce或hash豁免规则，导致'none'设置被覆盖。此时需通过中间件明确配置规则，而非手动设置HTTP头。

验证步骤 #

1. 在浏览器开发者工具「网络」面板中，确认Content-Security-Policy头的名称和值完全符合配置，未被篡改。
2. 查看「控制台」面板，若CSP规则生效，会出现资源被阻止的报错；若无相关日志，说明浏览器未识别到有效规则。
3. 暂时移除页面中的meta标签CSP，避免与HTTP头规则冲突。

内容的提问来源于stack exchange，提问作者Ju lien