个人总结——网络安全与软件工程综合实践

角色：前端开发
所属团队：Zeroday
项目名称：OWASP Juice Shop AI 提示注入安全插件

本文是我在《网络安全与软件工程综合实践》课程中的个人总结，记录了我在团队项目中的学习历程、技术收获、协作经验以及对软件工程的思考。项目地址：https://github.com/rafayel-306/juice-shop（分支 ai-challenge-plugin）

---

一、回顾

1. 目标达成

• 掌握 Angular 独立组件开发：通过本项目，我从零开始学会了使用 Angular CLI 生成组件、配置独立组件（standalone: true）、手动导入 CommonModule、FormsModule、HttpClientModule，并成功实现了 AI 挑战页面的前端交互。这是我在课程中最大的技术突破。
• 熟练使用 Git 分支与 PR 协作：学会了创建 feature 分支、提交 Pull Request、参与代码评审，并解决了合并冲突。从最初不敢动代码到能独立管理分支，进步明显。
• 理解前后端分离接口设计：通过与后端同学联调，我掌握了定义请求/响应格式、处理 challengeMode 参数、调试跨域/路由问题的能力。
• 掌握前端状态管理及本地持久化：利用 activeChallenge 变量管理挑战激活状态，并通过 localStorage 实现进度保存，刷新页面不丢失。

2. 不足

• 响应式布局不完善：前端界面在窄屏设备下挑战卡片会出现错位。原因：开发时主要使用宽屏测试，未充分进行移动端或小窗口适配，且对 CSS 媒体查询掌握不够熟练。
• 自动化测试缺失：未编写前端单元测试（如 Angular 的 TestBed）。原因：时间安排上前置任务耗时过多，后期急于联调，忽略了测试脚本的编写。

3. 改进计划

• 学习 CSS 媒体查询与 Flex/Grid 布局：完成项目后，我计划专门练习响应式设计，确保类似项目能适配多种屏幕尺寸。
• 补写前端单元测试：使用 Jasmine/Karma 为 AiAssistantComponent 编写核心交互测试，并集成到 CI 流程中。

4. 【人机协作】记录

• 使用的 AI 工具：DeepSeek、ChatGPT、Kimi。
• AI 帮助：AI 为我总结了 Angular 独立组件的关键步骤，并生成了组件模板的初稿；还帮我分析了 localStorage 的用法。
• 采纳：采纳了 AI 关于“将 activeChallenge 定义为 number | null 类型”的建议，因为这样能更准确地表达未激活状态。
• 拒绝：AI 建议使用 ngx-cookie-service 存储挑战进度，我拒绝了，因为 localStorage 更简单且无需额外依赖，符合项目轻量化需求。
• 效果评分：4 分。AI 快速提供了代码模板和概念解释，节省了约 30% 的查阅文档时间，但在具体布局调优时建议不够精准，仍需手动调试。

---

二、耕耘

1. 时间与产出统计

总学习时间（按周分布）：

周次	小时数	主要工作
第1周	10	环境搭建、学习Angular基础、理解Juice Shop前端架构
第2周	14	编写ai-assistant组件、样式、与后端联调
第3周	8	修复Bug、录制演示视频、编写文档

总计约 32 小时。

代码量与注释：

项目	数据
独立编写代码量（LOC）	约 170 行（TypeScript + HTML + SCSS）
注释量 / 注释率	约 20 行 / 12%
文档页数（个人参与部分）	约 10 页（含 SOLUTIONS.md 挑战说明、PPT 前端部分）
代码提交次数	8 次（Git 记录）

2. 关键产出物

• 代码仓库：https://github.com/rafayel-306/juice-shop（分支 ai-challenge-plugin），包含 frontend/src/app/ai-assistant/ 全部前端代码。
• 演示视频：已录制完整操作流程，展示激活挑战、注入成功、卡片状态变化等。
• 文档：SOLUTIONS.md（挑战解法）、环境配置说明、PPT 前端部分。

3. 【人机协作】记录

