Content security policy blocking injecting styles into pages

Add-ons addons.mozilla.org
#1

I am working on an extension that will inject some elements into the webpages using content scripts.

i used react/webpack to build the extension. but when i am trying to use the extension, in some websites like secure.login.gov the styles are not getting injected. i am getting the following error in console.

Content-Security-Policy: The page’s settings blocked an inline style (style-src-elem) from being applied because it violates the following directive: “style-src ‘self’ https://secure.login.gov ‘nonce-83e27ef5530a894f4f0ee9c5323940ea’

there is no issue in chrome/edge where i am using manifest v3 where as in firefox i am using manifest v2.

i tried instructions in here https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy. but this looks like will be applied to extension pages not the actual web pages

any help on this will be appreciated.

#2

How are you injecting the styles? I would expect that appending a style tag to the host document would be blocked by CSP but that using content script injection mechanisms should work.

For example, you should be able to inject a CSS file in the extension using a static content_scripts declaration in the manifest. If that doesn’t work, I’d consider that a bug.

#3

Apologies for the delayed response. I was using react and webpack to build the content script. so webpack was injecting style tags and images into the page which is getting blocked.

i added built content script file in the manifest.json as shown in the documentation.

if i do the inline styles or adding images through vanilla javascript, there seems to be no issues.