Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
FranciscoKloganB opened this issue Oct 9, 2023 · 0 comments

Comments

@FranciscoKloganB
Copy link

FranciscoKloganB commented Oct 9, 2023

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 FranciscoKloganB changed the title [new application] does not launch and error with import { ElectronCapacitorConfig } [new app - bug] does not execute correctly and error with import { ElectronCapacitorConfig } Oct 9, 2023
@FranciscoKloganB FranciscoKloganB changed the title [new app - bug] does not execute correctly and error with import { ElectronCapacitorConfig } [new app - bug] does not execute correctly, devtools disconnects Oct 9, 2023
@FranciscoKloganB FranciscoKloganB changed the title [new app - bug] does not execute correctly, devtools disconnects [CSP issues] refuses to load inline styles, I have no ideia what to add anymore. Oct 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant