Security headers for React
medium7 checks
Security headers are the instructions a server sends with every response. When they are missing, the browser cannot enforce protections the application actually relies on.
What React must have
- Content-Security-Policy with a per-request nonce, no 'unsafe-inline' in script-src
- Strict-Transport-Security with max-age of at least one year and includeSubDomains
- X-Frame-Options: DENY or CSP frame-ancestors 'none'
- X-Content-Type-Options: nosniff on every response
- Referrer-Policy: strict-origin-when-cross-origin
- Permissions-Policy disabling camera, microphone and geolocation
- Cross-Origin-Opener-Policy: same-origin
How to fix it
- 1Set headers in middleware or at the edge so static assets and error pages get them too
- 2Generate the CSP nonce per request and mirror it into the HTML through your framework's headers API
- 3Never test only the home page: check HTML, API and 404 responses
React context
JavaScript UI library. Renders in the browser; data comes from APIs.
React escapes output by default; risk moves to dangerouslySetInnerHTML, unsanitised href/src, and secrets bundled into client JS.