@bovinphang/frontend-craft 2.7.0 → 2.8.0

package/skills/fec-refactor-clean/references/report-template.md

@@ -1,42 +1,42 @@
-# 重构清理报告模板
+# Refactor cleaning report template
 
 ```markdown
-# 重构清理报告
+# Refactor cleanup report
 
-> 生成时间: YYYY-MM-DD HH:mm
-> 清理范围: 文件 / 模块 / 依赖 / 路由 / 样式
+> Generation time: YYYY-MM-DD HH:mm
+> Cleanup scope: File/Module/Dependency/Route/Style
 
-## 基线验证
+## Baseline verification
 
-| 命令 | 清理前状态 | 清理后状态 | 备注 |
+| Command | Status before cleaning | Status after cleaning | Remarks |
 | --- | --- | --- | --- |
-| `npm run lint` | 失败 / 通过 / 未运行 | 失败 / 通过 / 未运行 | ... |
+| `npm run lint` | failed/passed/didn’t run | failed/passed/didn’t run | ... |
 
-## 候选项与证据
+## Candidates and evidence
 
-| 候选项 | 证据 | 风险分类 |
+| Candidates | Evidence | Risk Classification |
 | --- | --- | --- |
-| `path/to/file.ts` | 工具输出 / rg 搜索 / 类型检查 | SAFE / CAUTION / DANGER / UPGRADE |
+| `path/to/file.ts` | Tool output / rg search / type checking | SAFE / CAUTION / DANGER / UPGRADE |
 
-## 已清理项
+## Cleaned items
 
-- 删除或修改的文件、导出、样式、依赖或配置
-- 每项清理对应的证据
+- Deleted or modified files, exports, styles, dependencies or configurations
+-Evidence corresponding to each cleanup
 
-## 跳过原因
+## Skip reason
 
-- CAUTION / DANGER 项为什么没有自动处理
-- 需要人工确认、运行时验证或专项流程的内容
+- Why is the CAUTION / DANGER item not automatically processed?
+- Content that requires manual confirmation, runtime verification, or specialized processes
 
-## 验证命令
+## Verification command
 
-- 执行的 lint、type-check、test、build 或手工验证
-- 关键输出摘要
+- lint, type-check, test, build or manual verification performed
+- Summary of key outputs
 
-## 剩余风险
+## Residual risk
 
-- 动态引用、运行时模板、插件元数据或外部入口风险
-- 建议后续清理或依赖升级项
+- Dynamic references, runtime templates, plug-in metadata or external entry risks
+- Recommend subsequent cleaning or dependency upgrades
 ```
 
-清理完成后，将报告保存到 `reports/refactor-clean-YYYY-MM-DD-HHmmss.md`，并告知用户报告路径。
+After cleaning is completed, save the report to `reports/refactor-clean-YYYY-MM-DD-HHmmss.md` and inform the user of the report path.

package/skills/fec-responsive-layout/SKILL.md

@@ -1,34 +1,34 @@
 ---
 name: fec-responsive-layout
-description: Use when designing, implementing, or reviewing responsive frontend layouts, mobile-first breakpoints, container queries, fluid grids, data-dense tables, touch targets, safe areas, orientation changes, viewport overflow, or cross-device UI behavior; Chinese triggers include 响应式布局, 移动端适配, 断点, 容器查询, 横竖屏, 触摸目标.
+description: Use when designing, implementing, or reviewing responsive frontend layouts, mobile-first breakpoints, container queries, fluid grids, data-dense tables, touch targets, safe areas, orientation changes, viewport overflow, or cross-device UI behavior; Chinese triggers include responsive layouts, mobile-side adaptation, breakpoints, container queries, horizontal and vertical screens, touch targets.
 ---
 
-# 响应式布局
+# Responsive layout
 
-适用于需要让页面、工具界面、表格、仪表盘或组件在多设备上稳定工作的前端任务。需要布局模式和检查清单时加载 [references/responsive-layout-patterns.md](references/responsive-layout-patterns.md)。
+Suitable for front-end tasks that require pages, tool interfaces, tables, dashboards or components to work stably on multiple devices. Load [references/responsive-layout-patterns.md](references/responsive-layout-patterns.md) when layout patterns and checklists are required.
 
 ## Purpose
 
-用内容优先、移动优先和容器感知的方式设计响应式布局，避免只靠固定断点修补溢出。
+Design responsive layouts in a content-first, mobile-first, and container-aware manner to avoid relying solely on fixed breakpoints to fix overflow.
 
 ## Procedure
 
-1. 明确信息优先级：小屏先保留核心任务、关键操作和反馈；次要信息折叠、延后或移入详情层。
-2. 选择布局策略：简单页面用 mobile-first 断点；嵌套组件、卡片网格和侧栏优先考虑 container query。
-3. 设计流式尺寸：用 `minmax()`、`clamp()`、`aspect-ratio`、`max-width`、`min-width: 0` 和稳定网格轨道控制伸缩。
-4. 处理数据密集界面：表格、列表、看板和编辑器需要明确横向滚动、列优先级、冻结列或移动端摘要视图。
-5. 保证触摸与键盘：触摸目标、焦点路径、hover 替代、虚拟键盘、安全区域和横竖屏切换都要复核。
-6. 关联性能与资源：移动端减少首屏大图、重型图表、同步动画和不必要列渲染。
-7. 验证断点之间：检查 375px、768px、1024px、1440px，以及断点中间值是否溢出、遮挡或跳变。
+1. Clarify the priority of information: On small screens, core tasks, key operations and feedback are retained first; secondary information is folded, postponed or moved to the detail layer.
+2. Choose a layout strategy: use mobile-first breakpoints for simple pages; give priority to container query for nested components, card grids and sidebars.
+3. Design flow size: use `minmax()`, `clamp()`, `aspect-ratio`, `max-width`, `min-width: 0` and stable grid track to control scaling.
+4. Handle data-intensive interfaces: tables, lists, boards, and editors need to explicitly support horizontal scrolling, column prioritization, frozen columns, or mobile summary views.
+5. Ensure touch and keyboard: touch targets, focus paths, hover substitutions, virtual keyboards, safe areas, and horizontal and vertical screen switching should all be reviewed.
+6. Correlate performance and resources: The mobile terminal reduces first-screen large images, heavy charts, synchronized animations and unnecessary column rendering.
+7. Verify between breakpoints: check 375px, 768px, 1024px, 1440px, and whether the intermediate value of the breakpoint overflows, blocks, or jumps.
 
 ## Constraints
 
-- 不把桌面版缩小当作移动端设计。
-- 不让关键功能只依赖 hover 或宽屏侧栏。
-- 不用固定高度掩盖内容变化；需要固定格式时用稳定约束和可滚动区域。
-- 不用 viewport 字体缩放替代真实排版层级。
-- 不让移动端横向溢出成为默认解决方案；只有数据表、画布或编辑器等明确场景可以局部横滚。
+- Don’t treat the desktop version downsized as a mobile design.
+- Don’t make key features rely solely on hover or widescreen sidebars.
+- Do not use fixed height to cover content changes; use stable constraints and scrollable areas when fixed format is required.
+- Do not use viewport font scaling instead of real typography hierarchy.
+- Do not make mobile horizontal overflow the default solution; only explicit scenes such as data tables, canvases or editors can partially scroll.
 
 ## Expected Output
 
-输出响应式信息优先级、断点或容器策略、关键组件布局模式、触摸/键盘要求、数据密集区域处理方案和验证结果。完成后页面在常见视口和输入方式下不溢出、不遮挡、可操作。
+Outputs responsive information prioritization, breakpoint or container strategies, key component layout patterns, touch/keyboard requirements, data-intensive area handling options, and validation results. After completion, the page will not overflow, not be blocked, and is operable under common viewports and input methods.

package/skills/fec-responsive-layout/references/responsive-layout-patterns.md

@@ -1,16 +1,16 @@
-# 响应式布局模式
+# Responsive layout mode
 
-## 策略选择
+## Strategy selection
 
-| 场景 | 策略 |
+| Scenario | Strategy |
 | ---- | ---- |
