How to make build work with Chrome extensions CSP restrictions?

[michaelaflores]

I recently changed a Chrome extension I build from a Create React App-based build to Preact using preact-cli. I have been running into an error:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

CSP set via meta tag:

    <meta
      http-equiv="Content-Security-Policy"
      content="img-src https://images.unsplash.com 'self' data:; script-src 'self' 'unsafe-inline'; object-src 'self';"
    />

The unsafe-inline keyword isn't actually usable here. If I set this value in manifest.json it'll refuse to load at all (' Insecure CSP value "'unsafe-inline'" in directive 'script-src'.'), and setting CSP in the HTML file's meta tag produces the above error.

I'm gathering this issue is somehow related to however preact-cli via its webpack config is injecting the loaded JS, as compared to how CRA was doing it. I'm wondering what the right way to fix this is.

The recommended method would be setting a hash i.e. https://web.dev/csp/#if-you-absolutely-must-use-it

Is there a way to configure webpack/preact-cli to generate this and inject the resulting hash in the meta tag?

[rschristian]

I'm gathering this issue is somehow related to however preact-cli via its webpack config is injecting the loaded JS, as compared to how CRA was doing it

Have you tried comparing Preact-CLI's output HTML to CRA's? That's the best I can suggest really without knowing how you've configured and set things.

I personally know nothing about extensions or CSP, but have you looked at csp-html-webpack-plugin? Looks like it might do what you want. If you need full control over your HTML, you can rip out <% preact.headEnd %> and <% preact.bodyEnd %> from your template.html and replace them with the content from head-end.ejs and body-end.ejs, respectively. They're abstracted away as users usually don't need to alter those.

I should probably point out that Preact-CLI's target is creating PWA's; trying to get an extension out of it might be a bit of a struggle ('m guessing) as they're rather different things.

[michaelaflores]

@rschristian I think that plugin is precisely what I'm looking for, much appreciated 🙏 I'll give this a go. Something that attracted me to preact is that frankly I am used to the ergonomics of writing React but didn't necessarily want the bloat in an extension, so understood preact-cli is more geared toward PWAs but excited to see if this route ends up working. In theory Preact is quite an excellent choice for extension UI – you want something with a slim bundle and quick to startup. Extension development is niche but possibly a good thing to have in the advanced guides one day.

If this works, I'll post my findings back here!

[rschristian]

Preact indeed can be great, just cautioning against Preact-CLI specifically is all. You might find better success using Preact with other tooling.

Extension development will never be a supported use case here and you can see in our issue tracker that we've had a fair number of people struggle with bending CLI to extension development. Just want to make sure that's clear before you go and spend a ton of time on this.

[michaelaflores]

Appreciate that clarification 👍🏼

[laciferin2024]

Thanks for this message

[laciferin2024]

I spend hours trying to figure out why