⚙️
MultiTask — MCP Frontend
A compact, utility-first React SPA (Calculator, File Reader, Text Analyzer, Todo Manager) that communicates with an MCP-style backend.
🌐 Live Demo · ✨ Features · 📂 Project Structure · ⚡ Getting Started · 🔐 Analysis & Security
______________________________________________________________________
✨ 特性
- 🧮 计算器 --通过后端计算端点进行基本算术运算。
- 📄 文件读取器 --从服务器请求文件内容以供审查（请谨慎使用）。
- 🧾 文本分析器 --分析文本文件：行、单词、最常见的单词。
- ✅ 计划管理 --通过后端列出/添加/编辑/删除任务。
- ⚡ 使用Create React app+Axios的快速单页应用程序。
______________________________________________________________________
🛠 技术栈
- 前端： React（创建React应用程序）、React 19、Axios
- 造型： 自定义CSS（index.CSS/App.CSS）
- 构建/部署： CRA(
npm start,npm run build)，Vercel友好 - 后端（预期）： REST端点（请参见 *API终点* 在......下面
______________________________________________________________________
📂 项目结构
MultiTask/
├── public/
│ ├── index.html
│ ├── logo192.png
│ └── ...
├── src/
│ ├── components/
│ │ ├── Calculator.js
│ │ ├── FileReader.js
│ │ ├── TextAnalyzer.js
│ │ └── TodoManager.js
│ ├── api.js # axios instance + BASE\_URL
│ ├── App.js
│ ├── index.js
│ └── index.css
├── package.json
└── README.md
______________________________________________________________________
📡 API终点（观察/预期）
前端在配置的上调用这些端点 BASE_URL:GET /calculate?a=&b=&op=
- 退货 { result: number } 或 { error: string }.
GET /read_file?path=
- 退货 { content: "file contents..." } 或 { error: string }. - 警告： 如果服务器接受任意路径→ 文件泄露风险.
GET /analyze_text?path=
- 返回文本统计信息： { lines, words, characters, most_common_words }.
GET /todos
- 加 /todos POST/PUT/DELETE取决于后端。
______________________________________________________________________
⚡ 入门（开发人员）
使用Create React应用程序。建议使用节点16+。
# 1. Clone
git clone https://github.com/Harshsfd/Multitask-MCP-Server.git
cd your-repo
# 2. Install
npm install
# 3. Configure API base (recommended: use env)
# Option A: Quick edit (development)
# Edit src/api.js and set BASE_URL to your backend (default: https://mcp-server-qko7.onrender.com)
# Option B: Use an env variable (recommended)
# Create a .env file at project root with:
# REACT_APP_API_BASE_URL=https://your-backend.example.com
#
# Then either update src/api.js to use process.env.REACT_APP_API_BASE_URL (see snippet below)
# 4. Run locally
npm start
# Open http://localhost:3000建议更改 src/api.js （使用env-var）
将当前硬编码的BASE_URL替换为：
// src/api.js
import axios from "axios";
const BASE_URL = process.env.REACT_APP_API_BASE_URL || "https://mcp-server-qko7.onrender.com";
export const api = axios.create({ baseURL: BASE_URL });创建 .env.example:
# .env.example
REACT_APP_API_BASE_URL=https://your-backend.example.com重要：添加.env向.gitignore永远不要泄露秘密。
______________________________________________________________________
🚀 部署
- 对于 维塞尔：将代码推送到GitHub→ 将项目导入Vercel→ add
REACT_APP_API_BASE_URL在环境变量中→ 部署。 - 对于一般节点主机：使用构建
npm run build并服务build/文件夹。
______________________________________________________________________
🔍 深度分析和安全说明（可操作）
调查结果摘要
- 客户端代码 干净易读；小型实用程序作为单独的组件实现。
src/api.js目前使用a 硬编码后端URL --移动到env变量以获得灵活性和安全性。
- 重大风险：
FileReader组件帖子任意path价值到GET /read_file。如果服务器不清理/白名单允许的路径，这可能会导致：
- 目录遍历（例如。 ../../etc/passwd) - 泄露机密和系统文件 - 隐私泄露
安全与加固（优先级）
- 绝不允许任意文件系统读取。 后端必须执行：
- A. 白名单 允许的目录或文件ID，或 - 将客户端文件引用映射到内部安全路径（不接受原始路径）。
- 输入验证和净化 在所有端点上(
/read_file,/analyze_text,/calculate（所有端点）
- 身份验证和授权:
- 为敏感端点添加身份验证（读取文件，如果不是公开的，则编辑待办事项）。 - 速率限制端点，以防止暴力破解和数据提取。
- 跨域资源共享：限制
Access-Control-Allow-Origin到生产环境中的前端域。
- 记录和监控：记录可疑请求（例如。，
..在……里面path)并添加警报。
- 删除硬编码的后端URL 在客户端--使用
REACT_APP_API_BASE_URL如上所述的env-var。
- HTTPS&CSP：确保后端证书有效，并考虑CSP
index.html.
代码质量和开发人员改进
- 添加
.env.example,.gitignoreenv文件的规则。 - 添加一个小
README.dev.md使用后端合约（端点+预期的JSON形状）。 - 为添加GitHub操作CI
npm ci,npm run build，基本单元测试（Jest）。 - 为关键流添加端到端烟雾测试（Playwright）。
______________________________________________________________________
✅ 快速缓解补丁建议（现在要更改什么）
- 改变
src/api.js使用env-var （参见 *入门指南*). - 临时UI安全说明 --注释
File Reader并在生产中禁用它，直到后端硬化。示例UI通知FileReader.js:
// Short UI warning (add near input)
⚠️ This tool can read server files. Make sure the backend restricts allowed paths before using in production.
- 后端检查表 （如果你能控制它）：
- 实现路径规范化+禁止 .. 片段 - 只允许配置的基本目录：例如。， /var/app/files 并拒绝任何超出它的路径 - 读取终结点需要API密钥或会话
______________________________________________________________________
📌 最后注意事项和下一步
- 这个前端是 轻量化，生产就绪 一旦后端被验证/保护。
- 如果你愿意，我可以：
- 为生成一个小补丁PR（代码片段） src/api.js + .env.example +README更新。 - 为起草一个安全的后端处理程序模板 read_file （node/express）强制执行基本目录白名单。
______________________________________________________________________
Made with ❤️ by Harsh Bhardwaj