-| 页面级结构 | 移动优先断点 |
-| 会被放进未知父容器的复用组件 | 容器查询 |
-| 卡片网格 | `repeat(auto-fit, minmax())`，并设置合理最小宽度 |
-| 数据表格 | 列优先级、横向滚动或移动端摘要行 |
-| 编辑器 / 画布 / dashboard | 稳定外壳 + 可滚动工作区 |
+| Page-level structure | Mobile-first breakpoints |
+| Reused components that will be put into unknown parent containers | Container query |
+| Card grid | `repeat(auto-fit, minmax())` and set a reasonable minimum width |
+| Data tables | Column priority, horizontal scrolling, or mobile summary rows |
+| Editor / canvas / dashboard | Stable shell + scrollable workspace |
 
-## CSS 模式
+## CSS Patterns
 
 ```css
 .card-grid {
@@ -32,39 +32,39 @@
 }
 ```
 
-当 grid/flex 子项包含长文本、表格、代码、图表或媒体时，给子项设置 `min-width: 0`。
+When grid/flex items contain long text, tables, code, charts, or media, set `min-width: 0` to the items.
 
-## 数据密集型界面
+## Data-intensive interface
 
-- 编码前先确定移动端列优先级。
-- 主标识、状态和主要操作保持可见。
-- 低优先级元数据移入详情行、抽屉或可展开面板。
-- 小屏仍要保留排序、筛选、分页和选择能力。
-- 虚拟滚动只解决 DOM 数量问题，不能解决信息层级问题。
-- 表格可以局部横向滚动，但页面整体不应出现无意水平溢出。
+- Prioritize mobile columns before coding.
+- The main logo, status and main actions remain visible.
+- Low priority metadata moved to details row, drawer or expandable panel.
+- Small screens must still retain the ability to sort, filter, paging, and select.
+- Virtual scrolling only solves the problem of DOM quantity, but cannot solve the problem of information hierarchy.
+- The table can be partially scrolled horizontally, but the page as a whole should not have unintentional horizontal overflow.
 
-## 响应式媒体
+## Responsive media
 
-- 图片和视频要有稳定尺寸、`aspect-ratio` 或容器约束，避免加载后推挤布局。
-- 需要多尺寸资源时使用 `srcset`、`sizes` 或 `<picture>`，不要让移动端下载桌面大图。
-- 非首屏图片默认懒加载；首屏主体图按框架能力设置明确优先级。
-- 媒体裁切必须保留主体信息；不要为了填满卡片裁掉产品、人物、图表关键区域。
+- Images and videos must have stable size, `aspect-ratio` or container constraints to avoid pushing the layout after loading.
+- Use `srcset`, `sizes` or `<picture>` when you need multi-size resources, and do not let the mobile client download desktop large images.
+- Non-first-screen images are lazy-loaded by default; first-screen main images are prioritized clearly based on frame capabilities.
+- Media cropping must retain the main information; do not crop key areas of products, people, or charts just to fill the card.
 
-## 触控与视口检查
+## Touch and viewport inspection
 
-- 空间允许时，交互目标至少 44x44px。
-- 移动端输入框字号避免低于 16px。
-- 固定底部栏和操作条必须考虑 `env(safe-area-inset-bottom)`。
-- 对话框和抽屉需要适配虚拟键盘导致的视口变化。
-- 只在 hover 时出现的内容必须提供点击、焦点或常驻可见替代方案。
-- iOS/Android 横竖屏切换后，主操作、焦点位置和滚动容器仍应可达。
-- 需要局部滚动的区域应明确最大高度和滚动边界，避免页面和内部容器互相抢滚动。
+- Interactive targets should be at least 44x44px, space permitting.
+- Avoid lowering the font size of the mobile input box below 16px.
+- Fixed bottom bars and action bars must consider `env(safe-area-inset-bottom)`.
+- Dialog boxes and drawers need to adapt to viewport changes caused by the virtual keyboard.
+- Content that only appears on hover must provide click, focus, or permanently visible alternatives.
+- After switching between horizontal and vertical screens on iOS/Android, the main operation, focus position and scroll container should still be accessible.
+- Areas that require partial scrolling should have a clear maximum height and scrolling boundary to prevent the page and internal containers from competing for scrolling.
 
-## 验证清单
+## Verification list
 
-- 320-375px：页面级没有横向溢出。
-- 768px：布局切换后阅读顺序仍然合理。
-- 1024-1440px：内容宽度有约束，扫描路径清晰。
-- 长标签、翻译文本、数字以及 empty/error/loading 状态不会撑坏固定格式控件。
-- 横竖屏切换不会困住焦点或隐藏主操作。
-- 虚拟键盘弹出时，输入框、提交按钮和错误提示不被遮挡。
+- 320-375px: No horizontal overflow at the page level.
+- 768px: The reading order is still reasonable after the layout is switched.
+- 1024-1440px: The content width is constrained and the scanning path is clear.
+- Long labels, translated text, numbers, and empty/error/loading states will not break fixed format controls.
+- Switching between horizontal and vertical screens will not trap focus or hide the main operation.
+- When the virtual keyboard pops up, the input box, submit button and error prompt are not blocked.

package/skills/fec-route-protection/SKILL.md

@@ -1,24 +1,24 @@
 ---
 name: fec-route-protection
-description: Use when implementing or reviewing frontend route protection, auth guards, RBAC, permission routes, login state handling, redirects, middleware, React Router, Next.js, Vue Router, or Nuxt route middleware; Chinese triggers include 路由保护, 权限路由, 登录态.
+description: Use when implementing or reviewing frontend route protection, auth guards, RBAC, permission routes, login state handling, redirects, middleware, React Router, Next.js, Vue Router, or Nuxt route middleware; Chinese triggers include route protection, permission routing, login state.
 ---
 
-# 路由保护
+#Route protection
 
 ## Purpose
 
-为前端应用建立清晰的认证、授权和重定向边界，避免越权访问与闪烁渲染。
+Establish clear authentication, authorization and redirection boundaries for front-end applications to avoid unauthorized access and flickering rendering.
 
 ## When to Use
 
-- 页面需要登录后访问，或不同角色看到不同路由。
-- 需要实现 React Router、Next.js、Nuxt 或 Vue Router 的路由守卫。
-- 登录过期、权限不足、组织/租户切换需要统一处理。
-- 不用于替代服务端授权；前端路由保护只能改善体验，不能作为唯一安全边界。
+- The page needs to be logged in to access, or different roles can see different routes.
+- Requires implementing route guards for React Router, Next.js, Nuxt or Vue Router.
+- Login expiration, insufficient permissions, and organization/tenant switching need to be handled uniformly.
+- Not used to replace server-side authorization; front-end routing protection can only improve the experience and cannot be used as the only security boundary.
 
 ## Procedure
 
-### 1. 定义认证与授权状态
+### 1. Define authentication and authorization status
 
 ```ts
 export type AuthStatus = "loading" | "anonymous" | "authenticated";
@@ -34,7 +34,7 @@ export function canAccess(user: CurrentUser, required: string[]) {
 }
 ```
 
-### 2. React Router 使用布局守卫
+### 2. React Router uses layout guards
 
 ```tsx
 import { Navigate, Outlet, useLocation } from "react-router-dom";
@@ -68,7 +68,7 @@ const router = createBrowserRouter([
 ]);
 ```
 
-### 3. Next.js 优先在服务端边界处理
+### 3. Next.js prioritizes processing at the server boundary
 
 ```ts
 // middleware.ts
@@ -92,9 +92,9 @@ export const config = {
 };
 ```
 
-对需要精细权限的 App Router 页面，在 server component 或 server action 中重新校验权限，不依赖客户端状态。
+For App Router pages that require fine-grained permissions, re-verify permissions in the server component or server action, regardless of client status.
 
-### 4. Vue Router / Nuxt 使用导航守卫
+### 4. Vue Router / Nuxt uses navigation guards
 
 ```ts
 router.beforeEach(async (to) => {
@@ -112,24 +112,24 @@ router.beforeEach(async (to) => {
 });
 ```
 
-### 5. 统一失败与跳转体验
+### 5. Unify failure and jump experience
 
-- `401`：清理过期会话，跳转登录页并保留 `redirect`。
-- `403`：进入无权限页，不反复重试。
-- `loading`：渲染稳定骨架屏，避免先显示私有内容再跳转。
-- 登录成功：只跳转到同源且允许的路径，防止 open redirect。
-- RBAC：权限矩阵来自可信会话或后端返回；前端只用于路由体验和 UI 裁剪，不能替代接口授权。
-- 会话刷新：401 刷新失败后统一清理状态；避免多个并发请求各自触发跳转或刷新风暴。
+- `401`: Clean up expired sessions, jump to the login page and keep `redirect`.
+- `403`: Enter the unauthorized page, do not try again.
+- `loading`: Render a stable skeleton screen to avoid displaying private content first and then jumping.
+- Successful login: only jump to the same origin and allowed path to prevent open redirect.
+- RBAC: The permission matrix is returned from the trusted session or backend; the frontend is only used for routing experience and UI tailoring, and cannot replace interface authorization.
+- Session refresh: Uniformly clean up status after 401 refresh failure; avoid multiple concurrent requests from triggering jumps or refresh storms.
 
 ## Constraints
 
