anuragsamota/prompt_injection_demo

# 提示词注入演示 一个交互式的 Web 演示项目，展示 LLM 应用中的提示词注入攻击和防御机制。该项目展示了各种提示词注入场景，并实现了检测和缓解此类攻击的安全机制。 ## 项目概述 本演示涵盖以下内容： - **直接提示词注入** - 直接攻击系统提示词 - **间接提示词注入** - 通过不可信内容注入 - **混淆注入** - 使用令牌走私和编码技术 - **防御机制** - 过滤器、验证和安全门控，以防止攻击 该项目提供了一个交互式 UI，可实时探索这些概念。 ## 技术栈 ### 前端 - **React** 19.2.4 - UI 框架 - **Vite** 8.0.0 - 构建工具和开发服务器，支持 HMR - **Tailwind CSS** 4.2.1 - 实用优先的 CSS 框架 - **daisyUI** 5.5.19 - 基于 Tailwind 的组件库 - **React Router** 7.13.1 - 客户端路由 - **React Markdown** 10.1.0 - 模型输出的 Markdown 渲染 - **Lucide React** 0.577.0 - 图标库 - **ESLint** 9.39.4 - 代码检查 - **React Compiler** - 已启用以提升性能 ### 后端 - **Python** 3.11+ - 运行时环境 - **Flask** 3.1.1 - Web 框架 - **Requests** 2.32.4 - Ollama 代理和流式客户端 - **python-dotenv** 1.1.1 - 环境配置 ## 项目结构 ``` prompt_injection_demo/ ├── backend/ # Python/Flask backend │ ├── app.py # Flask entry point │ └── requirements.txt # Backend dependencies │ └── frontend/ └── prompt_injection_demo_frontend/ # React/Vite frontend ├── src/ │ ├── main.jsx # App entry point │ ├── index.css # Global styles (Tailwind + daisyUI) │ ├── app/ │ │ └── AppRouter.jsx # Route definitions │ ├── components/ │ │ ├── chat/ # Chat UI components │ │ ├── sidebar/ # Navigation sidebar │ │ ├── ui/ # Icon components │ │ └── common/ # Shared components │ ├── pages/ # Page components │ ├── layout/ # Layout components │ ├── services/ │ │ └── chatEngine.js # API communication layer │ ├── state/ │ │ └── uiContext.jsx # Global UI state management │ ├── data/ │ │ └── mockData.js # Sample/mock data │ └── lib/ │ └── utils.js # Utility functions ├── docs/ # Project documentation │ └── resources/ │ ├── 00_stack_overview.md │ ├── 01_react_vite_baseline.md │ ├── 02_styling_tailwind_daisyui.md │ ├── 03_routing_and_linting.md │ ├── 04_prompt_injection_ui_considerations.md │ ├── 05_source_index.md │ ├── 06_phase1_blueprint.md │ └── 07_frontend_backend_contract.md ├── public/ # Static assets ├── vite.config.js # Vite configuration ├── eslint.config.js # ESLint configuration ├── package.json # Frontend dependencies └── pnpm-lock.yaml # Lock file ``` ## 前置条件 - **Node.js** 18.x 或更高版本 - **pnpm** 10.32.1 或更高版本（如果未安装，请运行 `npm install -g pnpm`） - 代码编辑器（推荐 VS Code） ## 设置说明 ### 1. 克隆并进入项目目录 ``` cd prompt_injection_demo ``` ### 2. 安装后端依赖 ``` cd backend python -m venv .venv source .venv/bin/activate pip install -r requirements.txt ``` ### 3. 安装前端依赖 ``` cd ../frontend/prompt_injection_demo_frontend pnpm install ``` ### 4. 环境配置（后端） 在 `backend/` 目录中创建 `.env` 文件： ``` PORT=5000 OLLAMA_BASE_URL=http://127.0.0.1:11434 OLLAMA_MODEL=gemma3:latest CORS_ORIGIN=http://localhost:5173 ``` 添加 LLM 集成所需的任何 API 密钥或配置。 ## 运行项目 ### 选项 1：在不同的终端中运行后端和前端 **终端 1 - 后端：** ``` cd backend python app.py ``` 后端将在 `http://localhost:5000` 启动（或 `.env` 中指定的端口） **终端 2 - 前端：** ``` cd frontend/prompt_injection_demo_frontend pnpm run dev ``` 前端将在 `http://localhost:5173` 启动（默认 Vite 端口） ### 选项 2：同时运行两者（从根目录） 从根目录，您可以设置一个脚本来同时运行两者： ``` cd backend && pnpm run dev & cd ../frontend/prompt_injection_demo_frontend && pnpm run dev ``` ## 开发 ### 前端开发 ``` cd frontend/prompt_injection_demo_frontend # 启动开发服务器 pnpm run dev # 为生产环境构建 pnpm run build # 预览生产构建 pnpm run preview # 运行代码检查 pnpm run lint ``` **前端特性：** - 热模块替换 (HMR) 实现即时 UI 更新 - 已启用 React Compiler 以优化性能 - Tailwind CSS + daisyUI 实现快速组件开发 - React Router 用于多页面场景 ### 后端开发 ``` cd backend # 启动开发服务器 python app.py # 如有需要，在生产 WSGI 服务器后运行 # gunicorn -b 0.0.0.0:5000 app:app ``` **后端特性：** - Flask 路由和中间件风格的钩子 - SSE 流式代理到 Ollama - 基于环境的配置 ## 前端架构 ### 状态管理 - **UIContext** (`src/state/uiContext.jsx`) - 使用 React Context API 的全局 UI 状态 - **Persistence** (`src/state/persistence.js`) - 状态持久化工具 ### 聊天引擎 - **chatEngine.js** - 处理与后端的通信和流式响应 - 提供 `sendMessage` 和 `stopStreaming` 方法用于消息处理 ### 页面 - **ChatPage** - 包含攻击/防御的主聊天界面 - **SampleScenarioPage** - 预定义的提示词注入场景 - **SamplesPage** - 示例演示 ### 工具组件 - **SystemPromptPanel** - 查看和编辑系统提示词 - **ConsolePanel** - 显示调试信息和输出 - **MarkdownMessage** - 使用 markdown 格式渲染模型响应 ## 后端 API 契约 前端通过 [前端-后端契约](frontend/prompt_injection_demo_frontend/docs/resources/07_frontend_backend_contract.md) 中定义的 REST/流式 API 与后端通信。 已实现的端点： - `GET /health` - 后端和 Ollama 状态 - `GET /api/connection` - 详细的 Ollama 连接检查 - `POST /api/chat` - 发送消息并获取响应 - `POST /api/chat/stream` - 将助手响应作为 SSE 流式传输 ## 样式 该项目使用 **Tailwind CSS 4** 和 **daisyUI 5** 进行组件样式设计： - 全局样式在 `src/index.css` 中 - 通过 Tailwind 类实现组件级工具类 - daisyUI 主题变量确保设计一致性 - 避免使用自定义简写令牌；请使用 Tailwind 任意值（例如 `max-w-[1860px]`） 更多详情请参阅 [Tailwind + daisyUI 文档](frontend/prompt_injection_demo_frontend/daisyui_llms_docs.md) ## 项目文档 详细文档可在 [docs/resources](frontend/prompt_injection_demo_frontend/docs/resources) 目录中获取： - **00_stack_overview.md** - 技术栈和项目架构 - **01_react_vite_baseline.md** - React + Vite 设置详情 - **02_styling_tailwind_daisyui.md** - 样式方法和指南 - **03_routing_and_linting.md** - 路由和代码质量设置 - **04_prompt_injection_ui_considerations.md** - 安全 UX 模式 - **05_source_index.md** - 文件结构和组件清单 - **06_phase1_blueprint.md** - 第一阶段实施计划 - **07_frontend_backend_contract.md** - 前端和后端之间的 API 契约 ## 常见任务 ### 添加新组件 ``` cd frontend/prompt_injection_demo_frontend pnpm dlx shadcn@latest add @lucide-animated/ ``` 然后从 `src/components/ui/` 导入 ### 为生产环境构建前端 ``` cd frontend/prompt_injection_demo_frontend pnpm run build ``` 输出将在 `dist/` 目录中 ### 检查前端代码 ``` cd frontend/prompt_injection_demo_frontend pnpm run lint ``` ## 后续步骤/路线图 1. 实现后端 API 端点 2. 集成 LLM 提供商 API（OpenAI、Anthropic 等） 3. 构建提示词注入检测逻辑 4. 创建安全过滤管道 5. 添加审计日志和监控 6. 实现基于场景的演示 7. 添加教育内容和说明 ## 安全注意事项 这是一个用于教育目的的**演示项目**。在生产环境中实施提示词注入安全时： - 永远不要在没有验证的情况下信任用户输入 - 实施严格的输入/输出过滤 - 为不可信内容使用单独的执行环境 - 记录和监控所有用户交互 - 遵循 OWASP LLM 安全指南 - 定期进行安全审计 ## 故障排除 ### 端口已被占用 如果端口 5000（后端）或 5173（前端）已被占用： ``` # 查找并终止端口上的进程 (Linux/Mac) lsof -i :5000 # for backend lsof -i :5173 # for frontend # 更新 .env 中的后端端口 PORT=5001 ``` ### pnpm 锁文件问题 ``` # 重新安装依赖 rm pnpm-lock.yaml pnpm install ``` ### Vite HMR 问题 清除 Vite 缓存： ``` rm -rf frontend/prompt_injection_demo_frontend/node_modules/.vite ``` ## 许可证 [在此添加您的许可证] ## 联系方式 [在此添加联系信息或团队详情] **最后更新：** 2026 年 3 月 **状态：** 开发中

标签：AI安全, AI对抗, AI风险缓解, API密钥检测, Chat Copilot, DLL 劫持, Flask, Obfuscated Injection, Python, React, Syscalls, Tailwind CSS, Vite, Web安全, 后端开发, 后门攻击, 大语言模型, 安全演示, 对抗性AI, 提示词工程, 无后门, 策略决策点, 网络安全, 蓝队分析, 输入验证, 逆向工具, 间接注入, 隐私保护