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)