Hi, I try to configure _headers with:
/*
Content-Security-Policy: frame-ancestors *
But its still not working and show the error in console:
«Refused to frame ‘https://goodpromo.site/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘none’”.»
Can you help me to allow use iframe my site on any other sites with iframe?
Hi @33077a, thanks for the post and welcome.
If you do not own the https://goodpromo.site website then it will be prohibited from being displayed within an iFrame due the Content Security Policy being set from who owns the https://goodpromo.site websever.
However if you own the https://goodpromo.site you can set the response header using the code snippet below.
Note: The below code snippet is for setting the response headers if https://goodpromo.site is hosted using Netlify Functions.
If you are using a different web server then you will have to research on “How to set frame-ancestors in YOUR FRAMEWORK HERE”.
response.headers.set(
"Content-Security-Policy",
`frame-ancestors http://your_origin_url_here`
);
Hope the above helps.
Thanks.
My site goodpromo.site is on Netlyfy
But I want to embed on any site (*), not on some specific (as you recommend in frame-ancestors http://your_origin_url_here).
Or will your code embed my site in iframe on any sites?
Exactly using a wildcard indicates that all origins can load the content of https://goodpromo.site in an iFrame.
If you want to limit https://goodpromo.site to specific origins then you have to separate each origin with a space.
For example:
response.headers.set(
"Content-Security-Policy",
`frame-ancestors https://example.org https://example.com https://store.example.com`
);
You can read more about frame-ancestors at CSP: frame-ancestors - HTTP | MDN
Thanks.
Clarnx, thanks, for your help, Im a no-code founder and a little bit scared to click some buttons that I don’t understand
I should click here?
Because earlier I try to add this rule in _headers and in netlify.toml, but it not working.
From _headers or netlify.toml file I cant do that?
Hi @33077a, looks like your site is not served using Netlify functions. No need to click on any buttons.
Your iFrame should work by default if https://goodpromo.site/ is deployed using regular Netlify deployment methods.
The code below should display https://goodpromo.site/ in the iFrame. I tried it in my test environment and it works.
<iframe src="https://goodpromo.site/" height="1000" width="1000" title="Iframe Example"></iframe>
Image of https://goodpromo.site/ rendering in an iFrame below.
If the above does not help, how are you trying to set the iFrame and which framework are you using. Sharing a code snippet of how you are setting the iFrame will also be helpful for debugging.
Thanks.
Wow, that’s right, it’s working now and the X-Frame-Options protection is removed. Maybe Netlify needed a little more time for the changes to work, I don’t know. Thank you for seeing it, everything is working now! Thank you very much 
Hi @33077a thanks for confirming Clarence’s solution helped resolved your problem! I’m happy to hear that. Please let us know if you have any other issues.
I have one more question, iframe working well, but in the console, I have this message – is it normal?
Hi @33077a, yes it is totally normal to have those console errors.
You can read more about Cross-Origin Resource Sharing (CORS) - HTTP | MDN
Thanks.
