前端安全中如何验证JavaScript代码的完整性？

使用Subresource Integrity（SRI）可确保外部JavaScript文件未被篡改，通过在script标签中添加integrity属性并提供资源的哈希值，浏览器会自动校验下载文件的完整性；配合Content Security Policy（CSP）能进一步增强防护，防止XSS和供应链攻击；内部脚本可通过构建流程生成哈希并运行时校验来提升安全性。

确保JavaScript代码在传输和执行过程中未被篡改，是前端安全的重要环节。验证JavaScript代码完整性主要通过内容安全策略与哈希校验机制实现，核心方法是使用Subresource Integrity（SRI）。

使用Subresource Integrity（SRI）校验外部脚本

当页面引入第三方托管的JavaScript文件（如CDN资源）时，攻击者可能在传输过程中替换或注入恶意代码。SRI允许浏览器验证下载的资源是否与开发者预期一致。

具体做法是在 script 或 link 标签中添加 integrity 属性，该属性值为资源内容的加密哈希。

<script src="https://cdn.example.com/jquery.min.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqiQ8uJ1bD2UqL2WZ5rV7MlHaT5P2jI" crossorigin="anonymous"></script>

浏览器会重新计算下载文件的哈希，并与integrity中的值比对，不匹配则拒绝执行。

立即学习“Java免费学习笔记（深入）”；

生成SRI哈希值

开发者需提前为每个外部资源生成符合标准的哈希字符串。常用方式是使用OpenSSL或在线工具生成base64编码的SHA-256、SHA-384或SHA-512哈希。

• 获取文件：curl -O https://cdn.example.com/app.js
• 生成哈希：openssl dgst -sha384 -binary app.js | openssl base64 -A

输出结果即为integrity属性所需的值，格式为 sha384-<base64字符串>。

知我AI·PC客户端

离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

0

查看详情

配合Content Security Policy（CSP）增强防护

SRI应与CSP策略结合使用。CSP可限制脚本来源，防止加载未授权资源，而SRI确保即使来自白名单的资源也未被篡改。

例如，在HTTP响应头中设置：

Content-Security-Policy: script-src 'self' https://cdn.example.com; require-trusted-types-for 'script';

这能有效防御XSS和供应链攻击。

内部脚本的完整性保护

对于内联或本地部署的JS文件，虽然无法直接使用SRI，但可通过以下方式提升安全性：

• 避免使用内联脚本，改用外部文件以便统一管控
• 构建流程中自动计算并记录关键JS文件的哈希，在运行时通过Ajax获取文件内容并校验哈希
• 结合Web应用防火墙（WAF）监控异常行为

基本上就这些。SRI是目前最直接有效的前端脚本完整性验证手段，尤其适用于依赖CDN或第三方库的项目。只要资源可公开访问且支持CORS，都应启用SRI。不复杂但容易忽略。

以上就是前端安全中如何验证JavaScript代码的完整性？的详细内容，更多请关注php中文网其它相关文章！