How to set X-Frame Options to ALLOW-FROM https://example.com and SAMEORIGIN on server

Question

I have a requirement to set the X-Frame options on the server level to either:

• X-Frame-Options: SAMEORIGIN
• X-Frame-Options: ALLOW-FROM https://example.com/

Understand that X-Frame Options are mutually exclusive. See here.

However, my application requires framing in https://example.com and also from its SAMEORIGIN.

Please advise if there is a way around this while retainining my application's requirement to having allow framing on the same origin and be framed on 1 external site.

Or is this impossible?

Answer 1

In addition to only supporting one instance of the header, X-Frame-Options does not support any more than just one site, SAMEORIGIN or not.

You'll have to use Content-Security-Policy and frame-ancestors, which does support multiple origins, like so:

Content-Security-Policy: frame-ancestors 'self' https://example.com

A couple notes to bear in mind:

• frame-ancestors obsoletes X-Frame-Options - meaning that if frame-ancestors is present and the browser supports it, it will override the behaviour of X-Frame-Options.
• Internet Explorer and Edge do not currently support the frame-ancestors directive, according to MDN. This means they will fall back to X-Frame-Options. If you need to support multiple origins in IE or Edge, see this answer on SO with a workaround.