Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

 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 
        ]
      ]
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading