企业官网建设流程全解析

在做前端安全分析和 Web 应用合规测试时，很多朋友应该都遇到过这种场景：面对一段混淆严重的加密参数生成代码，从全局搜索到调用栈回溯，一个函数一个函数地跟，花了大半天才搞清楚某个参数到底是怎么生成的。这个过程极度依赖个人经验，而且大量重复劳动。最近 MCP 和 skills 在 AI 编程领域讨论度很高，两者的组合恰好能把这种繁琐的分析流程交给大模型去执行。

这篇文章围绕“AI 辅助逆向”这条主线展开，完整拆解 MCP 与 skills 的接入方式，并通过一个滑块验证码安全分析的案例，演示如何让大模型帮你完成代码定位、算法还原和报告输出。全文侧重点是安全研究、漏洞分析与防御加固，所有分析都必须基于你已获得授权的系统。如果你只是希望提升自己对前端加密机制的理解，这套工作流同样适用。

1. 背景与核心概念

1.1 从“人工逆向”到“AI 辅助逆向”

传统的前端逆向流程，大致是下面的链路：

1. 打开目标页面，使用开发者工具观察网络请求。
2. 在请求参数里找到疑似加密的字段。
3. 全局搜索该字段名，定位到 JavaScript 代码。
4. 在加密函数处下断点，观察参数的输入与输出。
5. 把压缩混淆后的代码逐步还原，梳理算法逻辑。
6. 用脚本模拟生成参数，验证结果。

这套流程有两个明显痛点：第一，混淆代码可读性差，人眼阅读效率很低；第二，每个站点的参数生成逻辑都不同，大量的“找函数、抠算法”工作无法复用。

AI 辅助逆向并不是简单地“把代码粘贴给 ChatGPT 问一问”，而是让大模型作为分析中枢，通过 MCP 调用浏览器、文件系统、命令执行等工具，再依据 skills 里预定义的步骤，自动完成从“打开页面”到“输出报告”的完整闭环。

1.2 MCP 是什么

MCP 的全称是 Model Context Protocol，即模型上下文协议，是一种开放协议，主要解决“大模型如何与外部工具、数据源标准化通信”的问题。

可以这样理解：大模型本身像一个只有大脑的专家，你问他问题他能回答，但他不能直接打开网页、读取你电脑上的文件、执行命令。MCP 相当于给这位专家接上了“手”和“眼”，让它真正具备操作外部环境的能力。

MCP 的架构中通常有三个角色：

• MCP Server：提供具体能力的服务端，比如浏览器控制、文件读取、Shell 命令执行、数据库查询等。
• MCP Client：负责连接大模型和 MCP Server 的客户端，负责转发工具调用请求。
• Tools、Resources、Prompts：MCP Server 对外暴露的三类能力，其中 Tools 是最常用的，也就是大模型可以主动发起的工具调用。

一个简单类比是：MCP Server 是“工具箱”，大模型是“工人”。工人不会自己变出工具，但他可以通过标准接口从工具箱里取用工具，干完活再放回去。

1.3 Skills 是什么

Skills 在不同产品里有不同叫法，比如 Claude Skills、Agent Skills、Codex Skills，本质上都是同一类东西：一份结构化的指令文档，用来告诉大模型“在某个特定任务上应该按照什么步骤执行”。

Skills 通常包含以下内容：

• 任务描述：这个 Skill 解决什么问题。
• 触发条件：什么情况下应该使用这个 Skill。
• 输入要求：任务开始前需要准备哪些信息。
• 执行步骤：从开始到结束的具体操作流程。
• 输出格式：最终结果应该以什么形式呈现。
• 约束条件：哪些操作不能做，哪些边界必须遵守。

Skills 的核心价值，是解决大模型“自由对话很强，但稳定执行特定流程很弱”的问题。同样是定位一个加密参数，你直接提问，模型可能给出五种不同风格的答案；但如果你给它一份写好的 Skill，它会严格按照步骤执行，每一步的输出也更加可控。

1.4 Agent Skill 与 MCP 的区别是什么

这是很多人一开始容易混淆的地方，我平时也经常被问到“MCP 和 skills 到底有什么区别”。两者定位完全不同：

简单总结：MCP 解决的是“能不能做到”，skills 解决的是“怎么做得更规范”。实际项目里两者经常配合使用，比如用 MCP 调用浏览器，用 skills 规定“打开页面后先执行什么、再分析什么、最后输出什么”。

1.5 为什么 AI 逆向最近特别火

AI 逆向热度上升，背后是几件事同时成熟了：

