Content Security Policy blocking Google API for addon

Question

I am writing an addon for Firefox and have problem with Content Security Policy. It needs accessibility to Google API when I press button on it, so I have added following script tag to popup.html

<script src="https://apis.google.com/js/api.js"></script>

However I had Content Security Policy errors. After many attempts I fixed it by just downloading api.js to addon folder and change to:

<script src="api.js"></script>

However, addon still connects with Google and is blocked by Firefox. Here are errors from dev-console:

Loading failed for the <script> with source “https://apis.google.com/_/scs/abc-static/_/js/k=gapi.lb[....]/cb=gapi.loaded_0?le=scs”. popup.html:1:1

Content Security Policy: The page’s settings blocked the loading of a resource at https://apis.google.com/_/scs/abc-static/_/js/k=gapi.lb[....]/cb=gapi.loaded_0?le=scs (“script-src”).

I tried to add necessary permissions in manifest file:

"permissions": [
  "...",
  "https://apis.google.com/"
],

Or tried to add meta data in popup.html's like:

<meta http-equiv="Content-Security-Policy" content="
"content_security_policy": "default-src 'self'; script-src 'self' https://apis.google.com 'unsafe-eval';">

Or many other possibilities like:

script-src 'unsafe-inline';
default-src 'self';

Also tried with "nonce" attribute added to 'script' tag:

<script src="https://apis.google.com/js/api.js" nonce="random_value"></script>

and then

script-src 'self' https://apis.google.com 'nonce-random_value';

Or using wildcards like *.google.com

But all the time I have the same issue. I know that question was asked many times on StackOverflow but none of solutions worked for me. How can I manage to get it working? Thank you.

Answer 1

There is a default Content Security Policy on your site, most likely served as a response header. You need to identify where and how this policy is set and adjust the directives to support the content you are loading. You will likely have to go through multiple iterations of adding google sources to directives such as script-src, style-src, connect-src, frame-src and img-src.