Rails 6引入Segment Analytics JS的CSP配置问题咨询

报错核心原因 #

Rails 6默认生成的CSP规则带动态nonce校验，当script-src规则中存在nonce或hash值时，配置的'unsafe-inline'会被浏览器自动忽略，所有不带匹配nonce的内联脚本都会被拦截。

分步配置 #

1. 给Segment内联初始化脚本添加动态nonce #

Rails会为每个请求生成唯一的CSP校验nonce，直接在视图的内联script标签上输出该值即可，不需要修改其他全局CSP的nonce逻辑：

<!-- 把这段放到layout的head标签里，nonce属性必须加 -->
<script nonce="<%= request.content_security_policy_nonce %>">
  // 此处粘贴Segment官方提供的Analytics.js 2.0初始化内联脚本
  !function(){
    var analytics = window.analytics = window.analytics || [];
    // ... 省略官方初始化代码
    analytics.load('YOUR_SEGMENT_WRITE_KEY');
    analytics.page();
  }();
</script>

禁止硬编码固定nonce值，必须使用request.content_security_policy_nonce动态生成，否则校验会直接失效。

2. 修改CSP初始值配置 #

打开项目下的config/initializers/content_security_policy.rb，补充Segment相关域名的白名单规则，原有配置不需要删除：

Rails.application.config.content_security_policy do |policy|
  # 保留原有default_src等基础配置
  # script_src 补充Segment CDN域名，原有配置项保留
  policy.script_src :self, :https, 'https://cdn.segment.com'
  # connect_src 必须配置，用于拉取配置、上报埋点数据
  policy.connect_src :self, :https, 'https://cdn.segment.com', 'https://api.segment.io'
  # 以下配置适配Segment动态加载的集成插件资源，可按需收紧
  policy.img_src :self, :https, :data
  policy.font_src :self, :https, :data
  policy.style_src :self, :unsafe_inline, :https
end

配置说明 #

• 如果你已经在script-src中开启了'strict-dynamic'，不需要额外配置https://cdn.segment.com/analytics-next/bundles/*、https://cdn.segment.com/next-integrations/integrations/*这类通配路径：带合法nonce的初始内联脚本被信任后，它动态加载的所有JS资源都会被strict-dynamic规则自动放行。
• 不需要把Segment的WRITE_KEY写到CSP规则里，域名级别的放行已经满足加载要求。
• 如果后续开启Segment的第三方集成（如Google Analytics、Stripe等），控制台报对应域名的CSP错误时，再按需给对应域名加白名单即可，这部分不属于Segment核心库的配置要求。
• 不要尝试通过移除nonce、全局开启'unsafe-inline'的方式绕过校验，会大幅降低CSP的XSS防护能力。

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