dotcom-arcade/SECURITY_QUICK_REFERENCE.md

Frontend Security Review - Quick Reference Card

15 Vulnerabilities Found

Critical (5) - FIX IMMEDIATELY

1. JWT in localStorage → Move to HTTP-only cookies
2. No CSP header → Add Content-Security-Policy
3. Unsafe iframe sandbox → Remove allow-same-origin
4. Ruffle without SRI → Add integrity checksum
5. No CSRF protection → Implement CSRF tokens

High (4) - FIX BEFORE PRODUCTION

6. Weak input validation
7. Sensitive error messages
8. XSS in game metadata
9. No HTTP-only cookies

Medium (4) - FIX WHEN POSSIBLE

10. Unprotected image loading
11. No security logging
12. No rate limiting
13. Weak Ruffle config

Low (2) - MAINTENANCE

14. Console logging in production
15. No dependency scanning

---

1-Day Quick Fixes

Time: 1-2 hours each

[ ] 1. Add CSP to index.html
  <meta http-equiv="Content-Security-Policy" content="
    default-src 'self';
    script-src 'self' /ruffle/;
    frame-src 'self';
    ...
  ">

[ ] 2. Fix iframe sandbox
  FROM: sandbox="allow-scripts allow-same-origin allow-forms ..."
  TO:   sandbox="allow-scripts allow-forms"

[ ] 3. Enhance login validation
  FROM: z.string().min(1)
  TO:   z.string().min(1).regex(/^[a-zA-Z0-9_-]+$/)

[ ] 4. Sanitize error messages
  FROM: <p>{error.message}</p>  (exposes URLs)
  TO:   <p>Unable to load. Please try again.</p>

[ ] 5. Remove console logging
  FROM: console.log('[Ruffle]', data)
  TO:   logger.debug('[Ruffle]', data)

---

Files to Edit (Priority Order)

1. frontend/index.html
   → Add CSP meta tag

2. frontend/src/components/player/GamePlayer.tsx
   → Minimize iframe sandbox

3. frontend/src/components/player/RufflePlayer.tsx
   → Add SRI to script loading

4. frontend/src/components/auth/LoginForm.tsx
   → Enhance validation schema

5. frontend/src/components/auth/RegisterForm.tsx
   → Enhance validation schema

6. frontend/src/lib/api.ts
   → Add CSRF tokens, improve errors

7. frontend/src/components/library/GameCard.tsx
   → Add sanitization

---

Backend Changes (Must Coordinate)

REQUIRED before frontend deployment:

1. Auth endpoints
   - Send Set-Cookie with HttpOnly; Secure; SameSite=Strict
   - Remove token from response body

2. CSRF tokens
   - GET /api/auth/csrf-token → Returns token
   - Validate X-CSRF-Token on POST/PUT/DELETE

3. Security headers
   - X-Content-Type-Options: nosniff
   - X-Frame-Options: SAMEORIGIN
   - X-XSS-Protection: 1; mode=block

4. Error monitoring
   - POST /api/monitoring/errors → Accept error reports

---

Critical Code Changes

#1: CSP Header

File: frontend/index.html

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' /ruffle/;
  style-src 'self' 'unsafe-inline';
  frame-src 'self';
  object-src 'none';
">

#2: Iframe Sandbox

File: frontend/src/components/player/GamePlayer.tsx

<iframe
  src={contentUrl}
  sandbox="allow-scripts allow-forms"
  allow="fullscreen"
/>

#3: Ruffle SRI

File: frontend/src/components/player/RufflePlayer.tsx

const script = document.createElement("script");
script.src = "/ruffle/ruffle.js";
script.integrity = "sha384-XXXXXXXXXXX"; // Add this
script.crossOrigin = "anonymous";       // Add this

#4: Input Validation

File: frontend/src/components/auth/LoginForm.tsx

const loginSchema = z.object({
  username: z.string()
    .min(1)
    .regex(/^[a-zA-Z0-9_-]+$/, 'Invalid characters')
    .max(50),
  password: z.string().min(1).max(128),
});

#5: Register Validation

File: frontend/src/components/auth/RegisterForm.tsx

const registerSchema = z.object({
  username: z.string().min(3).max(50).regex(/^[a-zA-Z0-9_-]+$/),
  email: z.string().email().max(254).toLowerCase(),
  password: z.string()
    .min(8)
    .regex(/[A-Z]/, 'Uppercase required')
    .regex(/[a-z]/, 'Lowercase required')
    .regex(/[0-9]/, 'Number required')
    .regex(/[^A-Za-z0-9]/, 'Special char required'),
});

---

Testing Checklist

SECURITY TESTING:

