CODEWITHSUNDEEP
javascriptcontent-security-policyfirefox-addon-webextensionsparceljsweb-ext
lhk
lhk

Reputation: 30146

building a webextension with parcel and web-ext, what is the correct content security policy

Parcel supports bundling webextensions: https://v2.parceljs.org/recipes/web-extension/

The command to set up a build server and watch for changes is: parcel src/manifest.json --host localhost --target webext-dev. This will bundle a webextension into the dist/ folder.

I'd like to run this extension with web-ext run. This is a tool from Mozilla which automatically loads a webextension into Firefox and reloads on changes. Running this in the dist/ folder should make for a great pair with parcel.

But in practice the bundled webextension is not executing my content scripts. This is because parcel is serving them from localhost. It needs the flag --host localhost for hot module replacement. But the webextension then complains "page's settings blocked loading of a resource at ws://localhost:1234/ (“connect-src”)."

The parcel docs also demonstrate a build command: parcel build src/manifest.json --target webext-prod. And if I execute web-ext run from dist/webext-prod it works like a charm. A new run of the parcel build command automatically triggers a reload of the webextension. But this is not productive for development, since the parcel builds take too long. I'd like to use its development setup.

How can I correctly configure the content security policy of my webextension to allow content scripts that are loaded from localhost?

So far the entry in my manifest.json looks like this:

  "content_security_policy": "connect-src 'self' 'localhost:';",

Upvotes: 2

Views: 804

Answers (1)

granty
granty

Reputation: 8546

  1. 'localhost:' has a wrong syntax, no single-quotes and trailing colon ":" should be used. It's just specific hostname like domain name.

  2. localhost source covers http://localhost and https://localhost (only http/https schemes), but with standard ports only.

  3. 'self' token covers ws://localhost and wss://localhost host-source in CSP3-browsers only, and with standard ports only.

Since you do use non standard port number, try:

"content_security_policy": "connect-src 'self' ws://localhost:1234;"

Upvotes: 1

Related Questions