CSP for Single Page Applications

CSP for Single Page Applications

SPAs require special CSP considerations:

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      cspPlugin: {
        enabled: true,
        policy: {
          'default-src': "'self'",
          'script-src': ["'self'", "'nonce-{nonce}'"],
          'style-src': ["'self'", "'unsafe-inline'"] // For CSS-in-JS
        },
        hashEnabled: {
          'script-src': true,
          'style-src': false
        },
        nonceEnabled: {
          'script-src': true,
          'style-src': true
        }
      }
    })
  ]
};