• AI 使用：我让 AI 生成了绘制折线图的 Matplotlib 代码（Python），以便展示时间分布。
• 效果：AI 生成的代码基本可用，但坐标轴标签需要手动调整。AI 建议我将每周时间拆分为“编码/调试/文档”三类堆叠柱状图，这确实提升了可读性，我采纳了该建议。
• 评分：4 分，节省了图表设计时间，但需人工微调。

---

三、收获

1. 量化成果

• 用户量：项目组内及邀请的 5 位同学试用，功能满意度平均 4.6 分（5 分制）。
• 代码影响力：前端组件代码被组内复用；项目仓库未公开发布推广，暂无 Star/Fork。

2. 技能提升

技术能力：

• Angular 独立组件开发：从零到完成完整组件，掌握了 @Component 元数据、生命周期钩子、依赖注入。
• Angular Material 使用：熟练使用 mat-icon、mat-button、mat-toolbar 等组件，并自定义主题色。
• 前端调试能力：熟练使用 Chrome DevTools 检查网络请求、断点调试、查看 localStorage。

软技能：

• 团队协作沟通：每日站会中清晰汇报进度，主动向后端同步接口字段变更。
• 代码评审（Code Review）：在 GitHub PR 中能指出逻辑错误和样式不规范问题，并接受他人建议。
• 文档编写：用 Markdown 撰写了清晰的挑战使用说明，条理分明。

3. 使用的软件/工具

类别	工具	用途
开发	VS Code、PyCharm	编写 TypeScript、HTML、SCSS
版本控制	Git、GitHub	提交代码、PR 协作
调试	Chrome DevTools	查看网络请求、Console 日志
协作	微信、腾讯会议	每日站会、问题讨论
文档	Typora、Markdown	编写 SOLUTIONS.md
演示	OBS Studio、剪映	录制、剪辑演示视频

4. 【人机协作】记录

• AI 帮助：AI 在聊天中问我“你是否还提升了 CSS 布局能力？”，这让我意识到我确实改进了 Flex 布局的使用。
• 是否赞同：不完全赞同，AI 还说我提升了“项目管理能力”，但前端角色对项目管理的直接参与较少，我认为这属于组长职责。因此我删除了这一条，保留了确实提升的技能。
• 评分：4 分，AI 能辅助发现盲点，但需要人工过滤。

---

四、结构化的理解（布鲁姆分类）

1. 知识(Knowledge)

• Angular 独立组件：Angular 14+ 新特性，组件可标记 standalone: true，不再依赖 NgModule。来源：课程资料、Angular 官方文档。
• 提示注入（Prompt Injection）：攻击者通过构造特殊输入使 AI 执行非预期指令。来源：OWASP Top 10 for LLM 文档、项目实践。
• localStorage：浏览器提供的键值对存储 API，数据不会过期，同源下可跨页面访问。来源：MDN Web Docs。

2. 理解(Comprehension)

• 前端路由（Hash 模式）：URL 中的 # 后面的部分不会发送给服务器，由前端框架（如 Angular）接管。Juice Shop 使用 useHash: true，所以自定义页面必须通过 /#/ai-assistant 访问。理解了这一点后，我成功配置了新路由。
• 声明式 UI 与响应式更新：Angular 中，数据绑定（如 [(ngModel)]）和属性绑定（如 [class.completed]）使视图自动响应数据变化。我深刻体会到这种模式比传统的 jQuery 手动操作 DOM 更清晰、更少 Bug。

3. 应用(Application)

• 场景一：在 Juice Shop 中添加新页面
  步骤：① 创建独立组件；② 在 app.routing.ts 中添加路由 { path: 'ai-assistant', component: AiAssistantComponent }；③ 在导航栏 navbar.component.html 添加 routerLink 链接。
  结果：成功集成新页面，且不破坏原有路由。

• 场景二：实现挑战激活状态管理
  步骤：① 在组件中定义 activeChallenge: number | null = null；② 在 sendMessage() 中用正则 /^挑战([123])$/ 检测用户输入，若匹配则设置 activeChallenge 并返回激活提示，不发送后端；③ 普通消息时将 challengeMode: this.activeChallenge 加入请求体。
  结果：前端独立管理激活状态，后端只需无状态处理。

