🇺🇸

Original

English

🇨🇳

Translation

Chinese

General Frontend Security

通用前端安全

Framework-agnostic security practices for web applications based on OWASP guidelines.

基于OWASP指南的Web应用无框架安全实践。

When to Use This Skill

何时使用此技能

Reviewing frontend code for security vulnerabilities
Implementing client-side authentication flows
Setting up secure cookie handling
Configuring Content Security Policy
Auditing third-party dependencies
General frontend security questions

审查前端代码中的安全漏洞
实现客户端认证流程
配置安全Cookie处理机制
配置内容安全策略（CSP）
审计第三方依赖
通用前端安全问题

Skill Boundaries

技能边界

User Intent	Correct Skill
"XSS prevention best practices"	THIS SKILL
"Security audit of frontend"	THIS SKILL
"Configure CSP headers"	THIS SKILL
"Build a secure login page in Nuxt"	developing-lt-frontend
"Fix @Restricted decorator in NestJS"	generating-nest-servers
"Run npm audit fix"	maintaining-npm-packages

用户意图	对应技能
"XSS防护最佳实践"	本技能
"前端安全审计"	本技能
"配置CSP标头"	本技能
"在Nuxt中构建安全登录页面"	developing-lt-frontend
"修复NestJS中的@Restricted装饰器"	generating-nest-servers
"运行npm audit fix"	maintaining-npm-packages

Framework-Specific References

框架特定参考

Framework	Reference File
Nuxt/Vue	../developing-lt-frontend/reference/security.md
Angular	angular-security.md

框架	参考文件
Nuxt/Vue	../developing-lt-frontend/reference/security.md
Angular	angular-security.md

Key Principles

核心原则

Never trust client-side validation - Server must always verify
Store tokens securely - Memory for access tokens, httpOnly cookies for refresh tokens
Prevent XSS - Never use
```
innerHTML
```
with user input; use
```
textContent
```
or DOMPurify
Protect against CSRF - Use CSRF tokens for state-changing requests +
```
SameSite
```
cookies
Configure CSP - Restrict script/style sources, use nonces, block framing
Minimize dependencies - Fewer deps = smaller attack surface; always run
```
npm audit
```

Complete OWASP reference with code examples: owasp-reference.md

绝不信任客户端验证 - 服务器必须始终进行验证
安全存储令牌 - 访问令牌存储在内存中，刷新令牌存储在httpOnly Cookie中
防范XSS - 切勿将
```
innerHTML
```
用于用户输入；请使用
```
textContent
```
或DOMPurify
防护CSRF - 对状态变更请求使用CSRF令牌，并配置
```
SameSite
```
Cookie
配置CSP - 限制脚本/样式源，使用随机数（nonce），阻止页面嵌套
最小化依赖 - 依赖越少，攻击面越小；请始终运行
```
npm audit
```

包含代码示例的完整OWASP参考：owasp-reference.md

Security Checklist

安全检查清单

Development

开发阶段

No sensitive data in client-side code
Environment variables separated (public vs private)
Input validation on all user inputs
XSS prevention (no innerHTML with user data)
CSRF tokens for state-changing requests

客户端代码中无敏感数据
环境变量分离（公开与私有）
对所有用户输入进行验证
XSS防护（不使用innerHTML处理用户数据）
对状态变更请求使用CSRF令牌

Authentication

认证环节

Tokens stored securely (memory + httpOnly cookies)
Token refresh mechanism implemented
Proper logout (clear all client state)
Session timeout configured

令牌安全存储（内存 + httpOnly Cookie）
实现令牌刷新机制
正确实现登出（清除所有客户端状态）
配置会话超时

Configuration

配置阶段

HTTPS enforced
CSP headers configured
Security headers set (X-Frame-Options, etc.)
Cookies configured with secure flags
CORS properly restricted

Dependencies

依赖管理

npm audit clean (or accepted risks)
package-lock.json committed
SRI for external resources
Regular dependency updates

npm audit无风险（或已接受已知风险）
提交package-lock.json文件
为外部资源配置子资源完整性（SRI）
定期更新依赖

Build & Deploy

构建与部署

Debug mode disabled
Console logs removed
Source maps disabled or restricted
Error messages generic (no stack traces)

禁用调试模式
移除控制台日志
禁用或限制源映射（Source maps）
错误消息通用化（不包含堆栈跟踪）

general-frontend-security