Allow your website to be embedded within iFrame (update your CSP header)

I needed my website to be embedded on one other domain, it should be pretty straightforward, right?

<iframe src="https://yoursite.com"></iframe>

Almost.

Wait, what is this?

Refused to display 'http://localhost:3000/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Okay, so I need to update X-Frame-Options then?

Not really.

X-Frame-Options has only two possible directives: DENY or SAMEORIGIN, none of which allow you to do what you want.

What you need is Content-Security-Policy HTTP header, it has a frame-ancestors directive which is what you need.

To make it work, set you headers to desired domain

In node.js:

res.setHeader('Content-Security-Policy', 'frame-ancestors https://www.google.com/;');

In ruby on rails:

response.headers["Content-Security-Policy"] = "frame-ancestors https://www.google.com/;"

With CSP header, you're good to go!