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:;
">
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';
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';
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 get this error in my Ionic app when I run on my localhost with Chrome (ionic serve):
[Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.
win # :8100/plugins/cordova-plugin-geolocation/www/android/geolocation.js:35
How to make it disappear ?
How to be sure there's no issue with a device ?
Try again using this plugin in your browser.
It allows to you request any site with ajax from any source, no matter http/https discrepancies and the like. Practically adds the Allow-Control-Allow-Origin: * header in the response.
Please keep in mind that this is a band-aid solution. Your server response has to actually have the 'Access-Control-Allow-Origin': '*' header, preferably with a more specific value than *.
Because switching to HTTPS can be painful or impossible depending on your architecture,
I found a workaround solution: you can use the Google Maps Geolocation API. Although it has usage limits, it does the job. You will need an browser API key, so don't forget to limit it's usage to your page hostname.
I use it as a fallback method to the getCurrentPosition() method if it fails. It allows me to make it work until I switch to HTTPS.
Here's the JSFiddles:
HTTP: getCurrentPosition() will fail and fall back to the API
HTTPS: getCurrentPosition() will succeed
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/