How can I use Google Charts in one of my Options page in Chrome Extension?
According to Google TOS I cannot download Google Charts. And when I try to add <script type="text/javascript" src="https://www.google.com/jsapi"></script> it obviously return error saying:
Refused to load the script 'https://www.google.com/jsapi?autoload={%27modules%27:[{%27name%27:%27visualization%27,%27version%27:%271%27,%27packages%27:[%27corechart%27]}]}' because it violates the following Content Security Policy directive: "script-src 'self' https://apis.google.com 'unsafe-eval'".
I even tried to put following line of code in manifest file, to make an exception:
"content_security_policy": "script-src 'self' 'unsafe-eval' https://www.google.com/jsapi; object-src 'self'",
But no luck.
Does anyone have any idea on how this can be done? I cannot have this chart show up in an iframe because the data will be different for each user and Our API uses OAuth2 authentication method. So serving charts from different page is not a best solution.
Related
I am trying to integrate Stripe but facing the following issues.
When I am loading normally via ngx-stripe, it's giving me this error in the console.
Refused to load the script 'https://js.stripe.com/v3/' because it
violates the following Content Security Policy directive: "script-src
'self' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly
set, so 'script-src' is used as a fallback.
I change content_security_policy in manifest to "script-src 'self' https://js.stripe.com/v3/; object-src 'self' " but it's giving me this error in the console.
Uncaught EvalError: Refused to evaluate a string as JavaScript because
'unsafe-eval' is not an allowed source of script in the following
Content Security Policy directive: "script-src 'self'
https://js.stripe.com/v3/".
After that, I tried adding content_scripts but it's giving me this error and don't let me to import the zip file as well while saying
Could not load javascript '' for content script.
How can I overcome this issue? and is it possible to integrate Stripe into a chrome extension because Stripe only works via https but extension working with chrome://
The answer provided by #EndersJeesh works for me with Chrome extensions with manifest version 2.
I was wondering whether it was going to stop working in manifest version 3:
https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#remotely-hosted-code
The Remotely Hosted Code says that you will not be able to load remote hosted code so I imagine that loading https://js.stripe.com/v3 will not be possible.
The best solution would be for all the Stripe code to be embedded in the extension but there's no npm package for this Stripe code.
Any comments from #EndersJeesh or others would be appreciated.
I ran into these and several subsequent issues integrating stripe into a chrome extension.
Explanation:
I'll first state what I believe was happening. Using the stripe react libraries, I believe they have an inline js call somewhere, causing the error you're seeing about js.stripe.com. I think this would be fixed by adding unsafe-inline into your content_security_policy, but that will not be executed by chrome extensions per the extension CSP.
Solutions:
So here are the various things I did (solving one typically led to having to solve the next set of errors).
I initially had my constent_security_policy set to
"content_security_policy": "script-src 'self' https://js.stripe.com/v3; object-src 'self';"
I was running into your issue above, and so I added the script into my header call, leading my index.html file to be the following:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://js.stripe.com/v3" async></script>
</head>
<body>
<div id="modal-window"></div>
</body>
</html>
That resolved the first set of errors which matched yours above, but it led to the next set of issues:
I then hit a series of errors around Refused to frame ... because it violates the following Content Security Policy directive: "frame-src"..., so I fixed these by adding to my content_security_policy the following:
frame-src https://js.stripe.com/v3
So my final version of my content_security_policy is as follows:
"content_security_policy": "script-src 'self' https://js.stripe.com/v3; object-src 'self'; frame-src https://js.stripe.com/v3"
I hope that does it for you. It took several hours to work through all of that for me.
I am developing a Chrome Extension, and I have this in my index.html head:
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-html.js"></script>
I am getting this error:
Refused to load the script
'https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-html.js'
because it violates the following Content Security Policy directive:
"script-src 'unsafe-eval'".
Here is my manifest.json config:
"content_security_policy": "script-src '*' 'unsafe-eval'; object-src '*';"
Does anyone know if there is a possible way to load <script>'s which reference a www link? Is there some permissions I am missing?
The current security policy that you're using only applies to your extension, that is because you cannot use just *. Wildcard are allowed but only to construct a URL. If you want to allow https://cdnjs.cloudflare.com, you'll have to specify that domain, something like this:
"content_security_policy": "script-src 'self' https://cdnjs.cloudflare.com; object-src 'self';"
You can learn more about the content_security_policy property from HERE
I'm trying to do a Chrome extension and i have problems with the content security policy.
I create a popup.html with a json call in the popup.js called in the header. i also add another .js file on a remote server, i can't include it since it's a api car to a external service.
I tryed everything with the manifest.json.
"permissions": [ //"optional_permissions": [
"http://*.myjsonserver.com/",
"http://*.twilio.com/*",
"https://*.twilio.com/*"
//"http://*/*",
//"https://*/*"
],
i tryed this.
"manifest_version": 2,
"content_security_policy": "connect-src 'self' http://myjsonserver.com; object-src 'self'", //connect-src
"content_security_policy": "script-src 'self' https://static.twilio.com; object-src 'self'"
Or should i add the javascript this way?
"content_scripts": [
{
"matches": ["http://static.twilio.com/*"],
"js": ["jquery.js", "myscript.js"]
}
],
I get this error on google chrome inspector.
Refused to load the script 'http://myjsonserver.com/get_token_cb.php?callback=jQuery210007401883858256042_144745747' because it violates the following Content Security Policy directive: "script-src 'self' https://static.twilio.com".
---------------
chrome-extension://static.twilio.com/libs/twiliojs/refs/6359b40/twilio.min.js Failed to load resource: net::ERR_FAILED
Failed to load resource: net::ERR_FAILED chrome-extension://static.twilio.com/libs/twiliojs/refs/6359b40/twilio.min.js
but nothing work, myjsonserver.com it not on a https server and it's on my own server. the twilio.com url is to access the twilio api from javascript.
This is just for testing because later it will be on the background.js
I tryed it all but i'm lost and i have no clue.
Lots going on here - I can say that Google recommends that you DO serve JS from the extension rather than from the internet if possible (so if you need jQuery, you would bundle it with your extension). Regarding the specific error you reported, only the second content_security_policy is taking effect. You can see in their documents that they only specify one of these attributes in the manifest.
To solve the error you are facing, I believe you want:
"content_security_policy": "script-src 'self' https://myjsonserver.com https://static.twilio.com; object-src 'self'"
I'm trying to build a chrome extension, but for some reason I can't seem to make API requests to SoundCloud or load Jquery.
I know it's because of this:
I will load jquery as such:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
And in my console, I will recieve
Failed to load resource: net::ERR_FAILED
chrome-extension://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
The same thing happens for the soundcloud api:
chrome-extension://api.soundcloud.com/tracks?q=buskers&client_id=xxxxxxxxxx&format=json&_status_code_map[302]=2
Why does chrome-extension// keep coming in front of the urls and how do I stop it?
According to Content Script Policy (CSP), script resource can only be loaded from the extension's package. This will make extensions more secure and ensure that extension will only execute the code you approved.
Solution 1: Download the specific version of jQuery file, include it to your package and then load it into document.
<script src="js/jquery.1.11.1.min.js"></script>
Solution 2: Actually you can relax the limitation by defining the whitelist of resource origins in manifest file. You could refer to this for more details if you have a need to load external js file for some reasons.
"content_security_policy": "script-src 'self' https://ajax.googleapis.com https://api.soundcloud.com/tracks?q=buskers&client_id=xxxxxxxxxx&format=json&_status_code_map[302]=2; object-src 'self'"
Note:
Whitelisting resource only allow to be loaded over the following protocol: HTTPS, chrome-extension, and chrome-extension-resource. Please use https to load the external library if you want to adopt whitelist solution.
Use whitespace to separate domains form each other if you want to define multiple domains in whitelist.
"content_security_policy": "script-src 'self' https://domain1.com https://domain2.com;"
try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I am working on a chrome extension that makes use of the Google places API. I am not able to load the API due to Content Security Policy(https://developer.chrome.com/extensions/contentSecurityPolicy). I tried using permissions, get request, adding the script to body on document ready (what I found on research), nothing works. I get this error all the time:
Refused to load the script 'https://maps.googleapis.com/maps/api/js?key=MY_KEY8&sensor=true&callback=initialize' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://apis.google.com".
Is it so that one cannot make a chrome extension using a Google API or may be any other external API? Can someone suggest some way to do so.
{
"manifest_version": 2,
"version": "1.0",
"permissions": [
"identity",
"https://*.google.com/",
"geolocation",
"maps.googleapis.com/maps/api/…; ],
"content_security_policy": "script-src 'self' 'unsafe-eval' maps.googleapis.com object-src 'self'"
}