claude-workspace: Skill for Claude Code

Frontend Security Audit

Threat Model for Frontend Apps

Threat	Vector	Impact
XSS	User input rendered as HTML/JS	Session hijack, data theft, defacement
Injection	Dynamic URLs, eval(), innerHTML	Code execution, redirects
CSRF	Forged requests from other sites	Unauthorized actions
Secrets Exposure	API keys in client bundle	Account compromise, billing abuse
Dependency Vulns	Outdated packages with CVEs	Supply chain attacks
Clickjacking	Iframe embedding	UI redress attacks
Open Redirects	Unvalidated redirect URLs	Phishing, credential theft

Audit Checklist

1. XSS Prevention

# Find dangerouslySetInnerHTML usage
grep -rn 'dangerouslySetInnerHTML' src/ --include='*.tsx' --include='*.jsx'

# Find direct DOM manipulation
grep -rn 'innerHTML\|outerHTML\|document\.write' src/ --include='*.ts' --include='*.tsx'

# Find eval and dynamic code execution
grep -rn 'eval(\|new Function(\|setTimeout.*string' src/ --include='*.ts' --include='*.tsx'

Rules:

• Never use dangerouslySetInnerHTML without DOMPurify sanitization
• Never use eval(), new Function(), or string-based setTimeout
• Always escape user input before rendering
• Use React's built-in escaping (JSX expressions auto-escape)

// BAD: direct HTML injection
<div dangerouslySetInnerHTML={{ __html: userInput }} />

// GOOD: sanitized
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userInput) }} />

// BEST: avoid entirely, use structured data
<div>{userInput}</div>  // React auto-escapes

2. Secrets & API Keys

# Scan for hardcoded secrets
grep -rn 'sk_live\|pk_live\|AKIA\|ghp_\|password\s*=\|secret\s*=' src/ --include='*.ts' --include='*.tsx' --include='*.js'

# Check for secrets in client-accessible env vars
grep -rn 'NEXT_PUBLIC_.*SECRET\|NEXT_PUBLIC_.*KEY\|VITE_.*SECRET' .env* 2>/dev/null

# Check if .env is gitignored
grep -q '.env' .gitignore || echo "WARNING: .env not in .gitignore"