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.
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.
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 have a phonegap application, that was working properly until last friday, when it stoped from being accept in apple store with the following message:
This app attempts to access privacy-sensitive data without a usage description. The app's Info.plist must contain an NSPhotoLibraryUsageDescription key with a string value explaining to the user how the app uses this data.
This app attempts to access privacy-sensitive data without a usage description. The app's Info.plist must contain an NSBluetoothPeripheralUsageDescription key with a string value explaining to the user how the app uses this data.
This app attempts to access privacy-sensitive data without a usage description. The app's Info.plist must contain an NSMicrophoneUsageDescription key with a string value explaining to the user how the app uses this data.
To correct this issue, after some research, I come to the following solution, to add some cordova plugins in my config.xml file:
<plugin name="cordova-plugin-media-capture" source="npm" spec="1.4.0">
<variable name="MICROPHONE_USAGE_DESCRIPTION" value="App would like to access your microphone." />
<variable name="CAMERA_USAGE_DESCRIPTION" value="App would like to access the camera." />
<variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="App would like to access the library." />
</plugin>
<plugin name="cordova-plugin-ios-ble-permissions" source="npm" spec="*">
<variable name="BLUETOOTH_USAGE_DESCRIPTION" value="App would like to access your bluetooth." />
</plugin>
This solved the problem in the apple store, and I confirmed that the Info.plist file have all this variables there.
But now the app freezes/crashes in, and only in iOs10 devices.
I'm asking for some guidance/help to identify what could be this problem source.
Thank you all in advance.
EDIT:
Finnaly was able to debug the app remotely and find out some errors like this:
[Error] Refused to load data:text/javascript;charset=utf-(...)-app-shell.html-170.js%0A because it does not appear in the script-src directive of the Content Security Policy
My current meta tag has this values:
<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *; img-src 'self' data: blob: *; media-src 'self' mediastream: blob:; connect-src * blob:">
and whitelist configuration:
<plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
<access origin="*"/>
<allow-navigation href="*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
any tip of what im doing wrong?
It might be caused by Content-Security-Policy.
try to add the default-src gap: in the <meta> tag.
e.g:
<head>
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' gap: wss: ws:; font-src * data:; img-src * data:; style-src 'self' https: 'unsafe-inline'; script-src 'self' https: 'unsafe-inline' 'unsafe-eval'">
</head>
ref:
"No Content-Security-Policy meta tag found." error in my phonegap application
Solved it!
In the meta tag instead of:
script-src 'self' 'unsafe-inline' 'unsafe-eval' *
I added:
script-src 'self' 'unsafe-inline' 'unsafe-eval' data: *;
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>.