electron icon indicating copy to clipboard operation
electron copied to clipboard

[CSP issues] refuses to load inline styles, I have no ideia what to add anymore.

Open FranciscoKloganB opened this issue 9 months ago • 0 comments

Describe the bug

I have two issues with a newly created application.

  • I have created a new react-vite ionic project using their CLI
  • Following getting started guide, I installed @capacitor-community/electron with npm
  • Created a dist folder using vite build via pnpm build
  • Executed npx cap add @capacitor-community/electron
    • Electron folder was created
  • Executed npm run dev and npm run serve
    • Web application launches with blank project (ionic default blank template)
  • Executed npx cap open @capacitor-community/electron
    • Electron app launches correctly and renders correctly (until I click anything on the screen)

The main issue

  • If I click anywhere on the screen the application goes blank or alt-tab and come back the application goes completly blank (stops rendering the header and a hello world paragraph) and devtools disconnects. This happens even if I do not invoke setupContentSecurityPolicy in index.ts

The Content Security Policy Issue

With respect to the CSP errors on the console I changed the setup.ts file to the below but the error remains

// Set a CSP up for our application based on the custom scheme
export function setupContentSecurityPolicy(customScheme: string): void {
  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
    callback({
      responseHeaders: {
        ...details.responseHeaders,
        'Content-Security-Policy': [
          electronIsDev
            ? `default-src ${customScheme}://\* 'unsafe-inline' devtools://\* https://\* 'unsafe-eval' http://\* data: ; style-src 'self' 'unsafe-inline' ${customScheme}://\* https://\* http://\* ws://\*`
            // : `default-src ${customScheme}://\* 'unsafe-inline' https://\* data: `,
            : `default-src ${customScheme}://\* 'unsafe-inline' data: https://\* ; style-src 'self' 'unsafe-inline' ${customScheme}://\* https://\*  ws://\*`

        ],
      },
    });
  });
}

Screenshot of CSP errors. I do not even know what is violating the rule at this point.

image

FranciscoKloganB avatar Oct 09 '23 08:10 FranciscoKloganB