1. 项目概述为什么我们需要关注JavaScript文件端点在Web应用安全测试或前端逆向分析中我们经常会遇到一个场景面对一个功能复杂的单页应用SPA或一个传统的多页应用如何快速、准确地找出所有与后端交互的API接口即“端点”这些端点就像是应用与服务器对话的“电话号码”掌握了它们我们才能深入理解应用的数据流、业务逻辑并对其进行有效的安全评估。传统上我们依赖浏览器开发者工具的“网络”Network面板手动点击、触发功能来捕获请求。这种方法效率低下且不完整尤其是对于大量依赖用户交互才能触发的“惰性加载”接口或者隐藏在深层条件逻辑里的接口很容易遗漏。而现代Web应用其前端逻辑几乎全部由JavaScript驱动所有的API调用指令都“写”在了JS文件里。因此从静态的JavaScript文件中系统性地提取端点信息成为一种更主动、更全面的方法。简单来说JavaScript文件端点提取就是从应用加载的所有.js文件中通过静态分析或动态执行的方式找出所有可能用于发起网络请求如fetch、XMLHttpRequest、axios调用等的URL字符串。这不仅是安全测试人员白盒/黑盒的必备技能对于前端开发者进行依赖分析、架构梳理甚至对于学习大型开源项目的API设计都极具价值。今天我就结合自己多年的实战经验分享两种经过验证的高效方法一种是基于正则匹配的静态文本分析法快速直接另一种是更智能的抽象语法树AST解析法能精准处理复杂的字符串拼接和变量引用。最后我们还会深入探讨如何对这些提取到的端点进行初步的安全分析识别潜在的风险点。2. 核心思路与方案选型正则匹配 vs. AST解析面对一堆压缩过的、变量名混淆的JavaScript代码我们该如何下手核心思路是识别出“网络请求”的代码模式并从中提取出作为参数的URL。根据对代码的理解深度和工具的使用主要衍生出两种方案。2.1 方案一正则表达式匹配法这是最直观、门槛最低的方法。其核心思想是无论代码如何混淆最终发起HTTP请求的调用语句是相对固定的而URL通常以字符串字面量的形式出现在这些调用附近。我们通过编写一系列正则表达式去匹配这些模式。为什么选择它快速上手无需深入理解JavaScript语法只需要知道常见的请求库调用方式。轻量高效对于一次性或小规模的分析任务编写几行脚本就能运行依赖少。处理压缩代码压缩代码虽然去掉了空格和换行但函数名和字符串字面量通常保留正则依然可以匹配。它的局限性是什么准确度有限正则难以处理动态生成的URL。例如const url /api/ endpoint /list;正则很难完整提取出最终拼接好的URL。误报与漏报容易匹配到非API请求的字符串如HTML片段、日志信息也可能因为模式编写不全而漏掉一些不常见的请求库如umi-request、ky。无法理解上下文正则不知道变量定义和传递如果URL先被赋值给一个变量然后在十行之后才被使用正则很可能错过。适用场景快速侦察、对目标应用使用的技术栈比较明确、或只需提取简单静态URL的场景。2.2 方案二抽象语法树AST解析法这是一种“降维打击”的方法。AST将源代码转化为一棵结构化的树每个节点对应代码中的一种语法结构如变量声明、函数调用、字符串字面量。通过遍历这棵树我们可以精准地定位函数调用节点并分析其参数来源。为什么选择它高精度能够追踪变量处理字符串拼接、模板字符串等动态URL生成逻辑。强上下文感知可以分析出某个URL在哪个函数中、在什么条件下被调用有助于理解端点用途。可扩展性不仅可以提取URL还可以提取请求方法GET/POST、请求头、载荷数据等关联信息。它的挑战是什么复杂度高需要理解AST的基本概念和所选解析器如babel/parser、acorn的API。依赖混淆对抗能力弱如果代码经过严重的变量名混淆如a.b.c()虽然AST结构不变但语义分析会变得困难需要结合其他策略。性能开销解析大型JS文件或整个项目构建产物如app.[hash].js时会有一定的内存和CPU消耗。适用场景深度安全审计、架构分析、需要高精度和完整性的端点收集任务。实操心得在实际项目中我通常采用“混合策略”。先用正则法快速扫描全站JS文件建立一个初步的端点清单评估目标规模和复杂度。如果发现大量拼接URL或需要深度分析再对关键文件使用AST解析法进行重点突破。这样既能保证效率又能确保关键信息不遗漏。3. 方法一实战基于正则匹配的快速提取我们先从最简单实用的正则匹配法开始手把手实现一个脚本。3.1 设计匹配模式我们需要覆盖常见的JavaScript网络请求方式。以下是一些核心的正则模式示例Fetch API:// 匹配 fetch(‘url‘) 或 fetch(url) const fetchRegex /fetch\s*\(\s*[]([^]?)[]/g;XMLHttpRequest:// 匹配 .open(‘METHOD‘, ‘url‘) const xhrRegex /\.open\s*\(\s*[][^]?[]\s*,\s*[]([^]?)[]/g;Axios / 类似库:// 匹配 axios.get(‘url‘), axios({url: ‘...‘}) 等这是一个简化版 const axiosRegex /axios\.(?:get|post|put|delete|patch|request)\s*\(\s*[]([^]?)[]/g; // 匹配 axios({ url: ‘...‘ }) const axiosConfigRegex /axios\s*\(\s*\{[^}]*?url\s*:\s*[]([^]?)[]/g;jQuery Ajax:// 匹配 $.ajax({ url: ‘...‘ }) const jqueryAjaxRegex /\$\.ajax\s*\(\s*\{[^}]*?url\s*:\s*[]([^]?)[]/g;通用URL字符串模式兜底: 这是一个风险较高但可能捕获意外之喜的模式用于匹配看起来像API端点的字符串。// 匹配包含 /api/, /v1/, .json, .php 等特征的字符串且不在注释内需简单预处理 const genericUrlRegex /(?!\/\/.*)(?![])[](\/(?:api|v\d|graphql|rest)\/[\w\/\-\.\?\]?)[]/g;注意这个兜底正则非常容易误报它可能匹配到图片路径、CSS链接等。通常需要结合前置的注释过滤和后续的结果过滤来使用。3.2 编写提取脚本下面是一个使用Node.js实现的简单脚本它读取指定目录下的所有.js文件应用上述正则进行匹配并去重输出。const fs require(fs); const path require(path); // 定义正则表达式数组 const regexPatterns [ { name: fetch, regex: /fetch\s*\(\s*[]([^]?)[]/g }, { name: xhr, regex: /\.open\s*\(\s*[][^]?[]\s*,\s*[]([^]?)[]/g }, { name: axios_method, regex: /axios\.(?:get|post|put|delete|patch|request)\s*\(\s*[]([^]?)[]/g }, { name: axios_config, regex: /axios\s*\(\s*\{[^}]*?url\s*:\s*[]([^]?)[]/g }, // 谨慎使用通用匹配 // { name: generic_api, regex: /(?!\/\/.*)(?![])[](\/(?:api|v\d|graphql|rest)\/[\w\/\-\.\?\]?)[]/g } ]; // 简单的注释移除函数不完美用于基础清理 function removeComments(code) { return code .replace(/\/\/.*$/gm, ) // 移除单行注释 .replace(/\/\*[\s\S]*?\*\//g, ); // 移除多行注释 } function extractEndpointsFromFile(filePath) { const content fs.readFileSync(filePath, utf-8); const cleanedContent removeComments(content); const endpoints new Set(); regexPatterns.forEach(({ name, regex }) { let match; // 注意需要重置正则的 lastIndex 属性因为使用了 ‘g‘ 标志 regex.lastIndex 0; while ((match regex.exec(cleanedContent)) ! null) { // match[1] 是第一个捕获组即URL const url match[1].trim(); if (url !url.startsWith(data:) !url.startsWith(blob:)) { endpoints.add(${url} (via ${name})); } } }); return Array.from(endpoints); } function scanDirectory(dirPath) { const allEndpoints new Set(); function traverse(currentPath) { const items fs.readdirSync(currentPath); for (const item of items) { const fullPath path.join(currentPath, item); const stat fs.statSync(fullPath); if (stat.isDirectory()) { traverse(fullPath); } else if (stat.isFile() item.endsWith(.js)) { console.log(扫描文件: ${fullPath}); const fileEndpoints extractEndpointsFromFile(fullPath); fileEndpoints.forEach(ep allEndpoints.add(ep)); } } } traverse(dirPath); return Array.from(allEndpoints).sort(); } // 使用示例扫描当前目录下的‘js_files‘文件夹 const jsDir path.join(__dirname, js_files); if (fs.existsSync(jsDir)) { const results scanDirectory(jsDir); console.log(\n 提取到的端点列表 ); results.forEach(ep console.log(ep)); console.log(总计: ${results.length} 个端点); } else { console.error(目录 ${jsDir} 不存在); }3.3 关键注意事项与优化技巧处理代码压缩压缩后的代码通常在一行内上述正则大多仍然工作。但要注意压缩可能将字符串字面量拆分成多个部分极少见这种情况正则很难处理。过滤噪声脚本中简单过滤了data:和blob:协议。在实际使用中你还需要根据目标域名过滤掉明显的外部资源链接如https://cdn.example.com/或者通过一个“关键字白名单”如包含/api/,/v1/来聚焦目标。性能考虑对于超大型JS文件5MB一次性读入内存可能有问题。可以考虑流式读取或分块处理。正则的局限性这是本方法的天花板。如果遇到const baseUrl ‘/api‘; const fullUrl baseUrl ‘/users‘;正则无法将两者关联。此时就需要升级到AST方法。4. 方法二实战基于AST解析的精准提取当正则无法满足需求时我们就需要请出更强大的工具。这里我们使用Babel解析器来构建AST分析工具。4.1 环境搭建与核心库介绍首先初始化一个Node.js项目并安装必要依赖npm init -y npm install babel/parser babel/traverse babel/generatorbabel/parser将JavaScript源代码转换成AST。babel/traverse用于遍历AST节点并对其进行修改或收集信息。babel/generator将修改后的AST转换回代码本例中主要用于调试非必需。4.2 构建AST端点提取器我们的目标是找到所有函数调用节点CallExpression判断它是否是网络请求调用然后尝试解析它的第一个参数或配置对象中的url属性最终得到一个完整的URL字符串。const parser require(babel/parser); const traverse require(babel/traverse).default; const fs require(fs); const path require(path); // 一个简单的函数尝试从节点中提取字符串值 // 它能处理字符串字面量、模板字符串无表达式、标识符变量名 function extractStringValue(node, scopeVariables) { if (node.type StringLiteral) { return node.value; } if (node.type TemplateLiteral) { // 简化处理仅当所有表达式都为空即纯字符串模板时直接拼接 if (node.expressions.length 0) { return node.quasis.map(q q.value.cooked).join(); } // 对于有表达式的模板字符串我们可以尝试追踪这里返回null表示复杂情况 return null; } if (node.type Identifier scopeVariables) { // 尝试从我们收集的变量作用域中查找这个标识符的值 return scopeVariables[node.name] || null; } // 如果是二元运算符 ‘‘尝试递归解析左右两边 if (node.type BinaryExpression node.operator ) { const left extractStringValue(node.left, scopeVariables); const right extractStringValue(node.right, scopeVariables); if (left right) { return left right; } } return null; } function extractEndpointsWithAST(code, filePath) { const ast parser.parse(code, { sourceType: module, // 支持ES模块 plugins: [jsx, dynamicImport] // 支持JSX和动态导入 }); const endpoints new Set(); // 一个简陋的作用域变量存储key是变量名value是字符串值仅处理简单赋值 const scopeVariables {}; // 首先遍历一次收集所有简单的变量声明如 const url ‘/api‘; traverse(ast, { VariableDeclarator(path) { const { id, init } path.node; if (id.type Identifier init) { const value extractStringValue(init, scopeVariables); if (value typeof value string) { scopeVariables[id.name] value; } } } }); // 主要遍历寻找网络请求调用 traverse(ast, { CallExpression(path) { const callee path.node.callee; let urlNode null; let method UNKNOWN; // 1. 识别 fetch(‘url‘) if (callee.type Identifier callee.name fetch) { urlNode path.node.arguments[0]; method FETCH; } // 2. 识别 axios.get(‘url‘) 等形式 else if (callee.type MemberExpression) { const objectName callee.object.name; // e.g., ‘axios‘ const propertyName callee.property.name; // e.g., ‘get‘ if (objectName axios [get, post, put, delete, patch, request].includes(propertyName)) { urlNode path.node.arguments[0]; method AXIOS.${propertyName.toUpperCase()}; } // 3. 识别 xhr.open(‘GET‘, ‘url‘) else if (propertyName open path.node.arguments.length 2) { urlNode path.node.arguments[1]; method path.node.arguments[0]?.value || XHR; } } // 4. 识别 axios({ url: ‘...‘ }) 或 $.ajax({ url: ‘...‘ }) else if (callee.type Identifier [axios, $].includes(callee.name)) { const firstArg path.node.arguments[0]; if (firstArg?.type ObjectExpression) { const urlProperty firstArg.properties.find(prop prop.key?.name url || prop.key?.value url); if (urlProperty?.value) { urlNode urlProperty.value; method callee.name.toUpperCase() _CONFIG; } } } // 如果找到了潜在的URL节点尝试提取其字符串值 if (urlNode) { const urlString extractStringValue(urlNode, scopeVariables); if (urlString typeof urlString string) { // 基础过滤 if (!urlString.startsWith(data:) !urlString.startsWith(blob:)) { endpoints.add(${urlString} [${method}]); } } } } }); return Array.from(endpoints); } // 封装文件扫描函数 function scanWithAST(directory) { const allEndpoints new Set(); function walk(dir) { const files fs.readdirSync(dir); for (const file of files) { const fullPath path.join(dir, file); const stat fs.statSync(fullPath); if (stat.isDirectory()) { walk(fullPath); } else if (stat.isFile() /\.(js|jsx|ts|tsx)$/.test(file)) { try { console.log(AST分析: ${fullPath}); const code fs.readFileSync(fullPath, utf-8); const fileEndpoints extractEndpointsWithAST(code, fullPath); fileEndpoints.forEach(ep allEndpoints.add(ep)); } catch (error) { console.error(解析文件 ${fullPath} 时出错:, error.message); } } } } walk(directory); return Array.from(allEndpoints).sort(); } // 使用 const targetDir path.join(__dirname, src); // 假设扫描‘src‘目录 if (fs.existsSync(targetDir)) { const results scanWithAST(targetDir); console.log(\n AST提取端点结果 ); results.forEach(ep console.log(ep)); console.log(总计: ${results.length} 个端点); } else { console.log(目标目录 ${targetDir} 不存在请修改路径。); }4.3 AST方法的高级技巧与边界处理上面的示例是一个基础框架。在实际复杂项目中你需要考虑更多作用域链分析我们的scopeVariables实现非常简陋。一个变量可能在函数内部声明AST遍历器需要维护一个作用域栈。更健壮的做法是使用babel/traverse的scopeAPI来解析标识符的绑定binding。处理模板字符串和函数调用/api/${userId}/profile这样的URL需要解析TemplateLiteral节点并尝试计算userId表达式的可能值这非常困难通常只能得到/api/${}/profile这样的模式或者结合动态执行。识别更多请求库需要扩展CallExpression的判断逻辑加入对umi-request、ky、superagent甚至公司内部封装请求库的识别。提取更多元数据不仅仅是URL还可以尝试提取method、headers、data载荷甚至相邻的注释这些对安全分析至关重要。处理TypeScriptBabel解析器需要添加plugins: [typescript]来支持TS语法。踩坑实录我曾分析一个Vue项目发现大量API端点定义在src/api/index.js中以对象形式导出。单纯匹配函数调用找不到它们。后来调整策略先寻找export default { ... }或export const api { ... }这样的对象再遍历其属性值这些值往往是返回axios调用的函数最终成功提取。这说明AST分析需要根据项目结构灵活调整策略。5. 端点提取后的安全分析实战提取到端点列表只是第一步就像拿到了一本通讯录。安全分析是要从这本通讯录里找出“可疑分子”。以下是一些核心分析维度。5.1 敏感接口识别与分类将端点按照功能和安全敏感性进行初步分类可以优先关注高风险类别。分类特征关键词示例潜在风险身份认证/login,/oauth,/token,/auth,/register,/logout爆破、撞库、令牌泄露、逻辑缺陷用户数据/user,/profile,/account,/password,/email信息泄露、越权访问水平/垂直文件操作/upload,/download,/export,/import,/file任意文件上传、路径遍历、敏感文件下载管理功能/admin,/manage,/config,/system,/root未授权访问、特权操作数据查询/search,/query,/list,/get,/fetchSQL注入、NoSQL注入、信息泄露数据操作/create,/update,/delete,/modify,/submit数据篡改、权限绕过、CSRF操作方法编写一个简单的分类器用关键词匹配端点路径为其打上标签。5.2 参数分析与攻击面映射观察端点URL本身和其所在的代码上下文AST方法优势所在分析其参数。路径参数如/api/users/{id}。关注id是否为数字是否存在未经验证直接传入数据库查询的情况可能导致SQL注入或越权。查询参数从代码中寻找?后面的参数名如/api/search?qkeywordpage1。重点关注q搜索词、sort排序、filter过滤等这些是注入和逻辑漏洞的高发区。请求体参数通过AST分析fetch或axios调用时可以尝试定位body或data参数。查看是否发送了JSON或FormData参数名如username、password、role等。实操技巧将端点、参数名和可能的HTTP方法GET/POST等记录下来形成一个简单的“接口字典”。这将成为你后续手动测试或自动化模糊测试的绝佳输入。5.3 寻找低悬果实结合提取到的端点信息可以快速定位一些常见漏洞未授权访问直接访问标注为[ADMIN]的管理端点看是否返回数据。敏感信息泄露访问/api/config,/api/env,/api/debug等开发调试接口。过度的详细信息错误信息中是否包含堆栈跟踪、数据库错误如SQL语句片段。API版本遗留发现/api/v1/user和/api/v2/user同时存在旧版本可能缺乏新版本的安全加固。HTTP方法滥用尝试对只应接受GET请求的查询接口发送POST/PUT/DELETE请求。5.4 构建自动化分析流水线思路对于大型项目可以将上述步骤串联起来形成一个自动化分析脚本的雏形输入目标网站URL或本地JS文件目录。爬取/收集使用工具如gospider,hakrawler爬取站点收集所有JS文件链接并下载。提取运行我们编写的AST端点提取脚本输出结构化的端点列表JSON格式包含文件来源、URL、可能的方法、上下文代码片段。分析编写分析脚本对端点列表进行分类打标。参数提取。相似度去重避免/api/user/1和/api/user/2被重复计数。生成测试用例为每个端点生成基础的HTTP请求模板。输出生成一份HTML或Markdown报告高亮显示敏感接口并提供可直接导入到Burp Suite、Postman或自动化扫描工具的测试用例集。6. 常见问题与排查技巧实录在实际操作中你肯定会遇到各种问题。这里记录了几个典型场景和我的解决思路。6.1 问题一正则匹配结果太多“垃圾”URL现象提取结果里混入了大量静态资源路径/static/logo.png、Webpack模块标识符./src/moduleA或第三方SDK的CDN链接。解决方案后过滤编写更严格的正则或过滤函数。例如只保留包含特定路径片段如/api/,/graphql,/rest/的URL。function isLikelyApiEndpoint(url) { const apiPatterns [/^\/api\//, /^\/v\d\//, /^\/graphql/, /\.(json|php|asp|aspx|jsp)$/i]; return apiPatterns.some(pattern pattern.test(url)); }结合域名如果知道目标应用的主域名可以过滤掉非此域名及子域名的所有绝对URL。上下文判断在AST方法中可以通过判断调用函数的“父节点”是否在一个事件监听器、异步函数或特定的业务模块中来增加置信度。6.2 问题二AST解析时遇到奇怪的语法报错现象使用babel/parser解析某些JS文件时抛出SyntaxError。可能原因与处理实验性语法代码中使用了最新的、甚至提案阶段的JavaScript语法。解决在parser.parse的plugins选项中添加对应的插件如‘decorators-legacy‘,‘classProperties‘等。非JS内容文件可能是.vue或.svelte单文件组件或者包含了大量内联的模板语法。解决预处理文件只提取script标签内的内容或使用相应的Vue解析器如vue/compiler-sfc。代码严重损坏网络爬取的JS文件可能不完整或被篡改。解决记录错误并跳过该文件继续处理其他文件。6.3 问题三无法解析动态生成的端点现象URL由多个变量拼接而成且部分变量来自函数参数、API响应或环境变量静态分析无法得到最终值。思路模式化记录即使得不到具体值也可以记录下模式如/api/users/${userId}/posts/${postId}。这在安全测试中仍然有价值你可以手动或自动化地替换${userId}和${postId}进行测试。动态辅助分析结合轻量级动态执行。在一个隔离的沙箱环境如Node.js的vm模块中尝试执行部分代码来获取变量的值。警告这有安全风险绝不能用于分析不受信的代码仅适用于分析自己或完全信任的源代码。人工研判对于核心敏感功能直接定位到相关代码块进行人工审计理解其生成逻辑。6.4 问题四提取的端点有重复或变体太多现象/api/user,/api/user/,/api/user?id1,/api/user/被识别为不同端点。解决方案在最终输出前进行“规范化”和“去重”。规范化移除末尾的斜杠、将多个连续的斜杠合并为一个、对查询参数按参数名排序/api/user?b2a1和/api/user?a1b2应视为相同。基于路径模式去重将数字ID、哈希值等替换为占位符。例如将/api/user/123和/api/user/456统一归约为/api/user/{id}。这可以通过简单的正则如将/\d/g替换为{id}或更复杂的路由模式识别算法来实现。最后我想强调的是无论是正则还是AST都只是辅助我们更高效工作的工具。真正的安全分析能力建立在对Web应用架构、HTTP协议、常见漏洞模式的深刻理解之上。工具帮你发现了“可能有电话打往哪里”而你的知识则决定了“该如何测试这个电话是否安全”。这套方法我已经在数十个内部渗透测试和代码审计项目中应用它极大地提升了前期信息收集的效率和深度。希望它也能成为你工具箱里的一件利器。