general-frontend-security
Framework-agnostic frontend security guide based on OWASP Secure Coding Practices. Covers XSS prevention, CSRF protection, Content Security Policy (CSP), secure cookie configuration, client-side authentication patterns, input validation, secure storage, and security headers. Activates for security audits, vulnerability reviews, or browser security questions in any web application. NOT for backend/NestJS security (use generating-nest-servers). NOT for Nuxt-specific implementation (use developing-lt-frontend).
Resources
2Install
npx skillscat add lennetech/claude-code/general-frontend-security Install via the SkillsCat registry.
SKILL.md
General Frontend Security
Framework-agnostic security practices for web applications based on OWASP guidelines.
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
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 |
Framework-Specific References
| Framework | Reference File |
|---|---|
| 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
innerHTMLwith user input; usetextContentor DOMPurify - Protect against CSRF - Use CSRF tokens for state-changing requests +
SameSitecookies - 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
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
Authentication
- Tokens stored securely (memory + httpOnly cookies)
- Token refresh mechanism implemented
- Proper logout (clear all client state)
- Session timeout configured
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
Build & Deploy
- Debug mode disabled
- Console logs removed
- Source maps disabled or restricted
- Error messages generic (no stack traces)
Install
npx skillscat add lennetech/claude-code/general-frontend-security Install via the SkillsCat registry.