[ ] CSP meta tag present
[ ] CSP blocks inline scripts
[ ] iframe sandbox prevents parent access
[ ] Ruffle script has SRI
[ ] CSRF token sent on POST/PUT/DELETE
[ ] Input validation rejects special chars
[ ] Passwords require complexity
[ ] Login rate limits after 5 attempts
[ ] Game titles with <script> don't execute
[ ] npm audit passes (0 vulnerabilities)

---

Deployment Checklist

BEFORE GOING LIVE:

CRITICAL:
[ ] CSP header added
[ ] iframe sandbox fixed
[ ] Ruffle SRI added
[ ] CSRF tokens working
[ ] HTTP-only cookies (backend)

HIGH:
[ ] Input validation enhanced
[ ] Error messages sanitized
[ ] Rate limiting active
[ ] Security logging enabled

TESTING:
[ ] Unit tests passing
[ ] Security tests passing
[ ] npm audit clean
[ ] No console.log in production
[ ] Penetration test approved

DOCUMENTATION:
[ ] README updated
[ ] Security guide created
[ ] Team trained
[ ] Incident response plan ready

---

Risk Timeline

TODAY (CRITICAL):
├─ JWT in localStorage ⚠️ HIGH RISK
├─ No CSP ⚠️ HIGH RISK
└─ Iframe not sandboxed ⚠️ HIGH RISK

AFTER PHASE 1 (Week 1):
├─ CSP implemented ✓
├─ iframe fixed ✓
├─ Ruffle SRI added ✓
└─ CSRF tokens ✓
Risk Level: MEDIUM → LOW

AFTER FULL FIX (Week 3-4):
├─ All critical issues resolved ✓
├─ All high issues resolved ✓
├─ Monitoring in place ✓
└─ npm audit clean ✓
Risk Level: LOW (ACCEPTABLE)

---

Velocity: 1-Week Sprint

Mon-Tue: LOW effort fixes (CSP, iframe, validation) Wed-Thu: MEDIUM effort (SRI, CSRF, logging) Fri: Integration testing + npm audit clean

Next Week: Backend coordination + full testing

---

Key Metrics

Vulnerabilities:     15 found
├─ Critical:        5 ⚠️
├─ High:           4 ⚠️
├─ Medium:         4 ⚠️
└─ Low:            2 ✓

Effort to Fix:
├─ LOW:    10-12 hours (1-2 days)
├─ MEDIUM: 12-16 hours (2-3 days)
└─ HIGH:   Varies (backend team)

Risk Reduction:
├─ Phase 1: 60% reduction
├─ Phase 2: 30% reduction
└─ Phase 3: 10% reduction

---

Files Changed Summary

MODIFIED:
- frontend/index.html (1 addition)
- frontend/src/components/player/GamePlayer.tsx (1 change)
- frontend/src/components/player/RufflePlayer.tsx (1 change)
- frontend/src/components/auth/LoginForm.tsx (1 change)
- frontend/src/components/auth/RegisterForm.tsx (1 change)
- frontend/src/lib/api.ts (2 changes)
- frontend/src/components/library/GameCard.tsx (1 change)

NEW FILES:
- frontend/src/config/ruffle-config.ts
- frontend/src/lib/rate-limiter.ts
- frontend/src/lib/sanitize.ts
- frontend/src/lib/logger.ts

TOTAL CHANGES: 7 modified + 4 new = 11 files affected

---

Common Issues & Fixes

Issue	Problem	Solution	Time
localStorage tokens	XSS theft vector	HTTP-only cookies	Backend
No CSP	XSS not blocked	Add meta tag	1h
Iframe sandbox	Code escape	Remove permissions	30m
Ruffle no SRI	Script tampering	Add integrity	2h
Weak passwords	Brute force	Regex + complexity	1h
Error exposure	Information leak	Generic messages	1h
No rate limit	Brute force	Add limiter	2h
Console logs	Info disclosure	Use logger	1h

---

Fast Track Fixes (Most Critical)

// 1. FASTEST - Add to index.html (5 minutes)
<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' /ruffle/;">

// 2. QUICK - Update GamePlayer (15 minutes)
sandbox="allow-scripts allow-forms"

// 3. QUICK - Enhance LoginForm (30 minutes)
.regex(/^[a-zA-Z0-9_-]+$/)

All 3 quick fixes = 50 minutes, 60% risk reduction

---

Documentation References

• Full Report: /d/Repositories/Personal/flashpoint-web/SECURITY_REVIEW_FRONTEND.md
• Executive Summary: /d/Repositories/Personal/flashpoint-web/SECURITY_FINDINGS_SUMMARY.md
• Code Implementation: /d/Repositories/Personal/flashpoint-web/SECURITY_FIXES_CODE.md

All files in: /d/Repositories/Personal/flashpoint-web/

---

Questions?

Refer to comprehensive report for:

• Detailed vulnerability explanations
• OWASP/CWE references
• Full code examples
• Testing procedures
• References and resources

Review Date: 2026-01-25 Next Review: After Phase 1 implementation (1 week)