PHP/Mustache中使用nonce仍遭CSP阻止脚本执行问题排查

核心问题分析与解决步骤 #

1. 动态执行模板脚本的正确方式（解决eval/new Function被拦截） #

你当前的执行逻辑存在关键问题：虽然模板里的<script>标签带了nonce，但你是提取脚本内容用eval或new Function执行——这种方式属于无授权的内联脚本执行，CSP不会认可原标签的nonce，自然会拦截。

正确做法是直接将带nonce的脚本标签重新插入DOM，让浏览器通过标准流程识别nonce并执行：

var scripts = document.getElementById(element).querySelectorAll("script");
for (var i = 0; i < scripts.length; i++) {
    const newScript = document.createElement('script');
    // 复制原标签的nonce属性
    newScript.nonce = scripts[i].nonce;
    // 处理外部脚本或内嵌脚本内容
    if (scripts[i].src) {
        newScript.src = scripts[i].src;
    } else {
        newScript.textContent = scripts[i].textContent;
    }
    // 插入DOM触发执行
    document.head.appendChild(newScript);
    // 移除模板中已处理的脚本标签（可选）
    scripts[i].remove();
}

2. 修复.htaccess的500错误 #

你在.htaccess中使用'nonce-%{ENV:CSP_NONCE}'，但Apache环境变量CSP_NONCE并未被PHP注入，导致Apache解析规则时出错。若要保留.htaccess配置，需在PHP生成nonce后添加一行：

apache_setenv('CSP_NONCE', $nonce);

不过更简单可靠的方式是沿用你第二种方案——直接用PHP设置CSP响应头，避免Apache环境变量的同步问题。

3. 解决onXXX内联事件被拦截 #

onchange="myfunction()"这类内联事件属性属于独立的内联脚本范畴，CSP的nonce仅授权<script>标签的执行，不覆盖内联事件属性。解决方式有两种：

• 推荐方案：替换所有内联事件为addEventListener绑定，比如将onchange="myfunction()"改为：

  document.getElementById('target-element-id').addEventListener('change', myfunction);
  

• 妥协方案（不推荐，降低安全性）：在CSP的script-src中添加'unsafe-inline'，或使用'unsafe-hashes'指定事件处理函数的哈希值（需要提前计算函数代码的SHA哈希）。

4. CSP配置验证要点 #

• 确认每次请求的nonce都是随机生成的（你当前用random_bytes(16)生成是正确的，禁止复用nonce）。
• 用浏览器开发者工具的「网络」面板检查响应头，确认Content-Security-Policy中的'nonce-xxx'和页面内<script>标签的nonce完全一致。
• 若不需要通过可信脚本加载其他脚本，可移除'strict-dynamic'，减少规则复杂度。

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