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>
Related
I'm developing a Chrome extension in MV3. I need to integrate Stripe with this extension. This extension overrides the new tab. And I'm using ReactJs and Webpack.
NPM Package using: React Stripe.js
Right now I'm getting
stripe.esm.js:30 Refused to load the script 'https://js.stripe.com/v3' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
I've tried adding
"content_security_policy": {
"extension_pages": "script-src 'self' https://js.stripe.com/v3; object-src 'self'; frame-src https://js.stripe.com/v3"
}
in manifest.json but I get this.
What am I doing wrong? Is it not possible to use it like this in MV3?
Your help is appreciated.
Basically the simple and straight forward answer is that you cannot do your implementation this way. First “Remotely hosted code is no longer allowed; an extension can only execute JavaScript that is included within its package.” as per the chrome developer documentation [0].
Stripe has also addressed this issue in their GitHub which you can read more about here [1].
As for the best way to handle this situation is for your extension to generate a link to an external website that you would create. In there, you’d be able to create a CheckoutSession or even integrate with PaymentElements.
I hope this shed some light on how to move forward.
[0] https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#feature-summary
[1] https://github.com/stripe/stripe-js/issues/273
I am trying to setup a google sign in in my web application using Adding Google sign-in resource
I added the below code to the relevant html file
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
</body>
</html>
When I try to view the web app's page in a browser. I don't see the google sign-in button and when I inspect the page I see the following two errors
Content Security Policy: The page’s settings blocked the loading of a resource at https://accounts.google.com/gsi/client (“script-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:3000/mini-profiler-resources/includes.js?v=35a79b300ab5afa978cb59af0b05e059 (“script-src”).
I tried looking at resources on Content Security Policy to solve this issue and found that adding a source allow-list is the solution. Please refer this resource for where I found this solution. Where do I add this allow list specifically? What exact code should I add? If I am going in the wrong direction please point me to resources or instructions that will help to resolve this matter.
My dev enviroment in ubuntu 20.04 and the browser I am using is Mozilla Firefox. I am actually buidling one of my first ruby on rails applications.
Thank you for your time and effort.
Content Security Policy is an additional layer of web application's security, which is supported by most of the modern web browsers. It's main goal is mitigating a whole range of the client-side attacks on modern web applications (check this doc for more information: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
There are two ways of including Content Security Policy in your application. First is a HTTP header included in the server's browser. Assuming you are using Ruby on Rails, there is probably a few ways for setting this header.
You can configure CSP on the code level. You have to modify file: config/initializers/csp.rb:
SecureHeaders::Configuration.default do |config|
config.csp = {
default_src: %w('self'), # self-hosted resources allowed by default
script_src: %w(https://accounts.google.com), #here you have to include origins of all of your scripts
connect_src: %w('self'),
img_src: %w('self'),
font_src: %w('self'),
base_uri: %w('self'),
style_src: %w('unsafe-inline'),
form_action: %w('self'),
report_uri: %w(/mgmt/csp_reports)
}
end
I am not a Ruby developer, so I would recommend using that resource for further information: https://bauland42.com/ruby-on-rails-content-security-policy-csp/
You can also set CSP on the HTML's level, using the following meta tag:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src https://accounts.google.com; child-src 'none'; object-src 'none'">
The other way is setting a CSP header on the web server's level. For example, in nginx, you set it this way (in the server {} block of /etc/nginx/sites-enabled/your_conf (or other path - that depends on your nginx configuration):
add_header Content-Security-Policy "default-src 'self'; script-src https://accounts.google.com;" always;
Keep in mind that using default-src 'self' directive means, that you will also have to include all of the external resources in Content-Security-Policy - that includes fonts, images, styles etc.
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.
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.
I have been pulling my hair all day.
I am creating a tool for Facebook.
I am trying to inject Remote Javascript into my Chrome Extension.
It seems to be working on all other sites, except for on Facebook.com because the http protocol is secures: HTTPS
The Script is getting injected when I am browsing other sites that does not use HTTPS
Is it not possible to inject external javascript to provide dynamic content for secured sites?
I am using the following code to inject external js:
app.js (part of the extension)
loads the following:
chrome.tabs.executeScript(tabId, {file: "js/loadexternal.js"});
Then /js/loadexternal.js does the following:
var s = document.createElement('script');
s.type = 'text/javascript';
s.src ='https://www.website.com/loader.js?client=tacx';
document.getElementsByTagName('head')[0].appendChild(s);
Please note: I am also loading the remote script from a Secured (HTTPS) server.
Doesn't help!
This loads the loader.js file whenever I am not on a Secured page...
But it is not loading on Facebook which seems to be always on HTTPS protocol.
Please help me. Thank you.
PS> Is there a work around to display dynamically compiled results within my tool extension for FB?
If you look at the HTTP response headers on facebook's page, you'll see the following line:
content-security-policy: default-src *;script-src https://*.facebook.com http://*.facebook.com https://*.fbcdn.net http://*.fbcdn.net *.facebook.net *.google-analytics.com *.virtualearth.net *.google.com 127.0.0.1:* *.spotilocal.com:* chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl 'unsafe-inline' 'unsafe-eval' https://*.akamaihd.net http://*.akamaihd.net *.atlassolutions.com;style-src * 'unsafe-inline';connect-src https://*.facebook.com http://*.facebook.com https://*.fbcdn.net http://*.fbcdn.net *.facebook.net *.spotilocal.com:* https://*.akamaihd.net ws://*.facebook.com:* http://*.akamaihd.net https://fb.scanandcleanlocal.com:* *.atlassolutions.com http://attachment.fbsbx.com https://attachment.fbsbx.com;
Facebook has a security policy disallowing scripts from domains that aren't part of this list, so I don't think you'll be able to load an external script from your extension.
If that header wasn't there, you would normaly be able to include scripts hosted on https:// protocol.