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'"
}
Related
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 try to connect youtube API to use it in "browser_action" popup. There is a quickstart guide in youtube API page. There is a HTML code which can be copy-paste to try if it work and use it later.
Problem happens with it comes to using external .js file(youtube API) It gives me error:
Refused to load the script 'https://apis.google.com/js/api.js' because it
violates the following Content Security Policy directive: "script-src 'self'
blob: filesystem: chrome-extension-resource:".
and its okay, here we can learn why it works like that. Later in this article it says best way it to include the files into the project. In this case its rather hard, becouse the api.js has more links inside, and this one file doesnt do the job.
Later on in the article its written we can add some origins to whitelist, so it would be able to load it form external source. I thing this should solve the problem, so I've added it to the manifest.
"content_security_policy": "script-src 'self' https://apis.google.com/js/api.js; object-src 'self'",
( tried also other versions like "https://apis.google.com/*" etc., but it doesn't make any difference, still getting same error.
What's the problem there? Whitelisting apis.google.com would do the job or it's bad approach? And how to do this properly.
I add full manifest, maybe there is an error
{
"manifest_version": 2,
"name": "YT Gniewos tryhards",
"description": "This extension was made to learn and to try some things with youtube.",
"version": "1.0",
"content_security_policy": "script-src 'self' https://apis.google.com/*; object-src 'self'",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "qucikstart.html",
"default_title": "Click here!"
},
"permissions": [
"activeTab",
"storage"
]
}
Create OAuth 2.0 credentials for Chrome.
You need to specify the Application ID for your Chrome app or extension. Use the Google Chrome Identity API to obtain that ID.
I'm making a chrome extension however I seem to get the following error when I try to fire up an onclick() event.
Refused to load the script 'https://apis.google.com/js/client.js?onload=handleClientLoad' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:"
and
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
This is my manifest.json :
{
"manifest_version": 2,
"name": "SECURE",
"description": "this extension offers secure communication for GMAIL users",
"version": "1.0",
"browser_action": {
"default_icon": "resources/icon16.png",
"default_popup": "popup.html",
"default_title": "Click here!"
},
"background":{
"scripts":["background.js"]
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js":["myscript.js"],
"run_at": "document_end"
}
],
"permissions": ["identity", "https://accounts.google.com/*", "https://www.googleapis.com/*"],
"oauth2": {
"client_id": "975410329966.apps.googleusercontent.com",
"scopes": [
"<all urls>",
"https://www.googleapis.com/auth/drive",
"https://mail.google.com/",
"https://www.googleapis.com/auth/gmail.login",
"https://www.googleapis.com/auth/gmail.compose",
"https://www.googleapis.com/auth/gmail.readonly",
"https://www.googleapis.com/auth/gmail.send"
],
"content_security_policy":"script-src 'self' 'unsafe-inline' 'unsafe eval' https://apis.google.com/js/client.js?; object-src 'self'"
}
}
Any help towards fixing this error would greatly be appreciated.
By default Content Security Policy, inline scripts won't be loaded and only local script can be loaded. You could relax the default policy by:
Inline Script. Take a look at Official Guide, inline scripts can be whitelisted by specifying the base64-encoded hash of the source code in the policy. See Hash usage for elements for an example.
But I believe a better way would extract this logic to a separate script and not use inline script.
Remote Script. You could whitelist script resources https://apis.google.com/js/client.js?onload=handleClientLoad by the following section in manifest.json
"content_security_policy":"script-src 'self' https://apis.google.com; object-src 'self'"
Also, I believe a better way could be downloading the remote client.js and include it as a local script.
Please be aware as per the description of Inline Script, unsafe-inline no longer works.
Up until Chrome 45, there was no mechanism for relaxing the restriction against executing inline JavaScript. In particular, setting a script policy that includes 'unsafe-inline' will have no effect.
I solved this by outsourcing everything into the JavaScript file.
So instead of the onclick method in the html I have in the JS file:
window.onload = function () {
document.getElementById("button").onclick = <function>;
}
You can use this instead of onclick in an external file:
document.getElementById("#divId").addEventListener("click", myFunction);
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'"
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.