CSP strict-dynamic在Chrome与Firefox的兼容性及AJAX执行JS问题

核心问题 #

你遇到了Firefox下的CSP兼容问题：

1. 仅配置'self'时，AJAX返回的内联脚本被拒绝执行；
2. 配置'strict-dynamic'时，Firefox提示jQuery的integrity哈希不匹配，脚本加载失败，无法触发后续AJAX逻辑和预期的控制台输出。

问题原因与修复步骤 #

1. 修复nonce属性的语法问题 #

你的内联脚本标签中nonce=0006c7f26c未添加引号，Firefox对HTML属性语法要求更严格，可能导致nonce未被正确识别，破坏'strict-dynamic'的信任链。

修改代码：
将：

<script nonce=0006c7f26c>

改为：

<script nonce="0006c7f26c">

2. 验证jQuery的integrity哈希正确性 #

Firefox提示哈希不匹配，大概率是你使用的哈希值与实际jquery-3.3.1.min.js文件内容不匹配。请重新计算文件的sha384哈希：

• 打开终端执行命令：

  cat jquery-3.3.1.min.js | openssl dgst -sha384 -binary | base64
  

• 将计算得到的哈希值替换CSP header和script标签中的对应值，确保两者完全一致。

3. 处理AJAX返回的内联脚本执行问题 #

使用'strict-dynamic'时，Firefox需要确认动态插入的脚本来自可信上下文。当前通过$('#zz').html(response)插入HTML的方式，可能导致脚本无法被识别为可信资源。建议改为动态创建script元素插入：

修改AJAX的success回调：

success : function(response, statut)
{
    if(response)
    {
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = response;
        // 提取并执行脚本内容
        const scripts = tempDiv.querySelectorAll('script');
        scripts.forEach(script => {
            const newScript = document.createElement('script');
            newScript.textContent = script.textContent;
            document.body.appendChild(newScript);
        });
        // 插入文本内容到页面
        $('#zz').text(tempDiv.textContent.trim());
    }
}

4. 优化CSP配置 #

调整CSP指令顺序，确保Firefox能正确解析可信脚本规则：

header("Content-Security-Policy: script-src 'nonce-0006c7f26c' 'strict-dynamic' 'sha384-你的正确哈希值'; ", true);

将'nonce-xxx'放在'strict-dynamic'之前，部分浏览器对指令顺序有严格要求。

最终测试 #

完成修改后在Firefox中重新加载页面：

• jQuery可正常加载（无哈希不匹配错误）；
• 控制台输出yes；
• AJAX请求完成后，控制台输出javascript yes !!!!!!!!!!!。

内容的提问来源于stack exchange，提问作者David Charoux-Brieu