如何在强Content-Security-Policy下100%安全加载动态JS/CSS？

问题分析 #

这个场景我之前帮团队排查过好几次，核心矛盾在于：通过AJAX动态加载的HTML里的<script>标签，会被浏览器判定为unsafe-inline script——哪怕你已经在CSP的script-src里配置了对应的域名，甚至用了同域绝对URL。这是因为浏览器默认认为这类“事后插入DOM”的脚本不属于页面初始加载时的可信资源链，直接触发CSP拦截。而你遇到的nonce间歇性失效，大概率是因为动态加载的login.php里的nonce和页面初始CSP头生成的nonce不匹配（CSP的nonce是和当前页面的初始响应绑定的，动态内容里的独立nonce不被认可）。

下面给你两个100%有效的解决方案，既不削弱CSP安全性，也不用预加载所有脚本：

方案一：用strict-dynamic构建可信脚本链（推荐，现代浏览器全支持） #

strict-dynamic是CSP里专门解决“可信脚本加载其他脚本”的指令，它的逻辑是：只要初始脚本是被CSP信任的（通过nonce/hash验证），那么由这个脚本加载的所有后续脚本都会被自动信任，无需再在script-src里指定域名。

具体实现步骤： #

1. 在index.php中生成一个随机nonce，绑定到初始脚本和CSP头：

<?php
// 生成安全的随机nonce（必须每次请求都不一样）
$nonce = base64_encode(random_bytes(16));
// 配置CSP：只信任带该nonce的初始脚本，加上strict-dynamic
Header("Content-Security-Policy: default-src 'none'; script-src 'nonce-$nonce' 'strict-dynamic'");
?>
<!-- 给初始可信脚本加上对应nonce -->
<script nonce="<?php echo $nonce; ?>" src="triggerLogin.js"></script>
<a href="login.php" class="loginLink">Login</a>
<div class="futureLoginPage"></div>

2. 不需要修改triggerLogin.js和login.php的原有代码——因为triggerLogin.js是被CSP信任的，它通过load()加载的login.php里的脚本会被strict-dynamic自动放行。

方案二：手动创建脚本标签注入（兼容旧浏览器） #

如果需要兼容不支持strict-dynamic的旧浏览器（比如IE11），可以绕过动态HTML里的<script>标签，改用已信任的脚本手动加载后续资源：

具体实现步骤： #

1. 修改triggerLogin.js，在加载完login.php后手动创建脚本标签插入DOM：

$('.loginLink').on('click', function(event) {
  $('.futureLoginPage').load('/login.php', function() {
    // 加载完登录页HTML后，手动加载验证脚本
    const verifyScript = document.createElement('script');
    verifyScript.src = 'https://example.com/loginFormVerify.js';
    document.querySelector('.futureLoginPage').appendChild(verifyScript);
  });
  event.stopPropagation();
  event.preventDefault();
  return false;
});

2. 移除login.php里的<script>标签：

<input type="text" class="user" placeholder="Username" />
<input type="text" class="pass" placeholder="Password" />
<input type="button" class="send" value="Send" />
<div class="authStatus"></div>

这种方式下，脚本是由已被CSP信任的triggerLogin.js主动加载的，浏览器会认可这个行为，不会判定为unsafe-inline。

关键注意事项 #

• 不要在使用strict-dynamic时同时混合'self'或具体域名，因为strict-dynamic会覆盖这些规则（仅保留初始nonce/hash的可信脚本）。
• 如果你必须兼容极旧浏览器，可在CSP里添加'unsafe-inline'作为降级，但这会削弱CSP安全性，优先推荐方案一。
• nonce必须是每次请求随机生成的静态值，不能复用，否则会失去nonce的安全意义。

内容的提问来源于stack exchange，提问作者Drake M.