🔧 前端工程化与安全场景决策

// pnpm-workspace.yaml packages: - 'apps/*' // 前端应用 - 'packages/*' // 共享库 // 目录结构 // ├── apps/ // │ ├── web/ → 前端项目 (Vue 3 + Vite) // │ └── admin/ → 管理后台 // ├── packages/ // │ ├── ui/ → 共享 UI 组件库 // │ ├── utils/ → 工具函数 // │ └── types/ → 共享 TypeScript 类型 // └── pnpm-workspace.yaml // apps/web/package.json 引用本地包 { "dependencies": { "@mylib/ui": "workspace:*", "@mylib/utils": "workspace:*" } }

# .github/workflows/ci.yml name: CI on: pull_request: branches: [main] push: branches: [main] jobs: build-and-test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 with: { version: 8 } - uses: actions/setup-node@v4 with: { node-version: 20, cache: 'pnpm' } - run: pnpm install - run: pnpm lint # 代码规范检查 - run: pnpm test # 单元测试 - run: pnpm build # 构建验证

// utils/price.test.ts import { describe, it, expect } from 'vitest'; import { calcDiscount } from './price'; describe('calcDiscount', () => { it('正常折扣', () => { expect(calcDiscount(100, 0.8)).toBe(80); }); it('折扣为0时返回0', () => { expect(calcDiscount(100, 0)).toBe(0); }); it('负数价格抛错', () => { expect(() => calcDiscount(-1, 0.8)).toThrow(); }); });

// 1. Vue 中自动转义（默认安全） // ✅ {{ userInput }} — 自动转义 // ❌ v-html="userInput" — 危险！ // 2. 必须渲染HTML时用 DOMPurify import DOMPurify from 'dompurify'; const safeHTML = DOMPurify.sanitize(userRichText); // 过滤掉 <script>、onerror 等，保留安全的 HTML 标签 // 3. URL 参数转义 const safeURL = encodeURIComponent(userInput); // 4. Spring Boot 后端转义 // 依赖: org.unbescape:unbescape String safe = HtmlEscape.escapeHtml4(userInput); // 5. Cookie 设置 HttpOnly // Spring Boot @Bean public CookieSerializer cookieSerializer() { DefaultCookieSerializer s = new DefaultCookieSerializer(); s.setCookieHttpOnly(true); // JS 无法读取 return s; }

// Spring Security 默认开启 CSRF // 表单提交时需要带 _csrf 参数 // 前端 Axios 自动带 CSRF Token axios.defaults.xsrfCookieName = 'XSRF-TOKEN'; axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN'; // 如果用 JWT Token 认证，可以关闭 CSRF（因为不用 Cookie） @Configuration public class SecurityConfig { @Bean public SecurityFilterChain filterChain(HttpSecurity http) { http.csrf(csrf -> csrf.disable()); // JWT 时关闭 } }

// Nginx 配置 CSP Header add_header Content-Security-Policy " default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.example.com; font-src 'self' https://fonts.googleapis.com; frame-src 'none'; "; // Spring Boot 配置 @Bean public WebSecurityCustomizer cspCustomizer() { return web -> web.httpStrictTransportSecurity() .addHeaderWriter(new ContentSecurityPolicyHeaderWriter( "default-src 'self'; script-src 'self'" )); }

// Commit Message 格式 // <type>(<scope>): <subject> // // type: // feat: 新功能 // fix: 修复bug // docs: 文档 // style: 格式（不影响逻辑） // refactor: 重构 // perf: 性能优化 // test: 测试 // chore: 构建/工具 // // 示例: // feat(订单): 新增批量导出功能 // fix(登录): 修复Token过期后无限刷新 // perf(列表): 虚拟滚动优化大数据渲染 // 安装 commitlint + husky // npm install -D @commitlint/cli @commitlint/config-conventional husky // npx husky init // echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg // commitlint.config.js export default { extends: ['@commitlint/config-conventional'] };