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/
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:;
">
Setup:
We've implemented the following fix on our server based on this StackOverflow answer:
# ALLOW CROSS DOMAIN FONTS
# -----------------------------------------------------------------------
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
We also have a Facebook like button on the site that is implemented with an AppID.
Issue:
In DEV tools, we see the following three errors (2 SHA-1 errors and a CORS error):
This site makes use of a SHA-1 Certificate; it's recommended you use
certificates with signature algorithms that use hash functions
stronger than SHA-1 = 7r8gQb8MIqE.js
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0.
This can be fixed by moving the resource to the same domain or
enabling CORS. fontawesome-webfont.woff
This site makes use of a SHA-1 Certificate; it's recommended you use
certificates with signature algorithms that use hash functions
stronger than SHA-1 = like.php
If we comment out the the Facebook like button, we don't see any of these errors.
Question:
Does anyone know if the Facbook like button SHA-1 error is triggering the CORS error and does anyone know how to fix this situation?
Update – tried MDN javascript but no change:
Have tried fixing this using javascript as described here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
But I don't fully understand what I'm doing and after clearing the cache etc I'm not seeing the header return of: Access-Control-Allow-Origin: *.
This is what I tried:
<script>
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
var invocation = new XMLHttpRequest();
var url = 'http://netdna.bootstrapcdn.com/font-awesome/';
function callOtherDomain() {
if(invocation) {
invocation.open('GET', url, true);
invocation.onreadystatechange = handler;
invocation.send();
}
}
</script>
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.
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
I added datepicker in my crossrider crossplatform extension its opened properly but when i click on the dates of the calendar to select it gives me following error
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
What i suppose to do to resolve this issue, whoever knows to resolve this issue please reply fast, thanks in advance
You haven't provided any code which make it hard to determine the exact cause, but it's likely that is due to an inline script or similar which is violating the Content Security Policy. Commonly, the issue is resolved by loading the inline code from an external file and applying it using some jQuery or equivalent.