problem in Content Security Policy for external scripts - content-security-policy

i want access to this scripts:
<script src="https://js.stripe.com/v3/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"> </script>
and this stylesheet:
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css">
but i have some kind errors like this:
Refused to load the script 'https://js.stripe.com/v3/' because it violates the following Content Security Policy directive: "script-src https://cdnjs.cloudflare.com https://api.mapbox.com 'self' blob:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
i use meta tag to access all websites with all assets, but doesn't work:
<meta http-equiv="Content-Security-Policy" content="default-src https:">

when I changed the version of my axios it worked for me on that version it is not working. so go to src of your axios file and change it to another version.

Related

Content-security-policy with a hash for an event handler does not work on iOS Safari

Is there a way to make iOS Safari respect 'unsafe-hashes' in a content-security-policy for inline event handlers? Is there another workaround besides using 'unsafe-inline'?
iOS Safari 14.3 reports a violation of the CSP for "script-src" while Firefox and Chrome on desktop and android work as expected.
Replacing inline event handlers does not look possible at this moment, because the event handlers are generated by JSF/Mojarra.
Here is the test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"
lang="en"
>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8"/>
<!-- works in Firefox on Desktop, Chrome on Desktop, Firefox on Android, Chrome on Android -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-hashes' 'sha256-9tftRELs2TcRhB+bln6nFx6j6k3J4ESyFzUOJgDFjew=' 'report-sample'; report-uri /csp-report"></meta>
<!-- works in Firefox on Desktop, Firefox on Android -->
<meta http-equiv="Content-Security-Polic1" content="default-src 'self'; script-src 'self' 'sha256-9tftRELs2TcRhB+bln6nFx6j6k3J4ESyFzUOJgDFjew=' 'report-sample'; report-uri /csp-report"></meta>
<!-- works in Firefox on Desktop, Chrome on Desktop, Firefox on Android, Chrome on Android -->
<meta http-equiv="Content-Security-Polic2" content="default-src 'self'; script-src 'self' 'unsafe-hashes' 'sha256-9tftRELs2TcRhB+bln6nFx6j6k3J4ESyFzUOJgDFjew=' 'report-sample'; report-uri /csp-report"></meta>
<!-- works in Firefox on Desktop, Chrome on Desktop, Firefox on Android, Chrome on Android, iOS Safari -->
<meta http-equiv="Content-Security-Polic3" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'report-sample'; report-uri /csp-report"></meta>
</head>
<body>
Test
</body>
</html>
This is what I've gathered so far myself on the subject.
In CSP level 2 (which is the latest spec) you can't, see https://www.w3.org/TR/CSP2/, section 7.15:
Whenever the user agent would execute an inline script from an inline event handler, instead the user agent MUST NOT execute script, and MUST report a violation.
That said, a CSP3-compliant browser would in theory let you use the "unsafe-hashes" directive, see https://www.w3.org/TR/CSP3/#changes-from-level-2, specifically, point 8:
The 'unsafe-hashes' source expression will now allow event handlers, style attributes and javascript: navigation targets to match hashes.
See this list for compatible browsers: https://caniuse.com/?search=unsafe-hashes
As a confirmation, I tried this out on Chrome 92 with this simple HTML page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-hashes' 'sha256-WOdSzz11/3cpqOdrm89LBL2UPwEU9EhbDtMy2OciEhs=';">
<button onclick="alert('foo');">click me</button>
</body>
</html>
and it worked, showing the alert when I clicked the button.
So, I think it's normal that it doesn't work on Safari, given that it's listed as a non-compliant browser. The weird thing is that it works from Firefox 91, which is also listed as non-compliant. Maybe the information on caniuse.com is just incomplete.
I guess that until CSP level 3 becomes widely supported, we just have to comply with CSP 2, which means putting our scripts in separate JS files and attaching handlers from there. On the other hand, doing this also happens to be more secure (hence the “unsafe” in the new directive).

Unable To Print PDF file Using Print Js

