Skip to content

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

Open
@FranciscoKloganB

Description

@FranciscoKloganB

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions