直接<script src>引入第三方JS默认就不安全，因未配CSP、未加integrity、未控加载时机时，浏览器无条件执行远程脚本，可能已被CDN劫持或篡改，且能窃取cookie、监听输入、外发数据。
为什么直接 <script src> 引入第三方 JS 是高危操作
不是“可能不安全”，而是“默认就不安全”。只要没配 Content-Security-Policy、没加 integrity、没控制加载时机，浏览器就会无条件执行远程脚本——哪怕它已被 CDN 劫持、被中间人替换、或作者自己悄悄埋了采集逻辑。这类脚本能读 document.cookie、监听键盘输入、调用 fetch() 外发数据，且在控制台里几乎不留痕迹。
script-src 白名单必须通过 HTTP 响应头设置
写在 <meta http-equiv="Content-Security-Policy"> 里是无效的：部分关键指令（如 require-trusted-types-for 'script'）会被忽略，report-uri 不生效，且无法覆盖重定向后的页面。
- 必须由后端在响应头中输出
Content-Security-Policy: script-src 'self' https://cdn.jsdelivr.net; default-src 'none'; - 禁止出现
'unsafe-inline'或'unsafe-eval'—— 它们会让整个 CSP 形同虚设 - 第三方域名要精确到协议+主机名+路径层级（例如
https://unpkg.com/react@18.2.0/比https://unpkg.com更安全） - 若需支持 nonce（如保留少量内联初始化代码），得同步在
<script nonce="abc123">中写入匹配值
integrity 和 crossorigin 必须同时存在且正确
SRI（Subresource Integrity）不是可选功能，是校验脚本内容是否被篡改的唯一可靠手段。但只写 integrity 不生效：
-
crossorigin="anonymous"是强制要求，否则浏览器跳过哈希比对 - 哈希值必须与 CDN 返回的实际文件完全一致；Vue/React 小版本升级后哈希会变，旧值必须更新
- 不要用
crossorigin="use-credentials"，除非服务端明确返回了Access-Control-Allow-Origin和Access-Control-Allow-Credentials - 示例正确写法：
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js" integrity="sha384-..." crossorigin="anonymous"></script>
加载时机错位会让安全措施失效
即使脚本本身干净，加载方式不当也会触发 DOM 访问错误、竞态失败，甚至暴露攻击面：
立即学习“前端免费学习笔记（深入）”；
- 避免对依赖 DOM 的库（如
jQuery插件、bootstrap.js）使用async—— 它可能在document还没 ready 时就执行 - 统一用
defer，确保 HTML 解析完成后再按顺序执行 - 非核心脚本（统计、广告、客服）优先用
loading="lazy"+ 动态import()按需加载，首屏不阻塞，也不提前暴露全局对象 - 禁用
document.write()和eval()，它们绕过 CSP 且无法被 SRI 保护
defer 被误写成 async。任一环节断裂，整套防护就退化为心理安慰。 
