gstack 教程 8：QA 与安全（实时测试 + OWASP+STRIDE 审计）

教程概述

系列索引: gstack 教程系列

/qa 用实时浏览器测试你的应用，发现 bug，修复它们，然后重新验证。/cso 运行安全审计，覆盖 OWASP Top 10 + STRIDE 威胁模型。

你将学到

✅ /qa 完整 QA 工作流带自动修复
✅ 从修复生成回归测试
✅ /qa-only 仅报告模式
✅ /cso 安全审计带零噪音设计
✅ 每个发现的利用场景
✅ 完整 QA 流程示例

为什么需要实时 QA？

静态测试遗漏 UI bug

flowchart LR
    A[单元测试通过] --> B[部署]
    B --> C[UI 损坏]
    C --> D[用户投诉]

    style C fill:#ffcccc
    style D fill:#ffcccc

`/qa` 捕获用户看到的内容

flowchart TD
    A[/qa] --> B[实时浏览器]
    B --> C[点击流程]
    C --> D[发现视觉 Bug]
    D --> E[用原子提交修复]
    E --> F[重新验证]
    F --> G{通过?}
    G -->|否| D
    G -->|是| H[回归测试]

    style A fill:#e1f5ff
    style H fill:#e8f5e9

`/qa` — 完整 QA 工作流

工作原理

启动浏览器 — 通过 Playwright 的真实 Chromium
导航到目标 — 你的预发布或生产 URL
点击流程 — 登录、表单、导航
发现 bug — 视觉问题、损坏链接、缺失元素
用原子提交修复 — 每个修复一个提交
重新验证 — 再次运行相同流程
生成回归测试 — 每个修复变成测试

使用

/qa https://staging.myapp.com

输出：

QA 测试 https://staging.myapp.com

┌─────────────────────────────────────────────────────────────┐
│ QA 会话                                                      │
├─────────────────────────────────────────────────────────────┤
│ 🧪 测试登录流程...                                            │
│ ✅ 登录成功                                                   │
│                                                              │
│ 🧪 测试仪表板导航...                                          │
│ ❌ 发现 BUG: 侧边栏菜单在移动端不可见                          │
│    位置: src/components/Sidebar.tsx                          │
│    问题: CSS 媒体查询缺失                                     │
│                                                              │
│ 🔧 正在修复...                                                │
│ 提交: fix sidebar mobile visibility                          │
│                                                              │
│ 🧪 重新验证...                                                │
│ ✅ 侧边栏现在在移动端可见                                      │
│                                                              │
│ 📝 正在生成回归测试...                                        │
│ 创建: tests/sidebar-mobile.test.ts                           │
└─────────────────────────────────────────────────────────────┘

QA 完成: 1 个 bug 发现, 1 个修复, 1 个测试添加

Bug 类别

类别	示例	自动修复
视觉	元素在移动端隐藏	是
功能	按钮不可点击	是
内容	缺失文本、错字	是
性能	页面加载慢	否（ASK）
无障碍	缺失 ARIA 标签	是

原子提交

每个修复是单独的提交：

