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).
Related
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.
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
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?
All of the following questions are related and some of them marked as fix but does not seem to be working.
My problem:
Problem with IE8.
I have Intranet site built on Primefaces 5.1.7,
JSF 2.2.8-04
Trying to disable compatibility mode of IE8 which is
enabled by default for Intranet web sites.
Problem is we want to set minimum browser requirement to IE8, but web side is run on Intranet domain so it by default runs on compatibility mode and IE8 user is not allowed to login.
Solution Available (Not working):
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</f:facet>
Following does not work:
Force IE compatibility mode off using tags
Force "Internet Explorer 8" browser mode in intranet
X-UA-Compatible not working in IE 9 for intranet sites
intranet jsf application opening in compatibility mode in IE9
How to fix Document mode restart in IE 9
Any help is appreciated.
First Edit
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link type="text/css" rel="stylesheet" href="/payroll/javax.faces.resource/theme.css.jsf?ln=primefaces-bluesky" />
<link type="text/css" rel="stylesheet" href="/payroll/javax.faces.resource/css/screen.css.jsf" />
<script type="text/javascript" src="/payroll/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&v=5.1.7"></script>
<script type="text/javascript" src="/payroll/javax.faces.resource/primefaces.js.jsf?ln=primefaces&v=5.1.7"></script>
<link type="text/css" rel="stylesheet" href="/payroll/javax.faces.resource/primefaces.css.jsf?ln=primefaces&v=5.1.7" />
<script type="text/javascript" src="/payroll/javax.faces.resource/jquery/jquery-plugins.js.jsf?ln=primefaces&v=5.1.7"></script>
<title>Payroll Center</title>
<script type="text/javascript" src="/payroll/javax.faces.resource/js/script.js.jsf"></script><!--[if lt IE 9]>
<script type="text/javascript" src="/payroll/resources/js/selectivizr-min.js"></script><![endif]-->
<link rel="shortcut icon" href="/payroll/resources/img/favicon.ico" />
</head>
Second Edit:
Screenshot is from IE developer tool.
I removed that xml tag
There are two things in tool Browser mode and Document Mode.
Document Mode is getting changed to IE8 Standards but Browser mode remains the same, Browser mode is the key to change version which does not gets changed.
I might me wrong i am just guessing for now that document mode gives ability to run some IE8 features but still running under IE8 compatibility mode which is basicall version IE7. NOT SURE GUESS
Third Edit:
As per following blog you can not change browser mode but this was written in 2010. i am no sure how much valid this is but what he explains actually happening. But require second opinion if this is really true. http://blogs.msdn.com/b/ie/archive/2010/10/19/testing-sites-with-browser-mode-vs-doc-mode.aspx
Thanks again for your time
I'm trying to use an SVG file in an IMG tag. In my local environment works, but when pushing to the server it doesn't. I assume I have an issue with the type of document served, but can't figure how to fix it. Here's the code that loads the SVG:
<img src="images/icon-reputation.svg" />
Here's my DOCTYPE and header info:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>SVG</title>
</head>
Any clues? Thanks.
Make sure your web server is serving the SVG files with the correct ContentType. You can check what the type is by looking in the Net/Network section of your (desktop) browser developer tools.
The way you configure the server depends on the server of course. But, for example, for apache it is:
AddType image/svg+xml svg