Allow your website to be embedded within iFrame (update your CSP header)
#iframe#http#csp
Danilo

Danilo @danilo1

About: building things

Joined:
Feb 17, 2021

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

Publish Date: Jul 21 '23
0 0

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

<iframe src="https://yoursite.com"></iframe>
Enter fullscreen mode Exit fullscreen mode

Almost.

Wait, what is this?

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

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/;');
Enter fullscreen mode Exit fullscreen mode

In ruby on rails:

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

With CSP header, you're good to go!

Comments 0 total

    Add comment