4) Security Measurement

What “security” means for a React app
XSS (Cross-Site Scripting) — injecting malicious scripts
Token leakage — JWT in localStorage, exposed APIs
Insecure API usage — missing auth, improper validation
Dependency vulnerabilities — unsafe npm packages
Misconfigured headers — no CSP, weak cookies
Data exposure — secrets in code or network calls

How to “measure” security (approaches)
i) Static Analysis (SAST)
Scan your source code for vulnerabilities without running it.
Detects:
XSS-prone patterns
unsafe DOM usage (dangerouslySetInnerHTML)
insecure coding patterns
Output:
Number of vulnerabilities
Severity (low/medium/high/critical)
ii) Dynamic Testing (DAST)
Test the running app like a hacker would.
Detects:
XSS
CSRF
broken authentication
misconfigured headers
iii) Dependency Scanning
Checks npm packages for known CVEs.
Measures:
Vulnerable packages
Severity
Fix availability
iv) Configuration & Headers Audit
Validate browser security controls.
CSP (Content Security Policy)
HSTS
X-Frame-Options
Secure cookies
v) Authentication & Authorization Testing
Validate:
Token handling (JWT)
Role-based access
Session management
vi) Penetration Testing (Manual)
Human-driven testing:
Business logic flaws
API abuse
privilege escalation
vii) Security Metrics (What you track)
# of vulnerabilities by severity
Mean time to fix (MTTR)
Dependency risk score
Security header score
OWASP compliance

Practical Security Measurement Workflow
Step 1: Scan code
ESLint + SonarQube
Step 2: Scan dependencies
npm audit / Snyk
Step 3: Run app
scan OWASP ZAP
Step 4: Check headers Security
Headers / Mozilla Observatory
Step 5: Manual testing
Auth flows, edge cases
Step 6: Monitor production
Sentry / Datadog

React-Specific Security Checks
i) XSS Prevention
Avoid dangerouslySetInnerHTML
Sanitize user input
ii) Token Security
Avoid localStorage for sensitive tokens
Prefer HTTP-only cookies
iii) API Security
Always validate backend
Never trust frontend
iv) Dependency Risk
Keep packages updated

Security Checklist
Here’s a production-grade React security checklist you can actually use in real projects and interviews. It’s organized by layers so you can systematically verify your app.
i) Authentication & Session Security
Do:
Use short-lived access tokens (10–15 min)
Store refresh tokens in HTTP-only, Secure cookies
Implement token rotation (refresh token changes on every use)
Invalidate tokens on logout (server-side)
Avoid:
Storing sensitive tokens in localStorage (XSS risk)
Long-lived JWTs with no expiry
ii) Authorization (Access Control)
Do:
Implement role-based access control (RBAC) in UI and backend
Validate permissions on every API request
Hide UI elements based on roles (but don’t rely on it for security)
Avoid:
Trusting frontend-only checks
iii) XSS (Cross-Site Scripting) Protection
Do:
Rely on React’s built-in escaping
Sanitize user-generated content before rendering
Use libraries like: DOMPurify
Avoid:
dangerouslySetInnerHTML (unless sanitized)
Injecting raw HTML from APIs
iv) CSRF (Cross-site request forgery) Protection
Do:
Use SameSite cookies (Strict or Lax)
Use CSRF tokens if cookies are used for auth
Validate origin/referrer on backend
v) Secure API Communication
Do:
Always use HTTPS
Send JWT in Authorization header
Validate all inputs on backend
Use API rate limiting
Avoid:
Exposing internal APIs publicly
Trusting client-side validation
vi) Dependency Security
Do:
Regularly run: npm audit
Use: Snyk, Dependabot
Keep dependencies updated
Avoid:
Using unmaintained packages
vii) Environment Variables & Secrets
Do:
Store secrets in .env files (never commit them)
Use server-side secrets for sensitive keys
Prefix only safe variables with REACT_APP_
Avoid:
Putting API keys directly in frontend code
viii) Security Headers
Configure via backend/CDN
Must-have headers:
Content Security Policy (CSP)
X-Frame-Options
X-Content-Type-Options
Strict-Transport-Security (HSTS)
Test using:
Security Headers Mozilla Observatory
ix) Input Validation & Data Handling
Do:
Validate all inputs on backend
Sanitize outputs before rendering
Escape dynamic content
Avoid:
Trusting user input (even from your own UI)
x) Network & Storage Security
Do:
Avoid storing sensitive data in: localStorage, sessionStorage
Use secure cookies for auth
Inspect via:
Google Chrome DevTools
xi) Testing & Scanning
Use:
Static Analysis - ESLint (with security plugins), SonarQube
Dynamic Testing - OWASP ZAP, Burp Suite
xii) Monitoring & Logging
Do:
Track errors and suspicious activity using: Sentry
Monitor API failures and unusual patterns
xiii) Follow Industry Standards
Use:
OWASP Top 10
Key risks:
Broken Authentication
XSS
Security Misconfiguration
Sensitive Data Exposure**
xiv) Build & Deployment Security**
Do:
Minify and obfuscate code
Remove source maps in production (or restrict access)
Enable CI/CD security checks
Scan build artifacts
xv) Common Real-World Mistakes
JWT stored in localStorage → XSS risk
No backend validation → easy API abuse
Missing CSP → XSS attacks succeed
Exposed .env → leaked secrets
No dependency scanning → vulnerable packages
xvi) Final Mental Model
Code → prevent XSS
Auth → secure tokens
Network → HTTPS + headers
Dependencies → no vulnerable libs
Monitoring → detect issues
In production React apps, I ensure security by combining XSS protection, secure token handling (HTTP-only cookies), dependency scanning, strict security headers, backend validation, and continuous monitoring aligned with OWASP standards.