This might be trivial but I'm trying to set up Facebook messenger for websites as it's available through pages. It loads perfectly fine on Firefox (as below)
When it comes to loading it on Chrome, I'm greeted by the following error:
Refused to display 'https://www.facebook.com/v2.12/plugins/customerchat.php?app_id=226382507935447&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FNh1oH0K63yz.js%3Fversion%3D42%23cb%3Df3ee1b33e9fa724%26domain%3Dwww.MYWEBSITE.com%26origin%3Dhttps%253A%252F%252Fwww.MYWEBSITE.com%252Ffa7870694c0fac%26relation%3Dparent.parent&container_width=0&locale=en_US&page_id=1323494501052770&sdk=joey' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.facebook.com".
I've done my fair share of research around this and run through adding/removing my domain names from the whitelist, turning off/modifying my 'Content-Security-Policy header & X-Frame-Options headers, but to no avail.
I currently have my X-Frame-Options header set to: SAMEORIGIN and my Content-Security-Policy to:
default-src 'self';
frame-src 'self' https://*.facebook.com https://*.googleapis.com;
script-src 'self' 'unsafe-inline' 'unsafe-eval' http://cdn.adaptivedigital.io https://*.googleapis.com https://*.gstatic.com https://*.facebook.net https://*.facebook.com *.google-analytics.com https://cdnjs.cloudflare.com;
style-src 'self' 'unsafe-inline' http://cdn.adaptivedigital.io https://*.googleapis.com;
img-src 'self' http://cdn.adaptivedigital.io https://*.google-analytics.com https://*.facebook.com https://*.facebook.net https://*.googleapis.com https://*.gstatic.com;
font-src 'self' http://cdn.adaptivedigital.io https://*.googleapis.com https://*.gstatic.com;
object-src 'none'
I've been stuck on this for the last 4 hours, any help would be greatly appreciated!
Btw,
Chrome Version: Version 64.0.3282.186 (Official Build) (64-bit)
I don't believe it. Turns out I had the following set;
add_header Referrer-Policy 'no-referrer';
Which in turn broke the Facebook messenger plugin (still weird that it only happened in Chrome).
I ended up setting it to;
add_header Referrer-Policy 'origin';
Related
I want to integrate a cookie banner (permit/deny/...) in the login screen of Keycloak.
The Keycloak login screen is the first page a user gets to see and Keycloak already wants to set cookies.
Therefore I need to include a JS like <script id="..." src="https://the-service-provider/the-script.js" data-cbid="..." data-blockingmode="auto" type="text/javascript"></script>.
I tried to adapt the template.ftl in my Keycloak Theme, but this gave me the error
Refused to frame 'https://the-service-provider/' because it violates the following Content Security Policy directive: "frame-src 'self'".
Can I change the Content-Security-Policy in Keycloak? Or is there a better way to add the JS?
I already found out how to change the Content-Security-Policy in Keycloak.
Realm Settings -> Security Defenses -> Content-Security-Policy
Here I changed the value to frame-src 'self' https://the-service-provider; frame-ancestors 'self'; object-src 'none';
I would like to use facebook connect with ionic / Cordova.
it requires Content-Security-Policy.
What are the most restricted values for the following parameters that will still enable to use the facebook connect.
style-src
script-src
connect-src
Make sure you understand all those values. style-src is needed when you load external styles. script-src when you load external scripts. connect-src when you - for example - use an AJAX call. connect-src would be needed for calls to the Graph API:: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src
So if you load some JS SDK (like the FB JS SDK), and use it to do API Calls, you would need something like this: "script-src 'self' *.facebook.com; connect-src 'self' graph.facebook.com"
Not tested though. But with Cordova, as far as i remember, you can easily debug your App with Chrome Dev Tools, if you connect your phone. The console errors should tell you exactly what CSP value is missing.
Another thread that may help you: Cordova: CSP issue on Android when requesting data over HTTPS
In the end, just restrict as much as possible at the beginning and allow things one by one. You can easily find out what you need that way, and browser consoles do tell you exactly what´s missing and why.
This is the minimum requirements that worked for me, to use facebook connect from ionic / cordova.
Big thanks for #luschn for guidance and assistant to debug it properly.
<meta http-equiv="Content-Security-Policy"
content="style-src 'self' 'unsafe-inline';
script-src 'self' 'unsafe-inline' 'unsafe-eval'
http://localhost https://connect.facebook.net;
connect-src 'self'
https://*.mydomain.com <!-- Replace with your own
domain-->
https://*.facebook.net ws: wss:;
">
It takes 2 to 3 seconds to pull down a PDF from my web server in my Ionic 1 app on Android. It takes about 45 seconds to get the same PDF on iOS. Android was this slow as well - then I added gap://ready file://* to the content security policy and that made android fast again. So, two questions:
Is there a corresponding iOS content security policy key that I'm missing?
Why would adding something to the content security policy make downloading a file faster (instead of just making it available or not available)?
For reference, here's my entire content security policy:
content="default-src gap://ready file://* *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval';img-src * 'unsafe-inline' 'unsafe-eval' data: blob:"
I'm using the code below in my htaccess but for some reason I'm getting an error message in the console. Any idea what the issue is?
Thanks,
<IfModule mod_headers.c>
Header set Content-Security-Policy "script-src 'self' https://maxcdn.bootstrapcdn.com/ https://oss.maxcdn.com/ https://cdnjs.cloudflare.com https://ajax.googleapis.com https://maps.googleapis.com https://fonts.googleapis.com/ https://www.facebook.com/ https://www.facebook.net/ https://connect.facebook.net https://connect.facebook.com"
</IfModule>
You have an inline script on your page, ie something like this:
<script>
...
</script>
This is either directly in your HTML or in a component used (e.g. a Facebook widget you pull in to you page adds this) or perhaps in a browser extension your browser uses.
You can allow this online script by adding unsafe-inline to your config like this:
<IfModule mod_headers.c>
Header set Content-Security-Policy "script-src 'unsafe-inline' 'self' https://maxcdn.bootstrapcdn.com/ https://oss.maxcdn.com/ https://cdnjs.cloudflare.com https://ajax.googleapis.com https://maps.googleapis.com https://fonts.googleapis.com/ https://www.facebook.com/ https://www.facebook.net/ https://connect.facebook.net https://connect.facebook.com"
</IfModule>
However this would defeat most of the protections of Content Security Policy (CSP) which is specifically designed to prevent rogue scripts running for your site to prevent security problems like Cross Site Scripting (XSS).
I suggest you read up a lot more on CSP before implementing it. Can suggest my own blog post here as a starter: https://www.tunetheweb.com/security/http-security-headers/csp/
I'm testing clickjacking mitigation with a simple page like this on another domain:
<iframe src="https://my.domain/login"></iframe>
My login page sends the following headers:
HTTP/1.1 302 Found
X-Frame-Options: SAMEORIGIN
Location: https://my.domain/landing
...
I'm surprised to see both IE 10 and Chrome 33 follow the redirect and display my landing page inside the <iframe>. My landing page does not send X-Frame-Options, but I expected the first X-Frame-Options on the login page to trump the redirect. How can I prevent browsers from following the redirect when my login page is displayed in a frame?
I should add that things work as expected (<iframe> is empty/blocked) if the login page doesn't send an HTTP redirect.
From the terminology used in RFC 7034, I conclude that browsers will not apply X-Frame-Options restrictions for HTTP redirects (status codes 301, 302, etc), but rather for any response where the browser processes the content, e.g.:
The use of "X-Frame-Options" allows a web page from host B to
declare that its content (for example, a button, links, text, etc.)
must not be displayed in a frame (<frame> or <iframe>) of another
page (e.g., from host A). This is done by a policy declared in the
HTTP header and enforced by browser implementations as documented
here.
or:
The X-Frame-Options HTTP header field indicates a policy that
specifies whether the browser should render the transmitted resource
within a <frame> or an <iframe>. Servers can declare this policy in
the header of their HTTP responses to prevent clickjacking attacks,
which ensures that their content is not embedded into other pages or
frames.
As an alternative for the login page you could return a HTTP status code 200 and a meta-tag or javascript for redirection, the X-Frame-Option will then apply, but I admit that it's ugly.