引言
在当今的 Web 攻防领域,前端 JavaScript(JS)代码审计正变得越来越关键。随着 Web 应用越来越依赖于单页应用(SPA)和 API 驱动架构,许多后端接口通过前端 JS 代码暴露出来。这些接口如果缺乏 proper 授权检查,就可能成为攻击者的入口点。除了常见的未授权上传(upload)和下载(download)端点,其他隐患接口包括用户数据访问(如 /api/user/data,可能导致数据泄露)、管理面板(如 /api/admin/settings,导致权限提升)、删除或更新操作(如 /api/delete/item 或 /api/update/profile,导致数据破坏或篡改)、重置功能(如 /api/reset/password,导致账户接管),以及资源枚举端点(如 /api/list/users,导致敏感信息暴露)。这些漏洞往往源于 OWASP API Top 10 中的问题,如 Broken Object Level Authorization (BOLA)、Broken Function Level Authorization (BFLA)、Excessive Data Exposure 等。根据 OWASP 和其他安全研究,JS 代码中隐藏的 API 端点是常见漏洞来源,这不仅影响数据完整性,还可能导致更严重的入侵如横向移动或数据泄露。
本文将从零基础开始,逐步描述JS 代码审计的过程,并深入探讨进阶技巧。重点放在代码审计模块,我们会详细剖析如何识别未授权接口,同时结合真实案例和最佳实践。除了纯代码审计,我们还将讨论辅助工具如浏览器插件(例如 FindSomething(熊猫头),用于快速提取 JS 中的端点和敏感信息),以及拿到一个 Web 测试站点时如何快速定位漏洞点。注意:所有讨论均以教育和防御为目的,旨在提升 Web 应用的安全性。
一、JS 代码审计前置知识
什么是 JS 代码审计?
JS 代码审计是一种静态或动态分析前端代码的过程,旨在发现潜在的安全弱点,特别是那些暴露未授权 API 的地方。在 Web 应用中,前端 JS 往往负责与后端 API 交互,如发送 AJAX 请求或使用 Fetch API。这些交互如果没有严格的授权(如 JWT、OAuth 或服务器端验证),就可能被滥用。
Web 应用(如 React、Vue 或 Angular 构建的)将大量逻辑移到前端,这意味着攻击者可以通过浏览器开发者工具或反向工程 JS 文件,找到隐藏端点。例如,一个未授权的 /api/upload 端点可能允许任意文件上传,导致 shell 注入或存储型 XSS。 同样,/api/download 端点如果不验证用户权限,可能泄露敏感文件。其他隐患接口如 /api/user/profile(Excessive Data Exposure,导致返回过多敏感数据)、/api/delete/record(BFLA,导致未授权删除)、/api/admin/list(BOLA,导致对象级访问越权)等,也常见于 JS 暴露的 API 调用中。
与传统审计的区别:不同于服务器端代码审计(如 PHP 或 Java),JS 审计更注重客户端行为,包括 DOM 操作、事件监听和网络请求。攻击者无需访问源代码,只需从浏览器加载的 JS 中提取信息。
常用工具和环境
一些基本工具来辅助审计,除了代码审计工具,还包括浏览器插件用于快速提取信息:
| 工具名称 | 描述 | 用途示例 |
|---|---|---|
| Browser DevTools (Chrome/Firefox) | 内置浏览器工具 | 查看网络请求、调试 JS、提取端点 |
| Burp Suite | 代理工具 | 拦截和修改 API 请求,测试未授权访问 |
| ESLint 或 SonarQube | 静态分析工具 | 扫描 JS 代码中的潜在漏洞,如硬编码凭证或不安全 API 调用 |
| JSBeautifier 或 UglifyJS | 代码美化/反混淆 | 处理压缩或混淆的 JS 文件,使其可读 |
| Postman 或 Insomnia | API 测试工具 | 手动测试提取到的端点是否需要授权 |
| FindSomething (Chrome/Firefox 插件) | 浏览器扩展,用于从网页源代码或 JS 中提取端点、隐藏参数和敏感信息 | 快速扫描页面 JS,列出潜在 API 路径和密钥 |
| Extractify (Chrome 扩展) | 提取 JS 文件及其关联端点 | 自动化收集站点所有 JS 中的 API 调用 |
| Retire.js (浏览器扩展) | 检测漏洞 JS 库 | 快速检查站点使用的第三方 JS 是否有已知 CVE |
设置环境:安装 Node.js 以运行本地 JS 测试,克隆目标应用的 JS 文件(从浏览器来源或 CDN 下载)。浏览器插件如 FindSomething 可以一键扫描当前页面,提取所有 JS 中的 URL、API 端点和潜在敏感字符串(如密钥模式),大大加速初步 侦察。
如何快速定位漏洞点
当你拿到一个新的 Web 测试站点时,不要直接跳入深度代码审计。先采用快速侦察和扫描方法定位潜在漏洞点。
初步侦察:使用浏览器访问站点,打开 DevTools 的 Network 标签,执行常见操作(如登录、导航页面),记录所有加载的 JS 文件和 API 请求。安装 FindSomething 或 Extractify 插件,一键提取页面中所有 JS 的端点列表,包括隐藏的 /api/* 路径。
自动化扫描:使用 Retire.js 插件检查第三方 JS 库是否有已知漏洞(如过时 jQuery)。运行 npm audit 如果有 Node.js 依赖,或使用 Snyk 在线扫描上传的 JS 文件,快速标识依赖漏洞。
代理拦截:配置 Burp Suite 作为浏览器代理,捕获所有请求。修改参数测试常见 OWASP Top 10 漏洞,如 IDOR(Insecure Direct Object References)在 /api/getUser?id=xxx 中。
关键词 fuzzing:使用 Postman 或 Burp Intruder,基于提取的端点列表 fuzz 常见路径(如 /api/admin, /api/delete),检查响应码(200 vs 401/403)。
手动验证:优先测试高危端点,如上传/下载、用户数据访问。移除授权头,观察是否仍可访问。
整合 OWASP 指南:交叉参考 OWASP Top 10,聚焦于 JS 暴露的 API,如 Injection(在查询参数中测试 SQLi/XSS)或 Misconfiguration(检查 CORS 设置)。
通过这些步骤,你能快速缩小范围,定位高危点,然后深入审计。例如,在一个电商站点,插件可能快速列出 /api/cart/update 未授权,导致价格篡改。
基础步骤:0 到 1 的审计流程
收集 JS 文件:使用浏览器访问目标站点,检查 Network 标签下加载的 JS 文件。下载它们(右键保存)。对于 SPA,关注 bundle.js 或 main.js,这些往往包含 API 逻辑。 使用 FindSomething 插件补充提取隐藏端点。
美化和初步扫描:使用 JSBeautifier 展开代码。搜索关键词如 "fetch(", "axios.", "XMLHttpRequest", "upload", "download", "user", "admin", "delete", "update", "reset" 以定位潜在端点,包括其他隐患如 /api/list 或 /api/export。
识别端点:列出所有 URL 路径,例如:
/api/uploadFile– 检查是否验证 token 或 userID。/api/downloadReport– 验证是否允许匿名访问。/api/user/profile– 检查是否暴露过多数据(Excessive Data Exposure)。/api/delete/item– 验证函数级授权(BFLA)。
测试授权:使用代理工具拦截请求,移除授权头(如 Authorization: Bearer xxx),观察响应。如果仍成功,即为未授权漏洞。
报告和修复建议:记录漏洞,建议添加服务器端验证,如 RBAC(角色基于访问控制)或 OPA(Open Policy Agent)。
通过这些步骤,你能快速从零上手一个简单的审计。
二、寻找未授权接口的核心技巧
本文的重点部分。我将详细描述 JS 代码审计的各个方面,从静态分析到动态追踪,结合常见模式和漏洞示例
静态分析:
静态分析是指不运行代码的情况下审查源文件。这是审计的起点,重点寻找暴露的 API 和授权缺失。
关键词搜索和模式匹配:
搜索网络请求相关函数:
fetch,axios.post,$.ajax等。如下:fetch('/api/upload', { method: 'POST', body: formData }).then(response => { /* handle */ });这里,检查是否有 headers: { Authorization: ... }。如果缺失,可能存在未授权。
针对 upload/download 及其他:搜索 "FormData", "Blob", "file", "multipart/form-data", "user", "admin", "delete", "update"。例如,一个未授权 upload:
const uploadFile = (file) => { const data = new FormData(); data.append('file', file); axios.post('/upload/endpoint', data); // 无 token 检查 };类似地,download 可能使用
window.location.href = '/download?id=xxx';– 检查 id 是否可操纵。
对于其他隐患,如 BOLA 在用户数据端点:fetch(`/api/user/${userId}/data`); // 无验证 userId 是否属于当前用户,导致越权访问或 BFLA 在删除端点:
axios.delete('/api/item/' + itemId); // 无函数级授权检查,任何用户可删除任意项硬编码凭证:使用工具如 Snyk 扫描 API 密钥(如 AWS keys)嵌入代码中。 示例漏洞:
const apiKey = 'hardcoded-secret';用于调用外部服务,导致泄露。
变量追踪和依赖分析:
追踪变量:从端点定义处向上追踪,如一个常量
BASE_URL = '/api';然后fetch(BASE_URL + '/admin/settings');。使用 IDE 如 VS Code 的 "Find All References" 功能。依赖审查:检查第三方库(如 lodash 或 moment),确保无已知 CVE。
这里可以使用工具如 npm audit 或 Retire.js 可自动化此过程。
常见模式:条件分支中缺失授权,例如:
if (user.isAdmin) { fetch('/admin/download'); // 有检查 } else { fetch('/user/download'); // 无检查,潜在漏洞 }或 Mass Assignment 在更新端点:
axios.put('/api/profile/update', { username: 'new', email: '[email protected]', admin: true }); // 允许客户端设置 admin 字段,导致权限提升
混淆代码处理:
一些网站的JS 经常被混淆(minified/obfuscated)。可以使用 反混淆 如 JavaScript Obfuscator 的逆向工具。步骤:粘贴混淆代码。
恢复变量名和结构。
重新搜索端点。
混淆后代码如var a=function(b){fetch("/upload/"+b)},恢复后清晰显示未授权调用。
自动化静态工具集成:
SonarQube:配置规则集,扫描 JS 漏洞如 "JavaScript: Insecure direct object references"。
ESLint with security plugins:添加 eslint-plugin-security,检测不安全 eval() 或 innerHTML 使用,可能间接导致 API 滥用。
动态分析:
静态分析后,转入动态:运行代码观察行为。
浏览器调试:
设置断点:在 DevTools 的 Sources 标签,断点于 fetch 调用。步进执行,检查参数和响应。
网络监控:过滤 XHR/Fetch 请求,识别所有端点。测试修改请求头,模拟未授权访问。
代理和 fuzzing:
使用 Burp Suite 的 Intruder 模块,fuzz 端点参数(如 id 在 /download?id=)。词表包括常见路径如 "upload", "file", "admin", "delete", "user"。
发现 /api/upload 无需 token,返回 200 OK,即存在漏洞。
漏洞详解:
未授权 Upload:
// 一些常见的社交应用JS中 function handleUpload(event) { const file = event.target.files[0]; const formData = new FormData(); formData.append('media', file); fetch('/api/media/upload', { method: 'POST', body: formData }); // 无 auth,允许任意上传 }攻击者可上传恶意文件,导致 RCE。
未授权 Download:
// 在常见报告系统JS中 const downloadLink = document.getElementById('download'); downloadLink.onclick = () => { window.location = `/api/reports/download?file=${encodeURIComponent(filename)}; // 无验证,允许任意文件下载 };其他常见问题:Excessive Data Exposure 在用户端点:
fetch('/api/user/list').then(res => res.json()).then(users => { // 返回所有用户数据,包括邮箱、密码哈希 displayUsers(users); // 无过滤,暴露过多信息 });或 Injection 在搜索端点:
const query = document.getElementById('search').value; fetch(`/api/search?query=${query}`); // 无转义,允许 SQL/XSS 注入硬编码 API 密钥导致第三方服务滥用,或 CORS 配置错误允许跨域访问隐藏端点。
审计中的常见陷阱和最佳实践
陷阱:忽略环境变量(如 process.env.API_URL),这些可能在构建时注入。始终检查 webpack.config 或 .env 文件。另一个陷阱是忽略插件提取的端点,导致遗漏隐藏 API。
实践:采用 checklist:OWASP Top 10 API 安全,重点 BOLA、BFLA、Injection 等。定期审计第三方 JS,并使用插件如 FindSomething 进行初步筛选。 防御侧:实现 CSP(Content Security Policy)限制 JS 执行。
三、进阶技巧
高级工具和自动化
Snyk 或 Veracode:集成 CI/CD,自动化扫描 JS 漏洞,包括依赖和代码模式。
自定义脚本:用 Node.js 写 crawler,解析 JS AST(Abstract Syntax Tree)提取所有 URL。库如 acorn 或 babel-parser。
AI 辅助:工具如 CodeQL 使用查询语言查找模式,如 "未授权 fetch 调用"。
进阶方法论
混合分析:结合静态和动态,使用 Frida 或 Puppeteer 钩子 JS 函数,实时修改行为。
规模化审计:对于大型应用,分模块审计(如 auth.js、file.js)。使用 graph 工具可视化调用链。
防御导向进阶:实施 Zero Trust:所有 API 假设未授权,强制服务器验证。定期渗透测试,包括插件辅助的快速扫描。
结语
JS代码审计是 Web 安全的核心技能,从基础收集到进阶自动化,能显著提升攻防能力。结合浏览器插件如 FindSomething 和快速定位方法,你能高效处理任何 Web 站点。除此之外,还有各类小程序等代码审计以及传输数据解密后再测试的技巧,会在后续测试过程中整理记录出来。
免责声明
1.一般免责声明:本文所提供的技术信息仅供参考,不构成任何专业建议。读者应根据自身情况谨慎使用且应遵守《中华人民共和国网络安全法》,作者及发布平台不对因使用本文信息而导致的任何直接或间接责任或损失负责。
2. 适用性声明:文中技术内容可能不适用于所有情况或系统,在实际应用前请充分测试和评估。若因使用不当造成的任何问题,相关方不承担责任。
3. 更新声明:技术发展迅速,文章内容可能存在滞后性。读者需自行判断信息的时效性,因依据过时内容产生的后果,作者及发布平台不承担责任。
已在FreeBuf发表 0 篇文章
本文为 独立观点,未经授权禁止转载。
如需授权、对文章有疑问或需删除稿件,请联系 FreeBuf
客服小蜜蜂(微信:freebee1024)



