MCP演示客户端
一种故意易受攻击的基于web的客户端，用于连接到MCP（模型上下文协议）服务器进行安全测试和教育。
🚀 快速开始
先决条件
- Python 3.7+（用于web服务器）
- 现代网络浏览器
- 正在运行MCP服务器（例如，该死的易受攻击的MCP服务器）
运行客户端
# Start web server
python -m http.server 8080
# Open browser
open http://localhost:8080✅ 连接状态
工作中 -连接已成功建立
- ✅ SSE连接：事件源到
/sse端点工作 - ✅ 跨域资源共享：允许从本地主机进行浏览器连接：8080
- ✅ MCP协议：SSE运输上的正确MCP
- ✅ 没有错误：消除了400个错误，连接成功完成
🏗️ 建筑
客户端
- 运输：MCP通过服务器发送事件（SSE）
- 连接：事件源到服务器
/sse端点 - 协议：遵循浏览器环境的MCP规范
- 用户界面：实时连接状态和挑战选择
连接流程
- 用户选择挑战并输入服务器URL（例如。，
http://localhost:9001) - 客户端连接到
{serverUrl}/sse通过EventSource - 使用CORS标头建立SSE连接
- MCP传输自动处理初始化
- 状态显示“已连接”-已准备好进行漏洞测试
🔧 技术实现
SSE连接
// Connect to MCP server via SSE
this.eventSource = new EventSource(`${this.serverUrl}/sse`);
// Handle MCP messages
this.eventSource.onmessage = (event) => {
const message = JSON.parse(event.data);
this.handleMessage(message);
};MCP协议
// Let SSE transport handle MCP messages properly
async sendMessageViaSSE(message) {
console.log('Message queued for MCP SSE transport:', message);
// No HTTP POST needed - let the MCP transport do its job
return true;
}CORS要求
服务器必须包含CORS标头：
app.add_middleware(
CORSMiddleware,
allow_origins=["http://localhost:8080"],
allow_credentials=True,
allow_methods=["GET", "POST", "OPTIONS"],
allow_headers=["*"],
)🎯 支持的服务器
该死的易受攻击的MCP服务器
- 仓库:
/path/to/damn-vulnerable-MCP-server - 港口：9001-9010（10个挑战服务器）
- 挑战：简单（1-3），中等（4-7），困难（8-10）
- 码头工人:
docker run -d -p 9001-9010:9001-9010 dvmcp
连接示例
- 挑战1：
http://localhost:9001 - 挑战2：
http://localhost:9002 - 挑战10：
http://localhost:9010
🔒 安全功能（漏洞）
这个客户是 故意脆弱 出于教育目的：
客户端漏洞
- XSS：通过执行服务器提供的代码
eval() - 数据暴露：将敏感数据记录到控制台
- 存储：将凭据存储在本地存储中，不加密
- 军营食品店备用资金：请求时没有CSRF保护
- 输入验证：信任所有服务器响应
漏洞示例
// VULNERABILITY: Execute arbitrary code from server
if (message.params.code) {
eval(message.params.code); // EXTREMELY DANGEROUS
}
// VULNERABILITY: Log sensitive data
console.log('Loaded stored credentials:', data);
// VULNERABILITY: Expose browser fingerprint
generateBrowserFingerprint() {
return { /* detailed browser info */ };
}📊 连接故障排除
常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| CORS错误 | 服务器缺少CORS标头 | 向服务器添加CORS中间件 |
| 连接失败 | 服务器未运行 | 在指定端口上启动MCP服务器 |
| 400错误 | 协议不匹配 | 在SSE传输上使用正确的MCP |
| “连接”卡住 | 初始化超时 | 检查服务器SSE端点 |
调试信息
- 打开浏览器DevTools→ 详细日志控制台
- 检查“网络”选项卡是否有失败的请求
- 验证服务器是否正在运行：
curl http://localhost:9001/sse
🔧 发展
文件结构
mcp-demo-client/
├── index.html # Main UI
├── script.js # UI logic and event handling
├── mcp-client.js # MCP protocol implementation
├── proxy-server.js # CORS proxy (deprecated)
└── README.md # This file关键组件
- 易受攻击的MCPClient：主MCP客户端类
- SSE连接：基于EventSource的传输
- 消息处理：MCP协议消息处理
- UI集成：实时状态更新
⚠️ 安全警告
这个客户是 故意脆弱 并且仅应在受控环境中用于：
- 安全性研究
- 教育目的
- 漏洞演示
- 渗透测试培训
不要 在生产环境中使用。