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 |

Related Skills & Commands

| Command | Purpose | |---------|---------| | /lt-dev:review | General security review of branch diff (framework-agnostic) | | /lt-dev:backend:sec-review | Security review of backend code changes (auth, decorators, models) | | /lt-dev:backend:sec-audit | Full OWASP security audit (dependencies, config, code) |

Framework-Specific References

| Framework | Reference File | |-----------|---------------| | Nuxt/Vue | See developing-lt-frontend skill (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 pnpm 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

[ ] pnpm audit clean (or accepted risks)
[ ] pnpm-lock.yaml 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)