After turning on CSP headers using
Header always set Content-Security-Policy "default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"`
in Apache, all browsers display my page fine except Microsoft Edge that no longer renders the HTML5 meter element correctly and displays lots of CSP14312 errors in the console telling me that the style-src 'self' https://fonts.googleapis.com directive in the CSP header was violated by inline style even though I have no inline style on the page.
Unfortunately, I cannot see where exactly the violation occurs. My page uses Google Fonts (remote) and I also have Font Awesome stored locally on the server. If someone is willing to have a look, https://smares.de/ is the URL.
Do you have any idea what Edge's problem is?
I started deleting line-by-line and for some weird reason, Edge doesn't seem to like the HTML5 meter element. If I remove the meter element, it stops complaining. It also issues one warning for <meter...> and one warning for </meter>.
Related
I'm getting a bunch of Content Security Policy errors in Electron developer console for adding google font :
Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Inter:wght#300;400&display=swap' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
I'm using electron-forge's React with TypeScript boilerplate.
Easiest way would probably be to set a Content-Security-Policy meta tag in the header of your template like this:
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self';
font-src 'self' https://fonts.gstatic.com;
style-src 'self' https://fonts.googleapis.com">
<!-- ...other stuff... -->
</head>
Guide on how to use these is here:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#multiple_content_security_policies
I'm currently in my first hours of electron myself, without react for now, and that's how I got around it and I think that's how you're supposed to do it.
My web app has an iframe:
<div id="iframe-wrapper" class="iframe-wrapper">
<iframe src="https://xxx.company.com/aaa/bbbb/cccc" style="border:none; height: 100%; width : 100%; scrolling: no;">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
It works fine in any browser in windows desktop and android devices (url has been loaded into ) but not in iOS and MacOS (except Chrome on MacOS).
In iOS - iPad/iPhone - Safari, i see this error in console
refuse to load https://xxx.company.com/aaa/bbbb/cccc because it appears in neither the child-src directive nor the default-source directive of the content security policy
I did research and see that is ralated to Content-security-Policy , So i use this one
<meta http-equiv="Content-Security-Policy" content="
default-src https://*.company.com;
child-src https://*.company.com;
frame-src https://*.company.com;">
or
<meta http-equiv="Content-Security-Policy" content="
default-src * data: blob: ws: wss: gap://ready ;
style-src * 'unsafe-inline';
script-src * 'unsafe-inline' 'unsafe-eval';
connect-src * ws: wss:;
child-src * https://*.company.com gap://ready;
frame-src * https://*.company.com gap://ready">
None of them works. Could you please help me to make it works.
UPDATED:
here is what i see in response header in ipad safari (iOS 10.2.1) and MacOS -Safari(latest version). Both of them dont allow to load iframe URL
X-Frame-Options sameorigin
X-XSS-Protection 1;mode=block
X-Content-Type-Options nosniff
X-Webkit-CSP default-src 'self'
But I also see the same header on MacOS and Chrome (macbook pro latest version) and Chrome allow to load iframe without issue on MacOS.
I have an answer for my issue base on the idea to investigate the response header. Thanks to sideshowbaker's reply.
First, I tried to set "Content-Security-Policy" in header meta tag in jsp file. But that one does not work.
So i try to set header value from the server side (spring MVC) in the controller. and it works fine.
public ModelAndView confirmNumber(....,HttpServletResponse response) {
.....
response.setHeader("Content-Security-Policy","style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src *; default-src *; child-src * https://*.company.com; frame-src * https://*.company.com;");
return modelView;
}
Now from the Web Inspector in safari, i can see the header value.
Content Security Policy header directive for Google Re-captcha
I have added following directive for google re-captcha but still I am getting error for recaptcha__en.js
"script-src 'self' https://www.google.com/recaptcha/
https://www.gstatic.com/recaptcha/
"style-src 'self' https://www.google.com/recaptcha/
https://www.gstatic.com/recaptcha/
tried with nonce
"script-src 'self' 'nonce-GoogleRecaptcha' "
"style-src 'self' 'nonce-GoogleRecaptcha' "
<script src='https://www.google.com/recaptcha/api.js' nonce="GoogleRecaptcha" async defer></script>
And also tried to add all the needed hashes
Refused to apply inline style because it violates the following
Content Security Policy directive: "style-src 'self'
https://www.google.com/recaptcha/
https://www.gstatic.com/recaptcha/
'sha256-CwE3Bg0VYQOIdNAkbB/Btdkhul49qZuwgNCMPgNY5zw='
'sha256-MZKTI0Eg1N13tshpFaVW65co/LeICXq4hyVx6GWVlK0='
'sha256-LpfmXS+4ZtL2uPRZgkoR29Ghbxcfime/CsD/4w5VujE='
'sha256-YJO/M9OgDKEBRKGqp4Zd07dzlagbB+qmKgThG52u/Mk='
'sha256-Awu6hl63MCY3jiYHaDclrL7Lic9KcEalXm2o/i3e0v8='
'sha256-WCg1a4AhMGgFRCQG5w+hgG+Q2j8Ygrbd+2dgjByIOIU='
'sha256-ldCXMle1JJUAD9eAjLdSuPIgIBcTcBecWlaXs0A2y4M='
'sha256-+zzuded9+DHoztKyASJeCkVU0gxvYNWMUIQM7x//CB4='
'sha256-6iA6WDOL1mgUULZ6GSs2OOfP4eMuu6iI5agxCjK2m2A='
'sha256-MammJ3J+TGIHdHxYsGLjD6DzRU0ZmxXKZ2DvTePAF0o='". Either the 'unsafe-inline' keyword, a hash
('sha256-Awu6hl63MCY3jiYHaDclrL7Lic9KcEalXm2o/i3e0v8='), or a nonce
('nonce-...') is required to enable inline execution.
As you can see in above hash it shows same hash to add as I have already added.
still i am getting this error.
And I am adding all these header values using meta tag on a layout page.
I got it to work
You´re just missing frame-src 'self' as descfribed here:
I'm using Content-Security-Policy (CSP) on my website. How can I configure it to work with reCAPTCHA?
"style-src 'self' https://fonts.googleapis.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/;
script-src 'self' https://apis.google.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/;
frame-src 'self' https://www.google.com/recaptcha/;
font-src 'self' https://fonts.gstatic.com;
default-src 'self';
object-src 'none';
frame-ancestors 'none';
sandbox allow-forms allow-same-origin allow-scripts; base-uri 'self';";
If you need my implementation details on my project I´ll gladly give them to you.
I try to display a Facebook profil picture in my app, but it doesn't work...
I am using the latest version of Cordova on iOS. When I inspect with weinre, I have the correct URL, I can see the picture on my PC but not in the app.
I have the cordova-plugin-whitelist with:
<access origin="*" />
And I have tried with and without this meta:
<meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;img-src 'self' data: content:;style-src 'self' 'unsafe-inline' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">
But nothing works. Tell me if you need more information.
Thanks for your help, and excuse my English.
Edit:
Example of URL for img: https://scontent.xx.fbcdn.net/v/t1.0-1/c15.0.50.50/p50x50/10354686_10150004552801856_220367501106153455_n.jpg?oh=978df650af5b925f321fe4050af2869f&oe=5911542F
my html code for img:
<img src="https://scontent.xx.fbcdn.net/v/t1.0-1/c15.0.50.50/p50x50/10354686_10150004552801856_220367501106153455_n.jpg?oh=978df650af5b925f321fe4050af2869f&oe=5911542F">
I answer to my question:
it never works when i test on phonegap app (on iphone) but if i install my app (on iphone) it works without this meta:
<meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;img-src 'self' data: content:;style-src 'self' 'unsafe-inline' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">
but if i put this meta it doesn't work.
If someone have an issue to make it works on phonegap app?
I am trying to build an app with Dart and Polymer. But polymer scripts seem to be using eval() in web_components/platform.js:32. Has anyone managed to do this? I tried to change CSP but that helped in first place.
Does anyone have a working example?
Regards and Thanks
Robert
EDIT
manifest.json:
{
"name": "Animatr app",
"version": "1",
"author": "Robert Hartung",
"manifest_version": 2,
"icons": {"128": "animatr_icon.png"},
"app": {
"background": {
"scripts": ["background.js"]
}
},
"content_security_policy": "script-src 'self' unsafe-inline;"
}
main.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animatr app</title>
<link rel="stylesheet" href="animatr_chrome_app.css">
<link rel="import" href="packages/polymer/polymer.html">
</head>
<body>
<script src="packages/chrome/bootstrap.js" defer></script>
<script src="my_chrome_app.dart" type="application/dart;component=1"></script>
</body>
</html>
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' chrome-extension-resource:". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback. (chrome-extension://ofkfcbfhgkoglbgldcdokficikimdjji/packages/web_components/platform.js:32)
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
pubspec.yaml:
name: animatr_app
description: A sample Chrome packaged application
dependencies:
chrome: any
polymer: any
transformers:
- chrome
- polymer:
entry_points:
- app/animatr_chrome_app.html
csp: 'true'
The app does not recognize polymer elements correctly.
I have been struggling with the same issue, trying to run the simple wizard generated polymer app (the one with the counter) as a chrome packaged app.
I have finally managed to at least run the javascript built version of it, trying to understand the csp issues.
For many reason, it sounds like it cannot run native as the packaged app is loaded from the file system and not through pub serve. Loading the unpackaged extension from web/build was not working neither as is. The solution was to load xxx.html_bootstrap.dart.precompiled.js instead of xxx.html_bootstrap.js from the generated html file
What i did was:
remove the chrome transformer as the polymer transformer already replace the dart script reference by a javascript script reference
add csp: true in the polymer transformer option (although it did work without it)
to avoid having to change manually the generated html to load the precompiled.js version, I wrote a simple transformer.
I can then load in Chrome (does not have to be Dartium as it is javascript) the unpacked extension from web/build once I run pub build (release mode needed)
I now simply have this warning:
Deprecation: Automatic generation of output for Content Security
Policy is deprecated and will be removed with the next development
release. Use the --csp option to generate CSP restricted output.
which means likely I would have to find a new hack soon...
You can take a look at https://github.com/dart-lang/spark/tree/master/ide for an example Dart Chrome-Packaged-App. They also make heavily use of Polymer.
Maybe this is related https://github.com/Polymer/polymer/issues/252
It seems this is the related Dart bug https://code.google.com/p/dart/issues/detail?id=17409