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.
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.
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>.
In a Cordova app that I am working on there is an iframe. The problem is that when testing the app (both simulator and on device) the iframe is blank. On Android the iframe works perfectly however.
The iframe is loaded dynamicly in an Angular directive.
Within the directive link function the following code is used to load and append the iframe to the directive's element:
var iframe = angular.element('<iframe class="widget" width="' + widgetWidth + '" height="' + widgetHeight + '"></iframe>');
iframe.attr('src', url);
element.append(iframe);
I have also tried using something in the following lines:
var iframe = document.createElement('iframe');
iframe.src = url;
This results in somthing like the following (using Safari web inspector):
<iframe class="widget" width="384" height="505" src="http://hostname/correct/uri"></iframe>
In my index.html file I have the following set:
<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-eval'; connect-src * 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline';">
I also have the following lines in my cordova config.xml:
<access origin="*" subdomains="true" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
There is also no errors or warnings in Safari Web Inspector.
So my question is, is there some trickery to get iFrames to work in Cordova iOS apps that I am missing. Or what is wrong with my current config/code?
I am using angularjs 1.5.3 and have jquery 2.2.1 (loaded before angularjs) in case that helps.
The problem was the allow-navigation tag. So to solve it I only had to put the <allow-navigation href="*" /> tag into the project's config.xml file.
I came to the solution through the output box in xcode while the simulator was running. There was a message containing the url of the iframe in question and something about "internal navigation rejected".
Have you tried setting child-src and/or frame-ancestors in the Content-Security-Policy meta tag? These may need setting to * also or something more restrictive like just the iframe source URL(s) you are using.
There's information about this at content-security-policy.com
Example based on your content security policy:
<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-eval'; child-src *; connect-src * 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline';">