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.
Related
I have a Safari extension which loads images from Unsplash from the domain https://images.unsplash.com. I recently migrated to manifest v3 and used the following CSP in manifest.json:
"content_security_policy": {
"extension_pages": "img-src https://images.unsplash.com data:; script-src 'self'; object-src 'self';"
},
This allows images to load correctly on Chrome, both the initial request from images.unsplash.com and a preload mechanism that loads them via a data: scheme.
On Safari, I get an error:
Refused to load https://images.unsplash.com/photo-1587830290334-020efdcbc345?crop=entropy&cs=tinysrgb&fit=max&fm=webp&ixid=MnwxNzkyODZ8MHwxfGFsbHx8fHx8fHx8fDE2MTczMjkzMDc&ixlib=rb-1.2.1&q=80&w=400 because it does not appear in the img-src directive of the Content Security Policy.
I get this even if I use that exact URL in the CSP. It seems to work as expected in other browsers, with images loading successfully. Is my CSP definition not technically correct and it's more strictly enforced in Safari, or some other issue?
References
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src
https://developer.chrome.com/docs/extensions/mv3/intro/
As #wOxxOm points out, there is indeed a bug. If you set a CSP via meta tag instead, it will behave as expected. So when submitting a build to App Store, remove the CSP key from manifest.json and Safari will rely on the CSP set via meta tag.
Works:
<meta
http-equiv="Content-Security-Policy"
content="img-src https://images.unsplash.com data:; script-src 'self'; object-src 'self';"
/>
Tracking bug in Webkit: https://bugs.webkit.org/show_bug.cgi?id=243349
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've just updated the Content-Security-Policy settings in the Web.Config file and added the Application Insights JavaScript snippet in my _Layout.cshtml.
Here is what the Content-Security-Policy in the Web.config looks like.
script-src-elem
'self'
'unsafe-inline'
'unsafe-eval'
https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js
*.mymapjs.com
script-src
'self'
'unsafe-inline'
'unsafe-eval'
https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js
*.mymapjs.com
mymapjs.com is not longer working properly, my maps aren't showing up, and my browser is upset with me yelling at me in red letters with the error:
Access to XMLHttpRequest at 'mymapjs.com' from origin 'mywebsite.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
When I remove the https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js url from the Web.config Content-Security-Policy I get the warning:
Refused to load the script 'https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js' because it violates the following Content Security Policy directive: "script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' https://*.mymapjs.com use.other.net use.other.net/ https://myfont.net/it.js
It turns out I enabled the enableCorsCorrelation = true in the Application Insights configuration.
So then I tried updating the correlationHeaderExcludedDomains values with a wild card value for the mymapjs.com.
correlationHeaderExcludedDomains:
[
'myapp.azurewebsites.net',
'*.queue.core.windows.net',
'*.mymapjs.com'
]
The wild card alone didn't work. I had to strictly type the JS libraries urls AND have the wildcard for it to work properly. It wants the scripts that are directly being requested from the _Layout.cshtml as well as the ones generated from the JS libraries.
correlationHeaderExcludedDomains:
[
'myapp.azurewebsites.net',
'*.queue.core.windows.net',
'*.mymapjs.com'
'https://mymapjs.com-core-events.js'
'https://mymapjs.com-services.js'
'https://mymapjs.com-ui-services.js'
]
If anyone else gets caught up figuring this out, I hope this helps.
I added the following to a web page:
<script type="text/javascript">
window.addEventListener("load", function () {
window.location = "https://localhost:5002";
});
</script>
When I run the application I get the following error:
Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'"
When I remove the script I do not get the error anymore.
Any idea why this happens?
Your current CSP setting is:
"default-src 'self'"
which means that you can only execute your code from your root URL (localhost:5000).
You can try to extend this policy to the other URL you are using:
"default-src 'self' https://localhost:5002"
The CSP setting location depends on your web server. In case of Apache, this is set in file '.htaccess'.
P.S: 'unsafe-eval' doesn't seem to be related to the listener you are adding, but you can try the above change anyway.
For other people that might come across something similar: developing a plugin for an electron app i got this error when i was trying to load it. The solution was to just change the mode to "production" in webpack.config.js.
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.