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.
Related
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.
I use cordova regular on ubuntu for android.
I compile with build.phonegap.com for ios, uploading zip project.
with Android all fine, but with ios deviceready not fire until i tap or change the focus to other thing.
Mi index is simple:
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy"
content="
default-src 'self' https://ssl.gstatic.com data:* gap://* file://* tel:* 'unsafe-inline' 'unsafe-eval' ;
style-src 'self' 'unsafe-inline';
frame-src 'self' s-static.ak.facebook.com static.ak.facebook.com www.facebook.com;
connect-src 'self' https://app.mypage.es/ connect.facebook.net www.facebook.com;
media-src *;
img-src 'self' www.google-analytics.com www.facebook.com;
script-src 'self' 'unsafe-inline' www.google-analytics.com connect.facebook.net www.facebook.com">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script src="fastclick.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
and the index.js
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {....stuff}
i try diferent alternatives to content-policy and diferent ways to atach event
What is the correct way?
finally removing all platforms and plugins, and adding them after, solve my problems.
have you tried restarting?
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?
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>.