Sinatra应用中内联脚本CSP Nonce不生效问题排查

核心排查与修复步骤 #

• 严格匹配Nonce值
  硬编码测试时，必须保证CSP响应头里的nonce-xxx和所有内联<script>标签的nonce属性值完全一致，注意大小写、空格、特殊字符都不能有差异，比如nonce-abc123和nonce- abc123会被浏览器判定为不匹配。
• 正确设置Sinatra的CSP响应头
  在路由中明确指定Content-Security-Policy，确保script-src指令只包含你的nonce：

  get '/' do
    nonce = 'test-nonce-12345' # 硬编码排查用
    headers['Content-Security-Policy'] = "script-src 'nonce-#{nonce}';"
    haml :index, locals: { nonce: nonce }
  end
  

• HAML模板中正确绑定Nonce
  不要直接在HAML里写死nonce字符串，通过locals变量传递，确保和头里的值完全同步：

  %script{ nonce: nonce }
    $('#save-btn').on('click', function(e) {
      e.preventDefault();
      // AJAX提交逻辑
    });
  

  如果你用了HAML的:javascript过滤器，要确认它生成的<script>标签是否自动带上nonce，建议直接用%script标签手动指定属性，避免过滤器的默认行为导致nonce丢失。
• 查看浏览器报错细节
  打开开发者工具的Console，看具体拦截提示：
  • 若提示nonce mismatch，直接核对头和标签的nonce值
  • 若提示其他指令问题，比如涉及eval，但项目限制不能加unsafe-eval的话，要修改JS代码避免使用eval相关逻辑
• 动态生成Nonce（排查完成后替换硬编码）
  硬编码验证通过后，改用随机nonce保证安全性：

  require 'securerandom'
  
  get '/' do
    nonce = SecureRandom.base64(16)
    headers['Content-Security-Policy'] = "script-src 'nonce-#{nonce}';"
    haml :index, locals: { nonce: nonce }
  end
  

避坑提示 #

• 不要在script-src中同时写'unsafe-inline'和nonce，浏览器会优先忽略nonce，导致配置失效
• 布局文件中的所有内联脚本（包括第三方内联代码）都必须携带相同的nonce，外部脚本则需要在CSP中添加对应的域名
• 确保Sinatra没有其他中间件或插件覆盖了你的CSP响应头，比如某些安全插件可能会自动修改头内容

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