CSP Configuration for React Apps

CSP for React Applications

React applications have specific CSP requirements due to their rendering model, CSS-in-JS usage, and build tooling. A well-configured CSP protects your React app without breaking its functionality.

Baseline Policy for React

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self' https://api.example.com

Most React apps need:

• script-src 'self' — bundled JavaScript files
• style-src 'self' 'unsafe-inline' — for CSS-in-JS libraries (ideally use nonces instead)
• img-src 'self' data: — for inline images and icons
• connect-src — for API endpoints

CSS-in-JS Libraries

styled-components injects <style> tags at runtime. Without CSP support:

style-src 'unsafe-inline'   // Works but insecure

With nonce support (styled-components v5+):

// Server-side: pass nonce to StyleSheetManager
import { StyleSheetManager } from 'styled-components';
<StyleSheetManager nonce={nonce}>
  <App />
</StyleSheetManager>

Emotion / MUI also supports nonces via the CacheProvider:

import createCache from '@emotion/cache';
const cache = createCache({ key: 'css', nonce: nonce });

Create React App (CRA)

CRA's development server uses inline scripts for Hot Module Replacement. For development:

script-src 'self' 'unsafe-eval' 'unsafe-inline'

For production builds, CRA generates external script files, so you can use a strict policy:

script-src 'self'

If using INLINE_RUNTIME_CHUNK=false in .env, CRA will not inline the Webpack runtime, making a strict script-src fully compatible.

React Helmet for Meta CSP

While the <meta> tag approach has limitations (no report-uri, no frame-ancestors), React Helmet can set a CSP meta tag for SPAs without server control:

<Helmet>
  <meta httpEquiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self'" />
</Helmet>

Common React Library Requirements

Library	CSP Requirement
React Router	No special CSP needed
Redux	No special CSP needed
styled-components	style-src nonce or 'unsafe-inline'
Material UI	style-src nonce (Emotion)
React Query	connect-src for API origins
Recharts/D3	style-src 'unsafe-inline' or nonce for dynamic SVG styles

Production Checklist

1. Remove 'unsafe-eval' (not needed in production React)
2. Replace 'unsafe-inline' with nonces for style-src
3. Verify all API endpoints are in connect-src
4. Test with report-only mode before enforcing