-- 前端路由保护不是安全边界；API、SSR loader、server action 必须重复做授权校验。
-- 不要在组件渲染后用 `useEffect` 才跳转私有页面，否则会出现敏感内容闪烁。
-- redirect 参数必须限制为站内路径，不能直接信任 URL 输入。
-- 权限信息应来自可信会话或后端响应，不要只依赖 localStorage 中的角色字段。
-- 多租户应用必须把 tenant/org 上下文纳入权限判断。
-- 不把菜单隐藏视为授权完成；用户直接访问 URL、刷新页面、篡改 localStorage 和替换 tenant 都必须验证。
+- Front-end routing protection is not a security boundary; API, SSR loader, and server actions must undergo repeated authorization verification.
+- Do not use `useEffect` to jump to the private page after the component is rendered, otherwise sensitive content will flicker.
+- The redirect parameter must be restricted to within-site paths and URL input cannot be trusted directly.
+- Permission information should come from a trusted session or backend response, don't rely solely on role fields in localStorage.
+- Multi-tenant applications must incorporate the tenant/org context into permission determinations.
+- Menu hiding is not considered authorization completion; users must authenticate when accessing the URL directly, refreshing the page, tampering with localStorage, and replacing tenants.
 
 ## Expected Output
 
-产出一套路由守卫实现，覆盖 loading、未登录、权限不足、登录后回跳和会话过期。验证时直接访问私有 URL、刷新页面、切换角色、篡改 redirect 参数，确认行为稳定且 API 仍有服务端授权。
+Produce a set of routing guard implementations, covering loading, not logged in, insufficient permissions, bounce after login and session expiration. During verification, directly access the private URL, refresh the page, switch roles, and tamper with redirect parameters to confirm that the behavior is stable and the API still has server authorization.

package/skills/fec-security-review/SKILL.md

@@ -1,38 +1,38 @@
 ---
 name: fec-security-review
-description: Use when reviewing frontend security risks such as XSS, CSRF, sensitive data exposure, unsafe DOM APIs, untrusted user input, authentication/token handling, payment flows, file upload, CSP, dependency risk, or third-party scripts; Chinese triggers include 安全审查, 安全检查.
+description: Use when reviewing frontend security risks such as XSS, CSRF, sensitive data exposure, unsafe DOM APIs, untrusted user input, authentication/token handling, payment flows, file upload, CSP, dependency risk, or third-party scripts; Chinese triggers include security review, security check.
 ---
 
-# 前端安全审查
+# Front-end security review
 
 ## Purpose
 
-识别前端代码中的客户端安全风险，并给出可执行修复建议。
+Identify client-side security risks in front-end code and recommend actionable fixes.
 
 ## Procedure
 
-1. 先确认审查面：用户输入、动态 HTML、URL 跳转、认证态、RBAC、文件上传、支付/删除等敏感操作、第三方脚本和依赖。
-2. 搜索高危模式：`dangerouslySetInnerHTML`、`v-html`、`innerHTML`、`document.write`、动态 script、未校验 redirect、明文 token。
-3. 按风险类型审查：XSS、CSP、敏感数据、CSRF、依赖、输入校验、文件上传、开放重定向、认证授权和第三方脚本。
-4. 用边界模型判断责任：客户端只能改善体验和减少误用，鉴权、授权、上传信任和敏感操作必须由服务端最终裁决。
-5. 高危问题标记为阻塞合并；前端校验只能改善体验，不能作为唯一安全边界。
-6. 输出分级安全报告；报告格式见 [references/report-template.md](references/report-template.md)。
+1. First confirm the review areas: user input, dynamic HTML, URL jump, authentication status, RBAC, file upload, payment/deletion and other sensitive operations, third-party scripts and dependencies.
+2. Search for high-risk patterns: `dangerouslySetInnerHTML`, `v-html`, `innerHTML`, `document.write`, dynamic script, unverified redirect, and plain text token.
+3. Review by risk type: XSS, CSP, sensitive data, CSRF, dependencies, input validation, file upload, open redirection, authentication authorization and third-party scripts.
+4. Use the boundary model to determine responsibility: The client can only improve the experience and reduce misuse. Authentication, authorization, upload trust and sensitive operations must be finalized by the server.
+5. High-risk issues are marked as blocking merges; front-end verification can only improve the experience and cannot be used as the only security boundary.
+6. Output a hierarchical security report; see [references/report-template.md](references/report-template.md) for the report format.
 