fix: sidebar mobile visibility (QA #1)
fix: form validation message color (QA #2)
fix: missing aria-label on submit button (QA #3)

回归测试生成

每个修复变成测试

// tests/sidebar-mobile.test.ts
// 从 QA 修复生成: sidebar mobile visibility

import { test, expect } from '@playwright/test';

test('sidebar visible on mobile viewport', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('/dashboard');
  await expect(page.locator('[data-testid="sidebar"]')).toBeVisible();
});

测试跟踪

┌────────────────────────────────────────────┐
│ QA 测试覆盖                                 │
├────────────────────────────────────────────┤
│ 生成的测试: 12                              │
│ 来自 QA 会话: 3                             │
│ 通过率: 100%                                │
├────────────────────────────────────────────┤
│ 最新: sidebar-mobile.test.ts                │
└────────────────────────────────────────────┘

`/qa-only` — 仅报告模式

何时使用

你想要 QA 报告但不改代码
外部 QA 团队会修复问题
sprint 规划前记录 bug
合规审计文档

使用

/qa-only https://staging.myapp.com

输出：

QA 仅报告（无修复）

┌─────────────────────────────────────────────────────────────┐
│ QA 报告                                                      │
├─────────────────────────────────────────────────────────────┤
│ 概要：                                                       │
│ - 发现 Bug: 5                                                │
│ - 严重程度分布：                                              │
│   🔴 高: 1（登录表单提交无验证）                              │
│   🟡 中: 2（损坏链接、缺失工具提示）                          │
│   🟢 低: 2（错字、颜色对比）                                  │
│                                                              │
│ 详情：                                                       │
│                                                              │
│ 🔴 高: 登录表单接受空邮箱                                     │
│    路径: /login                                              │
│    预期: 空提交时显示验证错误                                  │
│    实际: 表单提交，显示服务器错误                              │
│    截图: qa-bug-001.png                                      │
│                                                              │
│ 🟡 中: 首页"了解更多"链接损坏                                 │
│    路径: /                                                   │
│    预期: 导航到 /features                                     │
│    实际: 404 页面                                             │
│    截图: qa-bug-002.png                                      │
│                                                              │
│ ...                                                          │
└─────────────────────────────────────────────────────────────┘

报告已保存: qa-report-2026-04-07.md
无修复应用。使用 /qa 修复这些问题。

`/cso` — 安全审计

涵盖内容

OWASP Top 10 + STRIDE 威胁模型：

OWASP 类别	STRIDE 类别
A01 访问控制失效	欺骗
A02 加密失败	篡改
A03 注入	否认
A04 不安全设计	信息泄露
A05 安全配置错误	权限提升
A06 易受攻击组件	拒绝服务
A07 认证失败	-
A08 软件完整性	-
A09 日志失败	-
A10 SSRF	-

零噪音设计

17 个误报排除 + 8/10 信心门槛：

┌────────────────────────────────────────────┐
│ 安全审计配置                                │
├────────────────────────────────────────────┤
│ 信心门槛: 8/10                              │
│ 误报排除: 17 种模式                         │
│ - 通用占位符密钥                            │
│ - Example.com URL                           │
│ - 测试固件                                  │
│ - 文档示例                                  │
│ - 故意的演示代码                            │
└────────────────────────────────────────────┘

使用

/cso

输出：

正在运行安全审计...

┌─────────────────────────────────────────────────────────────┐
│ CSO 安全审计                                                 │
├─────────────────────────────────────────────────────────────┤
│ 扫描文件: 47                                                 │
│ 发现: 2                                                      │
│                                                              │
│ 🔴 高: 用户搜索中的 SQL 注入                                 │
│    位置: src/api/search.ts:23                                │
│    信心: 9/10                                                │
│                                                              │
│    代码:                                                     │
│      const query = `SELECT * FROM users WHERE name           │
│                     LIKE '%${input}%'`;                      │
│                                                              │
│    利用场景：                                                 │
│      1. 攻击者输入: '; DROP TABLE users; --                   │
│      2. 查询变成: SELECT * FROM users WHERE name             │
│         LIKE '%'; DROP TABLE users; --%'                     │
│      3. users 表被删除                                        │
│                                                              │
│    修复: 使用参数化查询                                       │
│      db.users.findMany({ where: { name: { contains: input }}})│
│                                                              │
│ 🟡 中: 表单缺失 CSRF 保护                                    │
│    位置: src/components/Form.tsx:45                          │
│    信心: 8/10                                                │
│                                                              │
│    代码:                                                     │
│      <form action="/api/submit" method="POST">               │
│        {/* 无 CSRF token */}                                 │
│      </form>                                                 │
│                                                              │
│    利用场景：                                                 │
│      1. 攻击者创建恶意网站                                    │
│      2. 受害者在登录状态下访问攻击者网站                      │
│      3. 隐藏表单 POST 到你的 /api/submit                      │
│      4. 用受害者的凭证执行操作                                │
│                                                              │
│    修复: 给表单添加 CSRF token                                │
│      <input type="hidden" name="_csrf" value={csrfToken} />   │
└─────────────────────────────────────────────────────────────┘

安全审计完成。2 个发现需要修复。
修复后运行 /qa 来验证。

利用场景

每个发现包含：

攻击向量 — 如何利用
影响 — 发生什么
逐步演练 — 具体攻击路径
修复 — 具体代码变更

完整 QA 流程示例

场景

在预发布环境测试和保障新功能。

命令

# 步骤 1: 先安全审计
/cso

# [修复安全发现]

# 步骤 2: QA 测试
/qa https://staging.myapp.com

# [QA 发现并修复 bug]

# 步骤 3: QA-only 生成最终报告
/qa-only https://staging.myapp.com

# 步骤 4: 准备发布
/ship

与审查工作流集成

flowchart TD
    A[代码完成] --> B[/review]
    B --> C[/cso]
    C --> D{安全发现?}
    D -->|是| E[修复安全]
    E --> C
    D -->|否| F[/qa]
    F --> G{发现 Bug?}
    G -->|是| H[修复 Bug]
    H --> F
    G -->|否| I[/qa-only]
    I --> J[生成报告]
    J --> K[/ship]

    style B fill:#fff3e0
    style C fill:#ffebee
    style F fill:#e8f5e9
    style K fill:#e1f5ff

技能快速参考

命令	用途	输出
`/qa <url>`	完整 QA 带修复	Bug 修复，测试添加
`/qa-only <url>`	仅报告	Bug 报告，无修复
`/cso`	安全审计	OWASP + STRIDE 发现
`/qa --flows`	测试特定流程	针对性流程测试
`/qa --screenshots`	捕获所有截图	视觉文档

总结

gstack 中的 QA 与安全提供：

实时浏览器测试 — 看用户看到的
自动修复带提交 — 一个修复，一个提交，一个测试
回归覆盖 — 每个修复变成测试
安全审计 — OWASP + STRIDE，零噪音
利用场景 — 具体攻击演练

关键要点

✅ 在 /qa 之前运行 /cso（安全优先）
✅ 用 /qa 自动修复，用 /qa-only 生成报告
✅ QA 会话后检查回归测试
✅ 查看利用场景理解影响

系列导航：

教程概述

你将学到

为什么需要实时 QA？

静态测试遗漏 UI bug

/qa 捕获用户看到的内容

/qa — 完整 QA 工作流

工作原理

使用

Bug 类别

原子提交

回归测试生成

每个修复变成测试

测试跟踪

/qa-only — 仅报告模式

何时使用

使用

/cso — 安全审计

涵盖内容

零噪音设计

使用

利用场景

完整 QA 流程示例

场景

命令

与审查工作流集成

技能快速参考

总结

关键要点

🍪 Cookie 使用通知

Cookie 偏好设置

必要 Cookie

分析 Cookie

广告 Cookie

`/qa` 捕获用户看到的内容

`/qa` — 完整 QA 工作流

`/qa-only` — 仅报告模式

`/cso` — 安全审计