• 大模型对代码的理解能力越来越强，尤其是对 JavaScript 混淆代码的还原能力已经相当可观。
• MCP 生态快速发展，Playwright MCP、自定义 MCP Server 等工具让大模型可以直接操控浏览器。
• Codex、Claude Code 等 Agent 形态的 CLI 工具快速普及，开发者可以在终端里直接和“会动手的 AI”对话。
• 前端安全测试领域有大量重复性代码定位工作，天然适合交给 Agent 来做。

所以说，AI 逆向不是玄学，而是工具链成熟之后的必然趋势。

2. 环境准备与版本说明

2.1 推荐工具链

由于每个人的开发环境和目标场景不同，下面给出的是一套常见环境的参考方案，版本需要根据你的项目实际情况调整。

• 操作系统：Windows 10/11、macOS 或 Linux 均可，文中的命令以 macOS/Linux 风格为主。
• 运行环境：Node.js 18+，Python 3.9+。
• Agent 客户端：Claude Code、Codex CLI、Cursor 或其他支持 MCP 的 Agent 工具。
• MCP Server：可以使用社区已有的 Playwright MCP，也可以按本文示例自己写一个 Node.js 或 Python MCP Server。
• 浏览器调试工具：Chrome DevTools，用于抓包分析和断点调试。
• 测试目标：强烈建议使用本地搭建的 Demo 站点，或明确获得对方授权的测试环境。

2.2 安装基础依赖

以 Python MCP SDK 为例，安装命令如下：

pip install mcp

如果你使用的是 Node.js 体系，也可以通过 npm 全局安装相关 SDK：

npm install -g @modelcontextprotocol/sdk

安装完成后，可以检查一下版本：

python -m mcp --version

需要提醒的是，MCP 是一个快速迭代的协议，不同版本的 SDK 在 API 细节上可能有差异。本文示例代码里的写法以当前主流版本为准，如果你用的是更新或更旧的版本，请对照官方文档做少量调整。

2.3 示例项目结构

为了让后面的实战更清晰，我先把整体目录结构列出来：

ai-reverse-lab/ ├── mcp-servers/ │ ├── analyze-mcp-server/ │ │ └── server.py │ └── browser-mcp-server/ ├── skills/ │ ├── analyze-js-function.md │ ├── trace-encrypt-param.md │ └── slider-captcha-review.md ├── config/ │ └── mcp-config.json └── scripts/ └── extract-params.py

这个结构里，mcp-servers放的是自己编写的 MCP Server，skills放的是给大模型使用的流程指令，config放 Agent 的 MCP 配置文件，scripts放一些辅助脚本。

3. 核心原理解析

3.1 大模型通过 MCP 调用工具的完整流程

先来看一个标准流程。当你在 Agent 客户端里输入一条指令，比如“打开示例页面，找到搜索接口的加密参数”，大模型并不是直接把结果吐给你，而是会经历多轮“思考-调用-观察”的循环：

1. 大模型分析用户指令，判断需要哪些工具。
2. Agent 通过 MCP Client 向 MCP Server 发起工具调用请求。
3. MCP Server 执行具体操作，比如打开浏览器、执行 JS、读取文件。
4. MCP Server 将操作结果返回给 Agent。
5. 大模型把结果合并进上下文，继续推理，决定下一步动作。
6. 重复循环，直到任务完成。

这个流程和人类开发者的工作方式很像：先看页面，再查请求，再定位代码，再还原逻辑。区别在于，大模型可以在一分钟内完成几十轮的“分析-操作”循环，效率远超人工。

3.2 最小可运行的 MCP Server 示例

为了让你真正理解 MCP Server 的原理，下面用一个 Python 示例实现一个最小 MCP Server，它对外暴露两个工具：读取本地文件、执行 Shell 命令并返回输出。

