动态插入脚本必须严格遵循csp规范：需服务端提供唯一nonce并正确赋值script.nonce，配合domparser解析、白名单校验与domcontentloaded手动检测，否则将触发xss或静默失败。
动态插入脚本在 HTML 页面中几乎无法避免，但直接用 document.createElement('script') + appendChild 会绕过 CSP、触发 XSS、丢失执行时机控制——除非你明确知道怎么补上 nonce、事件监听和内容校验，否则它就是个高危操作。
为什么 innerHTML = '<script>...</script>' 会被拦截或执行失败
现代浏览器在开启 CSP（如 script-src 'self'）时，默认禁止所有内联脚本。哪怕你用 innerHTML 插入带 <script></script> 的字符串，浏览器解析后生成的 script 元素既没有 nonce，也不在白名单里，直接被丢弃。更糟的是：如果服务端没配 Content-Security-Policy 头，这段脚本却可能被执行——形成“开发环境正常、生产环境静默失败”的典型陷阱。
常见错误现象：
-
innerHTML插入后脚本没运行，控制台无报错（其实是被 CSP 静默拦截） - 页面加载完成后再插入，
DOMContentLoaded已触发，脚本里依赖的 DOM 节点找不到 - 脚本中用了
document.write或修改document.body，导致后续渲染异常
用 document.createElement('script') 时必须配 nonce
如果你的 CSP 响应头包含 script-src 'self' 'nonce-abc123'，那所有动态创建的 script 标签都得带上匹配的 nonce 属性，否则不执行。
实操建议：
- 后端必须每次 HTTP 响应生成唯一、高熵的
nonce值，并注入到 HTML 模板中（例如作为全局变量或data-属性） - 前端取这个值时，不要硬编码，而是从 DOM 中读取：
const nonce = document.querySelector('meta[name="csp-nonce"]')?.getAttribute('content') - 创建 script 时显式赋值：
script.nonce = nonce；注意不是script.setAttribute('nonce', nonce)，后者在部分浏览器中不生效 - 若脚本是内联内容（
script.textContent = '...'），必须加nonce；若为外部链接（script.src = '...'），则无需nonce，但需确保域名在script-src白名单中
动态脚本如何正确响应 DOMContentLoaded
动态插入的脚本不会自动感知页面生命周期事件。即使你在 DOMContentLoaded 回调里创建并插入 script，脚本本身执行时 DOM 可能已就绪，也可能还没——取决于它是否异步加载、是否阻塞解析。
关键判断点：
- 用
script.async = false（仅对动态创建有效）可让它表现得像同步脚本，但只适用于外部脚本；内联脚本仍按插入顺序立即执行 - 若脚本逻辑强依赖 DOM 就绪，应在脚本内部手动检查：
if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init) } else { init() } - 避免在脚本里重复绑定
DOMContentLoaded，尤其当该脚本可能被多次插入时——推荐用once: true或加执行标记（if (window.__myScriptLoaded) return）
真正安全的插入流程：解析 → 过滤 → 注入 → 执行
直接拼接 HTML 字符串再塞进 innerHTML 是最危险路径。正确流程是分四步走，缺一不可：
- 用
DOMParser解析字符串：new DOMParser().parseFromString(htmlStr, 'text/html')，得到干净的 Document 对象，不执行任何脚本 - 遍历提取所有
script节点，逐个检查src是否在白名单、textContent是否含危险模式（如eval(、new Function(） - 对合法脚本创建新
script元素，设置nonce、type、src或textContent，然后 append 到document.head或目标容器 - 非内联脚本（
src方式）靠浏览器自然加载；内联脚本此时已具备执行资格，无需额外 dispatch 事件
容易被忽略的一点：nonce 值不能复用，也不能由前端生成——它必须来自服务端每次响应的唯一值。前端拼接 nonce 字符串（比如 'nonce-' + Math.random()）等于把 CSP 形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
