Configuring CSP for React Development

Configuring CSP for React Development

Development environments require more permissive CSP policies to accommodate development tools while still providing meaningful security boundaries. Here's how to configure CSP for React development:

// webpack.config.js - Development CSP configuration
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devServer: {
    headers: {
      'Content-Security-Policy': 
        "default-src 'self'; " +
        "script-src 'self' 'unsafe-inline' 'unsafe-eval'; " +
        "style-src 'self' 'unsafe-inline'; " +
        "img-src 'self' data: blob:; " +
        "font-src 'self'; " +
        "connect-src 'self' ws://localhost:* http://localhost:*; " +
        "worker-src 'self' blob:;"
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      // Inject CSP meta tag for development
      meta: {
        'Content-Security-Policy': {
          'http-equiv': 'Content-Security-Policy',
          content: "default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';"
        }
      }
    })
  ]
};

For Create React App projects, use environment-based CSP configuration:

// setupProxy.js (for Create React App)
module.exports = function(app) {
  app.use(function(req, res, next) {
    if (process.env.NODE_ENV === 'development') {
      res.setHeader(
        'Content-Security-Policy',
        "default-src 'self'; " +
        "script-src 'self' 'unsafe-inline' 'unsafe-eval'; " +
        "style-src 'self' 'unsafe-inline'; " +
        "connect-src 'self' ws://localhost:3000"
      );
    }
    next();
  });
};