# 4) Security Measurement
1. **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
2. **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
3. **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
4. **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
5. **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
i**x) 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.