-## 详细参考
+## Detailed reference
 
-- 需要 XSS、CSP、敏感数据、CSRF、依赖和输入校验细节时，加载 [references/security-checklist.md](references/security-checklist.md)。
-- 撰写安全审查报告时，加载 [references/report-template.md](references/report-template.md)。
+- Load [references/security-checklist.md](references/security-checklist.md) when XSS, CSP, sensitive data, CSRF, dependencies and input validation details are required.
+- When writing a security review report, load [references/report-template.md](references/report-template.md).
 
 ## Constraints
 
-- 不要为了方便开发而绕过安全机制。
-- 不要依赖前端校验作为唯一安全防线。
-- 不要信任任何来自客户端的数据。
-- 发现高危问题时必须标记为阻塞合并。
-- 与通用代码质量 review 分工：本 skill 关注威胁、攻击面和数据泄露。
-- 不把依赖审计结果机械等同为可利用漏洞；需要结合运行路径、暴露面和修复成本判断。
-- 不把隐藏按钮、前端路由守卫或本地角色字段当作授权边界；API、SSR loader、server action 和敏感操作必须有服务端裁决。
+- Don't bypass security mechanisms to facilitate development.
+- Don't rely on front-end validation as your only line of security.
+- Do not trust any data coming from the client.
+- High-risk issues must be marked as blocking merges when found.
+- Separated from general code quality review: This skill focuses on threats, attack surfaces, and data breaches.
+- Do not mechanically equate dependence on audit results with exploitable vulnerabilities; judgments need to be made based on the running path, exposure surface and repair cost.
+- Do not treat hidden buttons, front-end route guards, or local role fields as authorization boundaries; APIs, SSR loaders, server actions, and sensitive operations must have server-side arbitration.
 
 ## Expected Output
 
-输出 CRITICAL/HIGH/MEDIUM/LOW 分级安全审查报告，每个问题关联具体文件和行号，给出修复建议；报告保存为 `reports/security-review-YYYY-MM-DD-HHmmss.md`。
+Output a CRITICAL/HIGH/MEDIUM/LOW graded security review report. Each issue is associated with a specific file and line number, and repair suggestions are given; the report is saved as `reports/security-review-YYYY-MM-DD-HHmmss.md`.

package/skills/fec-security-review/references/report-template.md

@@ -1,27 +1,27 @@
-# 安全审查报告模板
+# Security review report template
 
 ```markdown
-# 安全审查报告
+# Security Review Report
 
-> 生成时间: YYYY-MM-DD HH:mm
-> 评审工具: frontend-craft
+> Generation time: YYYY-MM-DD HH:mm
+> Review tool: frontend-craft
 
-## CRITICAL / 高危 (N项)
-- **[文件:行号]** 风险描述 -> 修复建议
+## CRITICAL / HIGH RISK (N items)
+- **[File:line number]** Risk description -> Repair suggestions
 
-## HIGH / 中高危 (N项)
+## HIGH / Medium to high risk (N items)
 - ...
 
-## MEDIUM / 中危 (N项)
+## MEDIUM / medium risk (N items)
 - ...
 
-## LOW / 低危或建议 (N项)
+## LOW / low risk or recommended (N items)
 - ...
 
-## 已通过的安全检查
+## Passed security check
 - ...
 
-**整体安全等级**: 安全 / 存在风险 / 高危需修复
+**Overall security level**: safe / risky / high risk and needs to be repaired
 ```
 
