【高频考点精讲】前端CDN安全：如何验证资源完整性和防止供应链攻击

前端CDN安全：如何验证资源完整性和防止供应链攻击

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李，今天咱们聊聊一个容易被忽视但极其重要的前端安全问题——CDN资源的安全性问题。你可能觉得CDN就是加速用的，放个<script src="https://cdn.example.com/vue.js">就完事了？Too young！如果这个vue.js被篡改了，你的网站可能瞬间变成黑客的提款机。

为什么CDN资源可能不安全？

CDN（内容分发网络）的核心作用是加速资源加载，但它本质上是一个“第三方托管服务”。也就是说，你用的jquery.min.js、react.production.min.js这些文件，并不是直接从官网拉的，而是从CDN服务商那里拿的。这就带来了两个风险：

1. 资源被篡改：CDN服务器被黑，或者DNS劫持，导致你加载的vue.js其实是恶意代码。
2. 供应链攻击：上游库的作者故意或无意引入了恶意代码（比如著名的event-stream事件）。

所以，前端工程师必须学会两招：验证资源完整性和防范供应链攻击。

---

验证资源完整性：Subresource Integrity（SRI）

SRI是W3C的标准，简单说就是让浏览器检查CDN资源的哈希值，确保它和你预期的一致。如果文件被篡改，浏览器会拒绝执行。

代码示例