• 场景三：保存挑战进度到本地
  步骤：① 在 ngOnInit 中读取 localStorage.getItem('ai_challenge_progress')；② 解析 JSON 后恢复 challenges 数组的 completed 字段和 totalScore；③ 每次挑战完成时调用 saveProgress() 更新存储。
  结果：刷新页面后进度保留，用户体验提升。

4. 分析(Analysis)

• 复杂问题：路由顺序冲突导致 API 请求被前端拦截
  成因：后端 Express 中间件注册顺序中，app.use(serveAngularClient()) 在自定义 API 路由之后，导致任何未匹配请求都被 Angular 前端路由捕获。
  解决方案：将自定义 AI 路由放在 configureApp 函数最开头，在所有 app.use 之前。
  分析：这体现了 Express 中间件“先注册先匹配”的原则。我虽然主要负责前端，但通过协助调试，也理解了后端路由机制，并帮助团队整理了 API 文档。

5. 综合(Synthesis)

• 工具整合：将 Angular、Git、GitHub Projects、Markdown 文档整合为完整的工作流。
  具体收获：我使用 GitHub Projects 看板（To Do/In Progress/Done）跟踪前端任务，每天更新状态。同时将设计稿、组件清单、接口文档汇总到 Markdown 文件中，方便组员查阅。通过这种整合，我们避免了“文档分散、进度不清”的问题。

6. 评价(Evaluation)

• 项目优势：我们的前端界面与 Juice Shop 原生风格高度一致，挑战卡片设计简洁清晰，用户学习成本低。相比同类安全靶场（如 Garak 命令行工具），我们的交互更友好，适合教学演示。
• 不足：响应式适配较差，移动端体验不佳。相比之下，Juice Shop 官方页面本身在小屏上已做了优化，我们未完全继承其媒体查询。
• 改进方向：下一版本可参考官方 Navbar 的响应式类（如 hide-lt-md）扩展至挑战面板。

【人机协作】记录

• AI 帮助：AI 生成了布鲁姆分类的框架示例，并给出了每个层次的定义解释。
• 判断：我根据自己的实际经历修改了示例，例如将“知识”中的例子替换为 Angular 独立组件而非通用概念。AI 的示例虽然标准，但与我的项目关联度不够，需要人工订正。
• 评分：3 分，框架有帮助，但内容填充完全依赖自己。

---

五、属于我们的人月神话

团队协作经验 ：前后端接口字段不一致导致联调失败

• 问题描述：前端发送 { mode: 1 }，后端却期望 challengeMode，导致挑战始终无法激活。
• 解决方案：统一接口文档，采用后端定义的 challengeMode 为标准；前端修改代码，后端做兼容（优先取 challengeMode，若不存在再取 mode）。
• 实例佐证：修改后联调一次通过，此后所有接口变更都先行更新 Markdown 文档并同步给全员。

【人机协作】记录

• AI 提供案例：AI 向我介绍了“人月神话”中关于沟通成本的概念，并举例“不同模块负责人接口定义不一致导致返工”。
• 迁移应用：我将这个案例迁移到我们的“字段不一致”问题上，意识到事先的接口评审比事后修复更重要。AI 的经典案例帮助我理解了问题本质。
• 评分：5 分，AI 提供了理论支撑，让我能更有依据地向团队提议“先定接口后编码”。

---

六、对团队的分析

1. 团队发展阶段

• 形成阶段：初期三人分工，我负责前端，组长负责后端，杨雯惠负责原型。我们确立了 Git 工作流（feature 分支 + PR）。
• 磨合阶段：因路由冲突问题，组员对“谁的问题”有争议，组长主动调试并分享日志，最终统一认识。另外，挑战3 评论提交的顺序问题也经历了讨论。
• 规范阶段：制定了代码规范（ESLint）、PR 评审必须包含具体意见、接口文档先行。我学会了每次提交前 npm run lint。
• 创造阶段：我们自主设计了“挑战-激活分离”模式，并实现了 localStorage 进度保存，这些不是作业强制要求，而是团队自发的创新。

