直接引入第三方js极危险，因其一旦被劫持或篡改，可窃取dom数据、外发敏感信息、注入恶意脚本或绕过同源策略；必须叠加csp（白名单防火墙）、sri（哈希校验）和合理加载策略三重防护，缺一不可。
不能只靠 <script src></script> 就完事，必须叠加 CSP、SRI 和加载策略三重防护。
为什么直接引入第三方 JS 很危险
第三方脚本一旦被劫持或篡改（比如 CDN 被污染、中间人攻击），它就能：
— 读取页面中所有 DOM 数据（含表单、token、用户输入）
— 调用 fetch 或 XMLHttpRequest 外发敏感信息
— 动态插入恶意 <script></script> 或重写页面逻辑
— 甚至绕过同源策略执行跨域请求
这些行为在控制台里几乎不可见，但已在后台完成。
必须启用 Content-Security-Policy（CSP）
CSP 是浏览器强制执行的“白名单防火墙”，不配它，其他措施效果大打折扣。
关键配置项：
-
script-src 'self' https://cdn.jsdelivr.net https://unpkg.com;—— 只允许从指定域名加载脚本，禁止'unsafe-inline'和'unsafe-eval' -
default-src 'none';—— 默认禁止一切资源加载，再逐项放开（推荐） -
require-trusted-types-for 'script';—— 防止 DOM XSS（需配合 Trusted Types API 使用）
注意：Content-Security-Policy 必须通过 HTTP 响应头发送（不是 <meta>），否则部分指令（如 require-trusted-types-for）会被忽略。
必须添加 Subresource Integrity（SRI）校验
SRI 保证你引入的 JS 文件内容和发布时完全一致，哪怕 CDN 返回了被篡改的版本，浏览器也会拒绝执行。
使用方式：
- 获取第三方库的完整哈希值（例如从 jsDelivr 页面复制
integrity属性） - 在
<script></script>标签中同时声明src和integrity，且必须加crossorigin：
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js" integrity="sha384-..." crossorigin="anonymous"></script>
⚠️ 常见错误：
— 忘记 crossorigin：SRI 不生效
— 使用 crossorigin="use-credentials" 却没配 CORS 响应头：请求失败
— 哈希值过期未更新（Vue/React 等库小版本升级后哈希会变）
加载时机与执行隔离同样关键
即使脚本本身安全，加载方式不当也会放大风险：
— 不要用 async 加载依赖 DOM 的库（如 jQuery 插件），可能在 document 还没 ready 时就执行，导致报错或跳过初始化
— 推荐统一用 defer，确保 HTML 解析完成后再按序执行
— 更进一步：对非核心第三方脚本（如统计、广告），用 loading="lazy" + 动态 import() 按需加载，避免首屏阻塞和过早暴露攻击面
— 绝对不要在 <script></script> 标签内混写内联代码（如 <script src="a.js">init();</script>），浏览器会直接忽略内部内容
真正容易被忽略的是：CSP 和 SRI 必须同时启用才构成有效防线。只开一个，等于给攻击者留了明确的绕过路径。而且每次升级第三方库版本，都必须同步更新 integrity 值和 CSP 中的域名白名单——自动化检查（如 CI 中跑 sri-tool）比人工更可靠。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