# 文件路径：mcp-servers/analyze-mcp-server/server.py import asyncio import subprocess import mcp.server.stdio import mcp.types as types from mcp.server import Server from mcp.server.models import InitializationOptions app = Server("analyze-mcp-server") @app.list_tools() async def list_tools() -> list[types.Tool]: return [ types.Tool( name="read_file", description="读取指定路径的文本文件内容", inputSchema={ "type": "object", "properties": { "path": {"type": "string", "description": "文件绝对路径"} }, "required": ["path"], }, ), types.Tool( name="run_command", description="在本地 Shell 中执行命令并返回标准输出", inputSchema={ "type": "object", "properties": { "command": {"type": "string", "description": "要执行的命令"} }, "required": ["command"], }, ), ] @app.call_tool() async def call_tool(name: str, arguments: dict) -> list[types.TextContent]: if name == "read_file": path = arguments.get("path", "") try: with open(path, "r", encoding="utf-8") as f: content = f.read() return [types.TextContent(type="text", text=content)] except Exception as e: return [types.TextContent(type="text", text=f"读取文件失败: {e}")] if name == "run_command": command = arguments.get("command", "") try: result = subprocess.check_output( command, shell=True, text=True, stderr=subprocess.STDOUT, timeout=30, ) return [types.TextContent(type="text", text=result)] except subprocess.TimeoutExpired: return [types.TextContent(type="text", text="命令执行超时，已终止")] except Exception as e: return [types.TextContent(type="text", text=f"命令执行失败: {e}")] return [types.TextContent(type="text", text=f"未找到工具: {name}")] async def main(): async with mcp.server.stdio.stdio_server() as (read_stream, write_stream): await app.run( read_stream, write_stream, InitializationOptions( server_name="analyze-mcp-server", server_version="0.1.0", ), ) if __name__ == "__main__": asyncio.run(main())

这段代码有三个关键部分：

• list_tools()：向客户端声明这个 Server 提供了哪些工具，以及每个工具的输入参数格式。大模型看到这些信息后，才知道什么时候该调用哪个工具。
• call_tool()：实际执行工具逻辑。入参是工具名和参数，返回值统一封装成TextContent列表。
• main()：启动 stdio 通信。MCP Server 通常通过标准输入输出与 Agent 客户端通信，所以不需要额外开 HTTP 端口。

需要特别说明的是，run_command工具在真实项目里必须加白名单和路径校验，不能把所有命令都暴露给大模型，否则风险很大。这一点我会在后面的最佳实践部分展开。

3.3 如何设计一份高质量的 Skills 文档

一份好的 skills 文档，应该让大模型“照着做就能稳定产出”。下面是一个用于定位前端加密参数的 skill 模板，你可以直接复制改成自己的版本：

# Skill: 定位前端加密参数生成逻辑 ## 触发条件 当用户需要分析页面某个请求参数的生成逻辑时使用。 ## 输入 - 目标页面 URL - 需要分析的请求参数名 - 相关的数据包信息（可选） ## 执行步骤 1. 使用 browser_mcp 打开目标页面 URL。 2. 在开发者工具中触发需要分析的请求。 3. 从网络面板复制该请求的全部参数。 4. 定位参数名对应的 JS 代码位置。 5. 读取加密函数及其调用链上下文。 6. 每读完一段代码，用中文总结其作用。 7. 输出完整分析报告。 ## 输出格式 - 参数名 - 加密函数位置 - 算法流程说明 - 可能的加固建议 ## 约束条件 - 不执行任何未授权操作。 - 不改动线上业务数据。 - 只做分析，不做绕过利用。

这个模板里的“执行步骤”是最核心的部分。它把模糊的任务拆成了 7 个明确的子步骤，大模型按步骤执行，每一步都有产出，最终结果自然可控。

4. 完整实战：搭建 AI 逆向辅助工作流

4.1 创建项目结构

先在你的工作目录里创建项目：

mkdir -p ai-reverse-lab/{mcp-servers,skills,config,scripts} cd ai-reverse-lab

如果你想在 MCP Server 代码里引用外部依赖，也可以为analyze-mcp-server单独创建一个虚拟环境或 package.json，这里不再赘述。

4.2 编写 MCP 配置文件

不同的 Agent 客户端对 MCP 的配置方式不一样，但核心内容是一致的：告诉客户端“有哪些 MCP Server、它们怎么启动”。

通用的配置格式如下：

{ "mcpServers": { "analyze-mcp-server": { "command": "python", "args": ["mcp-servers/analyze-mcp-server/server.py"], "env": {} }, "playwright-mcp-server": { "command": "npx", "args": ["@playwright/mcp@latest"], "env": {} } } }

这里有两个 Server：

• analyze-mcp-server：我们刚刚手写的 Python MCP Server，负责文件读取和命令执行。
• playwright-mcp-server：社区提供的浏览器自动化 MCP，负责打开页面、点击元素、读取网络请求。

如果你的 Agent 客户端是 Claude Code，可以把这段配置合并到项目配置里；如果是 Codex CLI，则需要按照对应的配置文件格式进行调整。如果配置后工具没有被识别，通常需要重启 Agent 进程。

4.3 编写核心 MCP Server 代码

在上一节已经给出了完整代码，这里补充两个工程上更实用的增强点：

第一，给run_command加白名单。假设你只允许大模型执行curl、node和python命令：

