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';
Related
I am looking to integrate Cookie based authentication in my FastAPI App. I want the same to work seamlessly with swagger as well.
I want to have a route (eg: /login) which sets my browser cookies. All other protected route uses Depends in the decorator to verify the key present in cookie. How do I get this to work with OpenAPI authorize button?
Important factor here is integration with Swagger/OpenAPI docs auto generated by FastAPI.
You can have a look at the fastapi-users module that implements a cookie-based authentication (it implements other user-management-related stuff as well, so it is worth a look anyway!).
According to the coookie docs:
Configuration
from fastapi_users.authentication import CookieAuthentication
SECRET = "SECRET"
auth_backends = []
cookie_authentication = CookieAuthentication(secret=SECRET, lifetime_seconds=3600)
auth_backends.append(cookie_authentication)
As you can see, instantiation is quite simple. You just have to define
a constant SECRET which is used to encode the token and the lifetime
of the cookie (in seconds).
You can also define the parameters for the generated cookie:
cookie_name (fastapiusersauth): Name of the cookie.
cookie_path (/): Cookie path.
cookie_domain (None): Cookie domain.
cookie_secure (True): Whether to only send the cookie to the server via SSL request.
cookie_httponly (True): Whether to prevent access to the cookie via JavaScript.
cookie_samesite (lax): A string that specifies the same site strategy for the cookie. Valid values are 'lax', 'strict' and 'none'.
Defaults to 'lax'.
Then you can login with a POST request on the /login endpoint and set the cookie on the browser.
I found no info on the auto-OpenAPI integration, but since login is setting the cookie on the browser, you can log in once and then use the API.
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:;
">
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';
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 getting the error:
{"error":{"message":"Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request","type":"OAuthException","code":100,"fbtrace_id":"C0VqQrGq4iM"}
I manually built the login flow with the resulting dialog url:
https://www.facebook.com/dialog/oauth?client_id=970056533030026&auth_type=rerequest&scope=email&display=popup&redirect_uri=https://www.opentable.ie/my/oauth/facebook
On our FB app settings we have:
App Domains has opentable.ie
On Advanced Settings - Valid OAuth redirect URIs we have https://www.opentable.ie/my/oauth/facebook
When I went back to see my logs I saw that redirectUri lost https and is using plain http, that's the only pointer I have.
Any ideas on why we get this error? Thanks guys