Below Given is my code from which I am trying to print pdf file.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="print.min.js"></script>
<link rel="stylesheet" type="text/css" href="print.min.css">
</head>
<body>
<script type="text/javascript">
function sample(){
printJS({
printable: "test.pdf",
type: "pdf",
});
}
</script>
<button onclick="sample()">Click Me</button>
</body>
</html>
but it is not working and diving below error on chrome console
Access to XMLHttpRequest at 'file:///test.pdf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
I am following all the rules said in documentation of Print-js. my {.pdf} file and {.html} file are in same folder. It is Working Fine with {.jpg} File.
Please help me.
I am sharing link of the script I have included in my head tag
JS:- https://printjs-4de6.kxcdn.com/print.min.js
CSS:- https://printjs-4de6.kxcdn.com/print.min.css
It was the problem regarding "Cross origin requests". To solve this you need to start your local server. in my case I started Xampp and moved my files to htdocs folder and BOOM it worked.. I Still dont know why it was working for images and not for pdfs.
HERE IS THE ANSWER ON STACK-OVERFLOW THAT HELPED ME.
https://stackoverflow.com/a/20578692/10333164

Content Security Policy meta tag within sandboxed iframe not working in Safari (14.0.2)

I'm trying to embed a page whose Content Security Policy does not seem to be respected in Safari, but does works in Chrome, Firefox, Edge, Brave. The embed looks like this:
<iframe src="https://cloudflare-ipfs.com/ipfs/QmUiDhFZeFnJvHgxGbwPucT8kyZvAzBsFFA12vPNxfsP6u/" sandbox="allow-scripts" />
The embedded page looks like this, and contains a CSP meta tag:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">
<title>test</title>
<meta charset="utf-8">
</head>
<body>
<script src="test.js"></script>
</body>
</html>
The CSP should dictate that the page can load resources from its own origin, as well as inline scripts. However, when I try to load the iframe in Safari, I get an error claiming the path to the script does not match the default-src directive:
Refused to load https://cloudflare-ipfs.com/ipfs/QmUiDhFZeFnJvHgxGbwPucT8kyZvAzBsFFA12vPNxfsP6u/test.js because it appears in neither the script-src directive nor the default-src directive of the Content Security Policy.
The response headers for the embedded page look like this:
headers
Here is a simple jsfiddle demostrating the issue: https://jsfiddle.net/4hLdygm9/1/
Thanks in advance!
UPDATE:
Have open an issue on the Webkit Bugzilla and has been confirmed to be a bug:
https://bugs.webkit.org/show_bug.cgi?id=223848

Content-Security-Policy for local resources

I am trying to deploy a web application in my local using apache tomcat as a container.
I got a simple page with following in head section:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<link rel="stylesheet" href="pure-min.css">
<link rel="stylesheet" href="styles.css">
<script src="app.js"></script>
and when I try to open the page on safari 14 I got error
Refused to load http://localhost:8080/webapp/app.js because it does not appear in the script-src directive of the Content Security Policy.
I have read documentation here and it looks like 'self' would be enough to load my own resources (for both css and javascript). What am I doing wrong ?
thanks
It can be 2 issues:
The 'self' token does not cover localhost:8080 (with port number) in Safari. But in this case you should have additionally a 2 CSS blocked, not js only.To fix just add localhost:8080 to the default-src directive.
Your Apache Tomcat server publish a default CSP via HTTP header. In this case you can't mitigate CSP using the meta tag and have to modify CSP response HTTP header.
Check do you have a CSP HTTP header published, tutorial is here.
Is this error observed in Safari browser only? What about Chrome/Firefox?

Refused to execute inline script

Chrome extension refused to execute inline script.
Based on past research, I have seen that you have to make a connection between the HTML and you javascript file, done that still not worked.
popup.html-
<html>
<body>
<button type="button" id="fill">Fill</button><br>
<script src="popup.js"></script>
<body>
</html>
popup.js-
document.getElementById("fill") = Fill;
function Fill(){
document.getElementById("first_name").value = "somefirstname";
}
Full error message- Refused to execute inline script 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-8AeKgC4PZyj0Lyp/7zt8lB898NYpYADMsfcJvqOwoDs='), or a nonce ('nonce-...') is required to enable inline execution.

Resources