ALLOWED_PREFIXES = ("curl ", "node ", "python ", "python3 ") if name == "run_command": command = arguments.get("command", "") if not command.startswith(ALLOWED_PREFIXES): return [types.TextContent(type="text", text="该命令不在白名单中，已拒绝执行")]

第二，文件读取时限制目录范围，防止目录穿越：

import os ALLOWED_ROOT = "/path/to/allowed/workspace" if name == "read_file": path = arguments.get("path", "") real_path = os.path.realpath(path) if not real_path.startswith(os.path.realpath(ALLOWED_ROOT)): return [types.TextContent(type="text", text="路径超出允许范围，已拒绝读取")]

这些限制在实际工程里非常重要。因为大模型生成命令时是不可控的，你必须在工具层就做好边界控制。

4.4 在大模型 Agent 中注册 Skills

Skills 的注册方式和产品相关。以 Claude Code 为例，通常做法是把 skill 文件放入项目的.claude/skills/目录；以 Codex 为例，则根据官方文档把 skills 文件放在指定目录中。

不管哪种方式，你都需要让 Agent 能读取到 skills 文件的内容。这里有一个通用方法：直接在 Agent 的系统提示词或项目规则里引用 skills 目录，比如在项目规则文件中写：

当需要分析页面加密参数时，请严格遵循 skills/slider-captcha-review.md 中的步骤执行。

这样写的好处是，大模型在任何对话中只要遇到相关任务，就会自动读取对应 skill 文件，按里面的步骤执行。

4.5 运行与验证

启动手写的 MCP Server：

python mcp-servers/analyze-mcp-server/server.py

用 MCP Inspector 或者其他调试工具连接，确认list_tools返回了read_file和run_command两个工具。

然后在 Agent 客户端里发起一条测试指令：

请调用 analyze-mcp-server 的 read_file 工具，读取 config/mcp-config.json 的内容。

如果 Agent 的返回结果里包含了配置文件内容，说明 MCP 链路已经通了。接下来就可以让它结合 browser_mcp 做更复杂的分析任务。

5. 典型案例：滑块验证码安全分析流程

5.1 滑块验证码的组成与防护思路

滑块验证码的常见实现，包括云片滑块这类商业方案，通常由四个部分组成：

• 前端 SDK：在页面中加载，负责渲染滑块区域。
• 交互层：监听鼠标拖拽行为，采集轨迹数据。
• 请求层：提交轨迹、坐标、时间戳等参数，并附带加密指纹。
• 校验层：服务端根据轨迹相似度、坐标偏差、时间间隔、参数完整性来判断是真人还是机器。

从安全研究角度看，分析滑块验证码的目标不是绕过它，而是搞清楚它的参数采集与校验机制，帮助系统找出可以被伪造和绕过的薄弱点。这也是所有安全测试工作的核心思路：先模拟攻击，找到漏洞，再修复加固。

5.2 AI 辅助分析的完整步骤

下面是一次基于授权测试环境的安全分析过程，整条流程都可以交给大模型 Agent 执行：

步骤 1：让 Agent 打开测试页面。

使用 browser_mcp 打开 http://localhost:8080/index.html

步骤 2：让 Agent 触发滑块事件并抓包。

在页面上找到滑块元素，按下鼠标并拖拽到终点，然后读取网络面板中所有请求，筛选出包含滑块参数的请求。

步骤 3：定位参数生成逻辑。

请求参数中有一个 enc 字段。请在页面源码里搜索 enc，找到它对应的生成函数，并读取该函数的上游调用代码。

步骤 4：让 Agent 分析加密函数。

请分析这段加密函数：它使用了什么算法？输入是什么？输出是什么？有没有容易被伪造的特征？

步骤 5：输出分析报告。

请按照 skills/slider-captcha-review.md 的格式输出报告，包括函数位置、算法还原、参数构成和加固建议。

整个过程里，大模型不只回答问题，还会主动调用浏览器、读取文件、分析代码。你只需要在关键节点补充授权信息，或者对模型的某些判断做二次确认。

5.3 分析报告中应该包含哪些内容

一份合规的安全分析报告，至少要包含以下模块：

有了这份报告，开发团队就能针对性地加固服务端校验，而不是只在前端做无意义的加密混淆。

5.4 注意：分析不等于利用

这里必须强调一条安全红线：在滑块验证码分析中，完整还原轨迹采集和加密逻辑后，确实可能写出模拟拖拽的脚本，但这属于“验证机制有效性”的测试手段。如果没有获得授权，编写、分发或使用这类绕过脚本是明确的违规行为。本文只讨论“如何通过分析发现问题并加固”，不提供任何绕过利用代码。

