csp会静默拦截未配nonce的动态脚本，服务端须每次生成唯一高熵nonce并同步注入响应头与script标签，前端需用script.nonce=nonce而非setattribute。
动态创建<script>却没配nonce，CSP直接静默拦截</script>
只要你的服务端响应头里写了Content-Security-Policy: script-src 'self' 'nonce-abc123'，所有动态创建的<script></script>标签就必须带匹配的nonce属性，否则浏览器连执行都不执行，控制台也不报错——这是典型的“开发环境正常、生产环境失效”陷阱。
常见错误现象：document.createElement('script')后appendChild，脚本完全不运行；用innerHTML = '<script>...</script>'插入，同样被丢弃。
- 后端必须每次响应生成唯一、高熵的nonce值，并通过
<meta name="csp-nonce" content="...">注入HTML - 前端读取时用
document.querySelector('meta[name="csp-nonce"]')?.getAttribute('content')，别硬编码 - 赋值必须用
script.nonce = nonce，不是script.setAttribute('nonce', nonce)（后者在Chrome/Firefox中不生效） - 仅对外部脚本（
script.src）才需白名单域名；内联脚本（script.textContent）才必须配nonce
integrity + crossorigin缺一不可，否则SRI形同虚设
只写integrity但没加crossorigin，浏览器会跳过哈希校验——这不是“建议搭配”，而是强制要求。CDN返回的资源若带CORS头，crossorigin="anonymous"才能触发完整校验流程。
常见错误现象：脚本明明加载成功，但实际已被中间人篡改；Vue/React小版本升级后哈希失效，旧页面仍尝试加载已变更的内容。
-
crossorigin="use-credentials"仅在服务端明确返回Access-Control-Allow-Origin和Access-Control-Allow-Credentials时才可用 - 哈希值必须与CDN返回的原始文件字节完全一致，推荐用
curl -s https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js | shasum -a 384生成 - 路径要精确到版本号层级，比如
https://unpkg.com/react@18.2.0/比https://unpkg.com/更安全
defer比async更适合动态加载的外部脚本
对依赖DOM就绪的脚本（如jQuery插件、Bootstrap组件），async会导致竞态失败：它下载完立刻执行，不管document.readyState是否为complete；而defer能保证HTML解析完成后再按顺序执行，且对动态创建的script同样有效。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
常见错误现象：动态插入的统计脚本在DOMContentLoaded前执行，document.getElementById返回null；多个动态脚本执行顺序混乱，依赖关系断裂。
- 显式设置
script.defer = true，不要依赖默认行为 - 避免对非核心脚本（广告、客服）用
defer，优先用loading="lazy"+import()按需加载 - 如果脚本逻辑强依赖DOM，内部仍需手动检查：
if (document.readyState !== 'loading') { /* 执行 */ }
innerHTML插入<script>字符串是高危操作，几乎无法补救</script>
用element.innerHTML = '<script src="..."></script>'本质是让浏览器重新解析HTML片段，此时生成的<script></script>既无nonce、也无integrity、更不在CSP白名单里——等于主动绕过所有防护机制。
常见错误现象：页面渲染后突然弹窗、用户输入被监听、cookie被外发；控制台查不到明显报错，问题只在生产环境暴露。
- 绝对禁止将用户输入、第三方API返回的HTML片段直接塞进
innerHTML - 若必须插入HTML结构，先用
DOMParser解析，再遍历节点校验标签名和属性（如过滤onerror、javascript:等） - 更稳妥的做法是服务端渲染静态模块，或前端用
textContent显示纯文本、insertAdjacentHTML配合白名单校验
真实场景里，最易被忽略的是nonce的生命周期管理——它必须随每次HTTP响应动态生成，不能复用、不能缓存、不能前端自己拼接。一旦nonce泄露或重复，整个CSP防线就垮了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