-审查完成后，将报告保存到 `reports/security-review-YYYY-MM-DD-HHmmss.md`，并告知用户报告路径。
+After the review is completed, save the report to `reports/security-review-YYYY-MM-DD-HHmmss.md` and inform the user of the report path.

package/skills/fec-security-review/references/security-checklist.md

@@ -1,12 +1,12 @@
-# 前端安全审查清单
+# Front-end security review checklist
 
 ## XSS
 
-- `dangerouslySetInnerHTML` 和 `v-html` 必须有明确理由和输入净化。
-- 用户输入不得直接插入 DOM、`innerHTML`、`document.write`。
-- URL 参数不得直接用于页面渲染。
-- 动态生成的 `<script>` 标签必须审查来源。
-- 富文本使用 DOMPurify 等库，并配置标签、属性、协议白名单。
+- `dangerouslySetInnerHTML` and `v-html` must have explicit reason and input sanitization.
+- User input must not be inserted directly into the DOM, `innerHTML`, `document.write`.
+- URL parameters must not be used directly in page rendering.
+- Dynamically generated `<script>` tags must be sourced.
+- Rich text uses libraries such as DOMPurify and configures tags, attributes, and protocol whitelists.
 
 ```ts
 import DOMPurify from "dompurify";
@@ -18,7 +18,7 @@ const clean = DOMPurify.sanitize(dirtyHtml, {
 });
 ```
 
-## 安全重定向
+## Safe redirection
 
 ```ts
 function safeRedirect(url: string): string {
@@ -29,36 +29,36 @@ function safeRedirect(url: string): string {
 
 ## CSP
 
-- 推荐先用 `Content-Security-Policy-Report-Only` 验证。
-- `default-src 'self'`、`object-src 'none'`、`frame-ancestors 'none'`、`base-uri 'self'` 是常见底线。
-- 避免 `'unsafe-eval'`；内联脚本优先 nonce。
+- It is recommended to verify with `Content-Security-Policy-Report-Only` first.
+- `default-src 'self'`, `object-src 'none'`, `frame-ancestors 'none'`, `base-uri 'self'` are common bottom lines.
+- Avoid `'unsafe-eval''; inline scripts take precedence over nonce.
 
 ```http
 Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';
 ```
 
-## 敏感数据
+## Sensitive data
 
-- 禁止前端硬编码 API Key、Secret、密码。
-- 禁止 localStorage/sessionStorage/IndexedDB 存明文 token、密码、信用卡信息。
-- 禁止 URL query 参数传 token 或密码。
-- 禁止 console.log 或错误上报携带隐私数据。
-- Token 优先 httpOnly + Secure + SameSite cookie。
+- It is prohibited to hard-code API Key, Secret, and password on the front end.
+- LocalStorage/sessionStorage/IndexedDB is prohibited from storing plain text tokens, passwords, and credit card information.
+- Prohibit URL query parameters from passing token or password.
+- Console.log or error reports are prohibited from carrying private data.
+- Token priority httpOnly + Secure + SameSite cookie.
 
 ## CSRF
 
-- 变更操作必须携带 CSRF token 或使用同等后端防护。
-- 关键操作不要使用 GET。
-- 检查后端是否校验 `Origin` / `Referer`。
+- Change operations must carry CSRF tokens or use equivalent backend protection.
+- Do not use GET for critical operations.
+- Check whether the backend verifies `Origin` / `Referer`.
 
-## 依赖与第三方脚本
+## Dependencies and third-party scripts
 
-- 定期审查依赖安全公告。
-- 禁止从非官方 CDN 加载脚本，除非有 SRI 和来源审查。
-- 动态加载第三方脚本必须有业务必要性和降级策略。
+- Regularly review dependency security bulletins.
+- Disallow script loading from unofficial CDNs unless SRI and source vetted.
+- Dynamically loading third-party scripts must have business necessity and a downgrade strategy.
 
-## 输入校验与文件上传
+## Input verification and file upload
 
-- 前端校验不是安全边界，后端必须二次校验。
-- 文件上传校验 MIME、大小、扩展名和内容；不能只看扩展名。
-- 正则校验注意 ReDoS 风险。
+- Front-end verification is not a security boundary, and the back-end must be verified twice.
+- File uploads verify MIME, size, extension and content; don't just look at the extension.
+- Pay attention to ReDoS risks in regular verification.