This question is like a followup to Why are non-custom headers included in Access-Control-Request-Headers?
During a CORS preflight request, both Chrome and Safari include the Origin header in the Access-Control-Request-Headers header. They ignore this header, in the sense that Origin doesn't need to be in the corresponding Access-Control-Allow-Headers response header. And while the CORS spec doesn't define Origin as a simple header, there are other headers, such as User-Agent, that aren't defined as simple headers and yet aren't included in Access-Control-Request-Headers. Firefox does not include the Origin header in Access-Control-Request-Headers.
So my question is: why do Chrome & Safari include the Origin header in Access-Control-Request-Headers, especially since it has no effect? My guess is because they are both based on WebKit, but I'm looking for an answer that digs deeper into why this behavior exists at all.
Related
How do you do this? I want only one other website to be able to load my main website in an iFrame but nothing is working.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
Apparently as I understand it the protocol you set in .htaccess is this
So far I've tried:
1.
Header set Content-Security-Policy "frame-ancestors 'self' https://example.subdomain.co;"
2.
Header always set Content-Security-Policy "frame-ancestors 'self' 'https://example.subdomain.co';"
3.
Header set Content-Security-Policy "frame-ancestors 'self' 'https://example.subdomain.co';"
None of these work. When I try to load an iframe of example.com inside https://example.subdomain.co I get the following error:
Refused to display 'https://example.com/' in a frame because it set
'X-Frame-Options' to 'sameorigin'.
And then I get more confused because apparently you can only do DENY and SAMEORIGIN with this.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
The X-Frame-Options HTTP response header can be used to indicate
whether or not a browser should be allowed to render a page in a
<frame>, <iframe>, <embed> or <object>. Sites can use this to avoid
click-jacking attacks, by ensuring that their content is not embedded into other sites.
The added security is provided only if the user accessing the document
is using a browser that supports X-Frame-Options.
The one I would have wanted is ALLOW FROM but
ALLOW-FROM uri This is an obsolete directive that no longer works in
modern browsers. Don't use it. In supporting legacy browsers, a page
can be displayed in a frame only on the specified origin uri. Note
that in the legacy Firefox implementation this still suffered from the
same problem as SAMEORIGIN did — it doesn't check the frame ancestors
to see if they are in the same origin. The Content-Security-Policy
HTTP header has a frame-ancestors directive which you can use instead.
It's deprecated and it doesn't work.
Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'
This answer doesn't help because they don't talk about what I want to do, they just explain what it is.
How to set 'X-Frame-Options' on iframe?
Again, not helpful because it's explaining to OP that the header is set on the website in the iframe source.
Is there a way to set it X-Frame-Options for frame-ancestors somehow to make this work so that I can load an iframe of my website on one other specific website? Or is this not possible?
When you set frame-ancestors correctly all browsers that understand it will disregard X-Frame-Options. This means that you can set both headers and use ALLOW-FROM as you will then server X-Frame-Options to IE and frame-ancestors to other browsers.
Have you checked if your Content-Security-Policy is present as a response header? Your first version is the most correct one, but you can drop the scheme as such: "frame-ancestors 'self' example.subdomain.co;", there should not be any single quotes around hosts in sources.
I am creating my personal website, and I am using live-server, but I get the CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource error. So I review the documentation, and they recommend adding --cors flag to enable cors for any origin, I did it, but the same error appears.
By the way, that's happened, especially with the font awesome script kit.
Any solutions do you want to provide me? Thanks before all.
Are these HTML tags? Add crossorigin attribute to the end of your script tag then.
I'm getting this console log error when loading a font from a remote server:
Access to font at
'https://cdn.userway.org/widgetapp/bundles/udf/UserwayDyslexiaFont-Bold-Italic.woff'
from origin 'https://www.myWebSite.com' has been blocked by CORS
policy: No 'Access-Control-Allow-Origin' header is present on the
requested resource.
I've updated my web app to permit this font server. Now I need to get my CDN, AWS Cloudfront, to permit it.
The AWS docs have an article about this - How do I resolve the "No 'Access-Control-Allow-Origin' header is present on the requested resource" error from CloudFront?:
Under Cache key contents, for Headers, select Whitelist. From the list
of headers, select one of the headers required by your origin. Then,
choose Add header. Repeat this step for all the headers required by
your origin.
Here's what the list of headers looks like:
And here's what I know about the headers for this resource from Chrome dev tools.
What do I need to select from the List of Headers so that my site can load this font?
UPDATE
Hmmm.... if I'm reading this correctly:
https://web.dev/cross-origin-resource-sharing/
...the error message I'm getting is coming from the server providing the font, and has nothing to do with any setup on my server or CDN.
Is that correct?
Courtesy of AWS tech support, the answer is:
Access-Control-Request-Headers
Access-Control-Request-Method
Origin
Content Security Policy specification says
The frame-ancestors directive obsoletes the X-Frame-Options header. If a resource has both policies, the frame-ancestors policy SHOULD be enforced and the X-Frame-Options policy SHOULD be ignored.
So from my understanding if both Content-Security-Policy and X-Frame-Options headers are present, then X-Frame-Options should be ignored.
I have a web app with both headers, and looks like Firefox 38 is ignores Content-Security-Policy header and uses X-Frame-Options header instead.
My sample headers are:
Content-Security-Policy:frame-ancestors 'self' local.com *.local.com
X-Frame-Options:Allow-From http://local.com
I want that my frame should be accessed from local.com and all subdomains. Local.com is just example. If X-Frame-Options header is present, then it allows just http://local.com, but if i remove it, then Firefox uses Content-Security-Policy header and works fine for domain and subdomains.
Does it mean that Firefox isn't implementing this part? Or it's just too new specification and Firefox doesn't implement it yet? Is there any other way to force Content-Security-Policy header usage?
I know that Chrome works fine with Content-Security-Policy and IE can work just with X-Frame-Options, but looks like i can't combine both headers, as Firefox works not in right way.
One possible way is to sent X-Frame-Options just for IE, and Content-Security-Policy for all other, but is there a better way?
Thanks!
frame-ancestors only appeared in CSP Level 2 (see the changelog) so it's very likely that Firefox 38 just hasn't implemented it yet.
You can verify that quite easily by watching the JavaScript console - the browser will display warnings about each of the CSP directives it doesn't understand.
You can also download Firefox from the beta channel and see if it makes difference, but obviously it won't help much if you just want to build a interoperable solution for production website...
for my web application, I'm configuring a set of OWASP security headers, like X-Frame-Options or X-Content-Type-Options. Now I'm wondering whether I should send all those headers for every request, or if I should use them only for specific requests, e.g., use the "full" bunch of security headers for get, post, delete, put, and send only CORS headers for preflight requests.
There is no harm in outputting the full security headers for each content type you serve (e.g. text/html, application/java) and for each request method (GET, PUT, etc).
However the ones that would be applicable for different requests and responses are discussed below.
Regarding returned content types:
X-Content-Type-Options especially needs to be on all content types, as otherwise types such as application/java could be interpreted differently by Internet Explorer with its content-sniffing.
X-Frame-Options for all content types to stop them being framed, although this does not prevent them being loaded by other means (e.g. <img> tag).
X-XSS-Protection added to HTML content types only should be enough.
Content-Security-Policy for HTML content types only should be enough.
Regarding HTTP methods (GET, POST, PUT etc):
Strict-Transport-Security is better if it is output on every request as it will renew the sliding expiration and it will also set the HSTS policy whichever way the resource was first requested.
Public Key Pinning Extension for HTTP for every request, in much the same way as the Strict-Transport-Security header in that once it has been output, the policy will be set. As this is the sooner the better, if the site does this for all requests there is more chance of it being set earlier.