Rails 7配置CSP导致Hotwire失效的解决方案咨询

问题核心在于 Rails 7 依赖 Importmap 和 Hotwire 运行时会生成合法的内联脚本，但默认 CSP 规则会无差别阻止所有内联脚本，导致功能失效。以下是针对性的配置方案：

完整 CSP 配置示例 #

在 config/initializers/content_security_policy.rb 中替换原有配置为：

Rails.application.config.content_security_policy do |policy|
  # 默认资源加载源，限制为自身与HTTPS
  policy.default_src :self, :https

  # 脚本源：允许自身、HTTPS、带nonce的内联脚本、Blob资源（Turbo Stream依赖）
  policy.script_src :self, :https, "nonce-<%= request.content_security_policy_nonce %>", :blob

  # 样式源：允许自身、HTTPS，临时放开内联样式（Hotwire部分组件依赖）
  policy.style_src  :self, :https, :unsafe_inline

  # 连接源：允许自身、HTTPS，以及开发环境的WebSocket地址（Hotwire实时功能依赖）
  policy.connect_src :self, :https, "ws://localhost:3000", "wss://localhost:3000"

  # 图片源：允许自身、HTTPS、Data URI、Blob资源
  policy.img_src     :self, :https, :data, :blob

  # 字体源：限制为自身与HTTPS
  policy.font_src    :self, :https
end

关键配置说明 #

• script_src 中的 Nonce：Rails 会为每个请求自动生成唯一的 Nonce 值，页面中由 javascript_importmap_tags 渲染的内联脚本会自动携带该 Nonce。CSP 仅允许携带正确 Nonce 的内联脚本，既解决了内联脚本被阻止的问题，又比直接使用 unsafe-inline 更安全。
• :blob 源：Turbo Stream 会通过 Blob 加载部分动态资源，必须加入此规则才能正常渲染流内容。
• connect_src 中的 WebSocket 地址：开发环境下 Hotwire 的实时功能依赖本地 WebSocket 连接，生产环境需替换为你的正式域名（如 wss://your-app.com）。
• :unsafe_inline 样式规则：如果项目中已将所有样式提取到 CSS 文件，可以移除这一项；开发阶段为兼容 Hotwire 组件的默认内联样式，暂时保留更便捷。

验证配置 #

重启 Rails 服务器后访问 localhost:3000，浏览器控制台应不再出现 CSP 报错，Importmap 可正常加载依赖，Hotwire 的 Turbo、Stimulus 功能也能正常运行。

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