[SOLVED] Refused to connect to 'ws://localhost:3000/cpp' because it violates the following Content Security Policy directive:

Issue

How do I solve this error? where/how do I set those settings? I’m new to electron/react

Refused to connect to ‘ws://localhost:3000/cpp’ because it violates
the following Content Security Policy directive: "default-src ‘self’
‘unsafe-inline’ data:". Note that ‘connect-src’ was not explicitly
set, so ‘default-src’ is used as a fallback.

I’m using electron + react and electron-forge build system. I’ve tried using this in froge.config.js:

 plugins: [
    [
      "@electron-forge/plugin-webpack",
      {
        devServer: {
          allowedHosts: 'auto'
        }

         // rest of config 
    ]
  ]

even this piece of HTML:

<meta http-equiv="Content-Security-Policy" content="default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;">

But none worked. What am I missing?

Solution

WebpackPluginRendererConfig

/**
     * Sets the [`Content-Security-Policy` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)
     * for the Webpack development server.
     *
     * Normally you would want to only specify this as a `<meta>` tag. However, in development mode,
     * the Webpack plugin uses the `devtool: eval-source-map` source map setting for efficiency
     * purposes. This requires the `'unsafe-eval'` source for the `script-src` directive that wouldn't
     * normally be recommended to use. If this value is set, make sure that you keep this
     * directive-source pair intact if you want to use source maps.
     *
     * Default: `default-src 'self' 'unsafe-inline' data:;`
     * `script-src 'self' 'unsafe-eval' 'unsafe-inline' data:`
     */
    devContentSecurityPolicy?: string;

So this should fix the problem

 plugins: [
        [
          "@electron-forge/plugin-webpack",
          {
            devServer: {
              allowedHosts: 'auto'
            },
            devContentSecurityPolicy: "connect-src 'self' ws://localhost:3000/cpp 'unsafe-eval'",
    
             // rest of config 
        ]
      ]

Answered By – Damian Busz

Answer Checked By – Timothy Miller (BugsFixing Admin)

Leave a Reply

Your email address will not be published.