6. 常见问题与排查思路

在实际搭建 MCP + skills 工作流时，有几个高频问题，这里整理成一张排查表：

如果你遇到的问题不在表里，建议按下面顺序排查：

1. 先确认 MCP Server 本身能否独立运行。
2. 再确认 Agent 是否成功注册了这个 Server。
3. 然后在 Agent 里输入一个最简单的工具调用指令测试。
4. 最后才让 Agent 执行复杂任务，避免一开始就引入太多变量。

7. 最佳实践与工程建议

7.1 安全边界必须前置

使用这套工作流时，最重要的一条准则是：只分析你有权分析的系统。建议在你自己的本地 Demo 或者公司授权的测试环境里练习。既然你已经在动手搭建 AI 辅助逆向工作流，意味着你有能力影响真实系统的安全，那么把边界意识刻进流程里就显得格外重要。

7.2 MCP Server 设计规范

MCP Server 是对外暴露能力的入口，设计时建议遵循以下规范：

• 最小权限原则：只暴露当前任务真正需要的工具，不要一个 Server 实现所有功能。
• 命令白名单：凡是命令执行类工具，必须校验命令前缀或参数范围。
• 路径校验：文件读取、写入类工具，必须限制在指定工作目录内。
• 日志审计：记录每一次工具调用的时间、参数和返回值，方便事后追溯。
• 超时控制：对所有外部调用设超时，避免 Agent 无限等待。
• 输入限制：对传入参数做类型和长度检查，防止异常数据导致崩溃。

7.3 Skills 编写规范

Skills 是让大模型稳定输出的关键，编写时要注意：

• 一个 Skill 只解决一个问题，不要贪多。
• 描述要具体，避免“分析一下”“看一看”这类模糊指令。
• 每一步都要有明确的输入和输出。
• 加入错误处理分支，比如“如果找不到参数，应该怎么继续”。
• 明确安全约束，防止大模型在自由发挥时越界。

7.4 大模型输出必须人工复核

大模型虽然有很强的代码理解能力，但它仍然可能“一本正经地胡说八道”。在安全分析场景里，这个问题更危险：如果你完全信任大模型给出的算法还原结论，可能会把错误的判断写进报告，影响后续加固决策。所以，每次大模型输出关键结论后，建议你至少做一次人工复核：打开对应代码，确认函数名、调用关系和算法逻辑是否与报告一致。

7.5 生产环境注意事项

如果你计划把这套工作流接入团队内部的测试流程，下面几件事要提前规划：

• MCP Server 的部署位置要和生产环境隔离，避免误操作污染线上数据。
• 所有命令执行类工具要限制在隔离容器或虚拟机构建。
• 大模型的 API 调用成本要做预算，因为复杂的分析任务可能触发几十上百次工具调用。
• 定期更新 MCP SDK 和浏览器自动化组件，避免版本过旧导致兼容问题。

8. 总结与学习路线

这篇文章从概念到实战，完整介绍了如何用 MCP 和 skills 搭建一条 AI 辅助逆向的工作流。你现在应该能理解 MCP 与 skills 的定位差异，能自己写一个最小 MCP Server，也知道如何让大模型按照 skill 文档执行多步骤分析任务。

如果你打算继续深入，可以参考下面的学习路线：

1. 先跑通一个最小 MCP Server，确认工具调用链路可用。
2. 阅读 MCP 官方文档中关于 Tools、Resources、Prompts 的详细说明。
3. 自己动手写一个简单 skill，比如“分析 JS 函数调用关系”，放到 Agent 里测试效果。
4. 在本地 Demo 站点上练习滑块机制分析，重点理解轨迹采集与校验逻辑。
5. 阅读优秀开源项目的 skill 设计，学习别人如何拆分任务、定义输出格式。
6. 在授权环境中做一次完整的前端安全测试，输出合规报告。

整个 AI 辅助逆向的生态还在快速发展，Claude Code 的 skills 官方文档、各类 MCP Server 社区项目几乎每周都有更新。建议你在实践过程中保持关注官方文档，不要依赖某篇文章里的固定写法。工具会变，但“让大模型具备工具使用能力”的思路不会过时。

如果你在搭建过程中遇到工具注册失败、MCP Server 启动异常、大模型不按 skill 执行这类问题，欢迎按本文第六章的排查表先自查一遍。很多问题其实都是配置文件路径、版本兼容和 Agent 未重启造成的，不需要太焦虑。