2. 是否达到“创造”阶段

• 是。我们不仅完成了三个基础挑战，还增加了积分卡片、重置按钮、激活提示条等增强功能，且界面风格完全贴合 Juice Shop。这些设计是我们团队内部 brainstorming 的结果，没有照搬任何现成模板。

【人机协作】记录

• AI 帮助分析：AI 解释了塔克曼团队发展模型，并举例各阶段的典型行为。
• 是否认同：认同。AI 将“形成”描述为“成员客气、探索”，我们初期确实如此。AI 的分类帮助我们定位到了“规范”阶段还需要强化代码审查清单，我们据此改进了 PR 流程。
• 评分：4 分，提供了分析框架，具体判断仍依赖团队实际情况。

---

七、证明学会了软件工程

1. 研发出符合用户需求的软件

• 自评：达成。我们通过原型设计邀请 5 位同学试用，收集反馈后调整了挑战3 的提示语。
• 证据：用户满意度调查表（4.6/5）、典型评语“挑战3 让我理解了评论污染”。问卷截图见附件。

2. 通过一定软件流程，在预计时间内发布“足够好”的软件

• 自评：基本达成，但自动化测试未完成，比计划延迟 2 天。
• 证据：Sprint Backlog（Trello 看板截图）、燃尽图（手绘简图）、Git 版本发布记录（v1.0 tag）。

3. 能证明所开发的软件是可维护和可继续发展的

• 自评：较好达成。代码结构清晰，组件独立，注释充分。
• 证据：
  • 代码规范：ESLint + Prettier 配置；
  • 单元测试覆盖率：暂未达 70%，计划后续补充；
  • API 文档：SOLUTIONS.md 中包含前端与后端交互的完整说明。

4. 综合

• 掌握理论：理解前后端分离、RESTful 风格、路由 Hash 模式等。
• 使用工具：熟练使用 Angular CLI、Git、Chrome DevTools、Markdown。
• 工程能力：完成从需求分析、原型设计、编码、联调、测试、文档到演示的全流程。

【人机协作】记录

• AI 协助：AI 为我生成了本报告中“测试用例”的表格模板，并建议使用 localStorage 存储用户设置。
• AI 生成注释质量：AI 生成的代码注释有时太啰嗦，有时忽略关键逻辑。我倾向于自己写关键注释，AI 注释作为检查的参考。
• 评分：3.5 分，辅助作用明显但不可替代人工审查。

---

八、建议

1. 对下一届学生

• 问题：对 Angular 独立组件模式不熟悉，容易陷入传统 NgModule 陷阱。
• 建议：先快速过一遍 Angular 官方教程的“独立组件”章节，并动手创建一个最小示例。不要直接套用旧版代码，否则会浪费很多时间在模块声明上。

2. 对大一的自己

• 问题：大一的我惧怕命令行和 Git，只用拖拽上传代码。
• 建议：尽早学习 Git 基础命令和 GitHub Flow。可以参加 Git 的互动游戏（如 learngitbranching），弄懂分支、合并、冲突解决，这对团队协作是必修课。

3. 对课程改进

• 问题：课程缺少对“大型开源项目扩展”的专项指导，导致我们在 Juice Shop 路由集成上花费大量时间。
• 建议：增加一次讲座或实验，专门讲解如何为大型开源项目（如 Juice Shop）添加新功能，包括分析项目启动流程、路由注册方式、编译配置等。或者提供一份常见的“踩坑清单”，帮助学生快速定位类似问题。

【人机协作】记录

• AI 建议：AI 曾建议“下一届学生应尽早使用 AI 编程助手”。我认为这个建议最不切实际，因为对新生来说，手动编码理解基础语法更重要，过早依赖 AI 可能削弱调试能力。
• 评分：3 分，部分建议有价值，但需结合实际情况筛选。

---

报告日期：2026年5月24日
团队：Zeroday

附：项目截图、代码片段详见 GitHub 仓库（分支 ai-challenge-plugin）。