Web Extension: Cannot load jQuery into background page, due to CSP

Add-ons Development
1

Trying to retrofit our working chrome web extension to work in Firefox (Development Edition v50.0a2). When we run the existing extension, we’re met with this error:

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src moz-extension://60027548-2e95-43be-976a-1d67236b301a”).

Using a background HTML page specified in the manifest like so:

"background": {
    "page": "background.html",
    "persistent": false
  },

This background page includes a handful of references to scripts included in the extension like so:

<script src="lib/jquery.min.js"></script>
<script src="tenants.js"></script>
<script src="background.js"></script>
<script src="another-script1.js"></script>
<script src="another-script2.js"></script>

Removing the one referencing jQuery allows the extension to be loaded without the error, so we’re currently assuming that is the issue. However, the extension currently relies on it to function properly.

The content_security_policy is specified like so:

“script-src ‘self’ ‘unsafe-eval’ blob: filesystem: chrome-extension-resource: moz-extension: https://127.0.0.1 https://127.0.0.1:44301 https://127.0.0.1:44302; object-src ‘self’ moz-extension: https://127.0.0.1 https://127.0.0.1:44301; child-src ‘self’ https://127.0.0.1:44301 https://127.0.0.1:44302; connect-src ‘self’ https://127.0.0.1:44301 https://127.0.0.1:44302;”

I’ve already attempted to remove the “chrome-extension-resource:” entry, since that’s Chrome-specific anyway.

Any ideas?

2

I had a problem using the CSP in Firefox too (worked in Chrome). In the end I decided to simply avoid it.

I think your extension won’t pass the review if it loads external code into privileged contexts, so you should include an offline copy of jQuery anyway.

3

Thanks. However, the issue is that I’m actually attempting to load jQuery locally from the web extension, as shown in the script tags above.

There is also no way to “avoid” the usage of the CSP, since even if you do not specify one, a default (and very restrictive) one is used. This is the purpose of us using the one that we do. And again, since it works in Chrome just fine, I’m assuming this is an issue with Firefox, or a major discrepancy between the two implementations I’ve yet to comprehend.

4

Oh.

So

  • removing the line <script src="lib/jquery.min.js"></script> or
  • removing the content_security_policy
    both fix the error, but break your extension?
5

Perhaps I’m missing something (again), but another fun fact to add to my response above…

Mozilla states that they do support referencing remote scripts through the very use of the CSP, so even if I elected to reference jQuery from a respected CDN, I should be able to:

6

@NilkasG

  • Removing the jQuery reference appears to keep the error from cropping up.
  • Our CSP must remain intact for reasons specific to the web extension in question.

We’re not adding anything in the CSP that should cause any issues here. I fear we actually might be omitting something which the Firefox Web Extension implementation requires. I just cannot figure out what that might be.

7

So it does not show up for the next script in line (loaded from the same origin)? That’s curious. Have you tried to move it out of its sub-folder?

What I’ve noticed: The docu doesn’t mention moz-extension: (which should be covered by 'self').

8

The documentation does state the following:

The only permitted schemes for sources are: blob:, filesystem:, moz-extension:, and https:.

And yes, when I remove the jQuery script, the error disappears. When I load a page which triggers the web extension, I’m seeing it progress past that initial error, and on to yet another CSP-related error. This one relating to a remote script we’re trying to load. And yes, this remote URL should also be allowed, since we’re specifying it in the CSP.

Content Security Policy: The page’s settings blocked the loading of a resource at https://127.0.0.1:44301/1/Home/InitializeExtension/ca845719-5913-4a15-9b9e-17fc789e08d3 (“script-src moz-extension://37c43743-30a1-438f-a98f-867ba1df0aff”)

What’s odd is that in every case, it’s showing some bogus default CSP as the culprit:

“script-src moz-extension://37c43743-30a1-438f-a98f-867ba1df0aff”

So, I’m assuming it’s completely ignoring the CSP we’ve placed in the manifest at this point.

9

Ah, Ok. I only looked at the examples.

Can you (and does it help to) XHR to your locahost (or maybe some some domain that resolves to 127.0.0.1, e.g. http://42foo.com/) if you list it as permission?

10

This has no effect. The address resolution doesn’t even come into play when I simply attempt to load the web extension into Firefox. It is a simple matter of Firefox not allowing jQuery to load locally, from the extension.

11

The idea was that maybe you don’t need the CSP anymore if you XHR for your local resources; which, for some wiered reason, would fix the problem with jQuery, wouldn’t it?

12

For those interested, the version of jQuery in question is v1.10.2. Updating to the latest v2 (2.2.4) addresses this particular issue. Firefox allows it to load without issue.

However, the issue still remains that the “content_security_policy” in the manifest is completely ignored. Once we were able to move past the original issue with jQuery, we are still met with scripts being blocked from remote sources, even though the URLs are being served over HTTPS, and are included in the “content_security_policy” key in the manifest.

Our CSP key:

"content_security_policy": "script-src 'self' 'unsafe-eval' blob: filesystem: moz-extension: https://127.0.0.1:44301 https://127.0.0.1:44302; object-src 'self' moz-extension: https://127.0.0.1:44301; child-src 'self' https://127.0.0.1:44301 https://127.0.0.1:44302; connect-src 'self' https://127.0.0.1:44301 https://127.0.0.1:44302;",

When Firefox blocks the following script tag source from loading:

https://127.0.0.1:44301/1/Home/InitializeExtension/ca845719-5913-4a15-9b9e-17fc789e08d3

It shows this as being the CSP that blocked it:

(“script-src moz-extension://XXXXXXXX-2e95-43be-976a-1d67236b301a”)

The question remains. Where is this being blocked? Where is this default CSP coming from? We are assuming this is either a bug at this point, or proper support for the CSP key has yet to be implemented or honored elsewhere. So, the only thing left to do at this point is to file a bug against this specific issue.

13

Did you try adding the scripts to your manifest instead of the html? I thought I had read somewhere that this allows the page to access the scripts.

"background": {
     "page": "background.html",
     "scripts": ["lib/jquery.min.js","tenants.js","background.js", "another-script1.js", "another-script2.js"],
},
14

I had already tried that as well. It has to do with jQuery 1.x and Firefox. Not sure what it is, but moving to jQuery 2 fixes it.

15

In the interest of helping others - As mentioned in the bug I entered, it is a matter of “moz-extension:” existing in the CSP without an actual host. Once this is removed, the CSP is accepted in full, and the remote script can be requested fine.