Hi I am developing NodeJS project with using pug.
Not able to load the api https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js file from pug template.
In chrome getting the error in console.
Please find the below image for reference
Please help to resolve this issue.
Thanks.
It's complicated to answer without having the code. But it seems that it can't load because of a security problem. And kaspersky gets involved.
Maybe try to edit the metq
"mapboxlg" is not defined
Maybe it's because the CDN only allows HTTPS requests and given your localhost development link it's only HTTP and for the CDN it's not secure.
This is just speculation because again, you didn't put any code
You need to specify the hosts for csp whitelist in res headers of your pages.
Refer to this for detailed information:
CSP directives
After stumbling over the same problem and researching for a day, this worked for me:
Before you render you page, set the header like below:
res.set({
'Content-Security-Policy': `default-src 'self' http: https:;block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data: blob:;object-src 'none';script-src 'self' https://api.mapbox.com https://cdn.jsdelivr.net 'unsafe-inline' 'unsafe-eval';script-src-elem https: http: ;script-src-attr 'self' https://api.mapbox.com https://cdn.jsdelivr.net 'unsafe-inline';style-src 'self' https://api.mapbox.com https://fonts.googleapis.com 'unsafe-inline';worker-src 'self' blob:`
});
Now either you can keep doing this before rendering every page, or place this code in a middleware in you main app, just before you've defined your router for rendering the html pages.
Something like this:
<appName>.use( (req, res, next)=>{
res.set....//as done above
next();
});
In future, if something stops working, inspect browser window and look in console, you'll just need to whitelist some other trusted sources.
Related
sorry for bad description. I have an app that works fine on localhost and test server. On the machine that has connection to test server when I try to access the app via server's IP and port I can access the app too. But with a rerouting that points to my apps test server IP and port I get below 2 errors in a script that I use from a different host. Test server doesn't has outside connection allowed but related script host has been allowed. I have tried adding CSP headers to ISS but it didn't work. How can I resolve this issue or how can I get more details about it. Any help would appreciated. Thank you.
1st error:
Refused to create a worker from
'blob:https://redirecteddomain.com/04891805-36bb-45f7-a4e9-7cb58f25a3bf'
because it violates the following Content Security Policy directive:
"default-src https: data: 'unsafe-inline' 'unsafe-eval'". Note that
'worker-src' was not explicitly set, so 'default-src' is used as a
fallback.
2nd error:
Uncaught DOMException: Failed to construct 'Worker': Access to the
script at
'blob:https://redirecteddomain.com/04891805-36bb-45f7-a4e9-7cb58f25a3bf'
is denied by the document's Content Security Policy.
Script that got the error:
<script src="https://scriptsource.com/script.php?lang=en"></script>
Due to privacy issues domain names are replaced.
Update: So I have tried to download and use the script locally and there were couple of API calls in the javascript file and it gave the same error again.
Update-2: I have checked through the script file and found the lines that are causing the issue, I have added "default-src 'self' 'unsafe-inline'; worker-src blob:;" meta header but still get the same error
const e=window.URL||window.webkitURL,n=new
Blob(['importScripts("'+Dt.faceworker+"?v="+t.replace(/\./g,"")+'");'],
{type:"application/javascript"}),o=e.createObjectURL(n);
Wt=new Worker(o)
The CSP on your page doesn't allow "blob:". Adding another CSP in a meta tag can only impose restrictions, it can't change the other CSP that is likely there and served in a response header. You will likely need to modify the original CSP adding blob: to default-src or worker-src.
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.
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.