I’ve somehow prevented iFrames from working on Google Sites
What steps have you taken to resolve the issue?
I read the other posts about iFrames being blocked. I created a _Headers file with “X-Frame-Options: SAMEORIGIN” and “Content-Security-Policy: script-src ‘self’” but that didn’t help. 404 pages seem to work fine, but the HTML5 page works on site but not in Google Sites.
I think just visit the sites? I’m not sure how to allow just the Google Site to be the only one to allow iFrames. I looked through the Mozilla documentation and through the other posts here but I’m a History teacher, not a programmer, so it’s a bit confusing for me. I need step-by-step instructions and I can’t seem to find them anywhere. I just started with Cloudflare over the summer for my WWII site that I use with students for 25 years and I don’t have as much time as I’d like to get into the technical end of things. Thank you!
On domainB.com, make sure your domainB.com is using Cloudflare and proxied DNS records. It is recommended to use Content-Security-Policy as you’ve stated and as a more robust solution in such cases, since x-frame-options is obsolete and not recommended.
Regarding the Content Security Policy (CSP), you’d have to add on domainB.com an HTTP Header and set Content-Security-Policy "frame-ancestors 'self' https://domainA.com;" to specify which domain(s) are allowed to embed your Website.
Since you want to restrict who can embed domainB.com in an iframe, the CSP must be applied to domainB.com. This way, domainB.com will only allow itself to be embedded by domainA.com and not by any other domain.
You can achieve this by leveraging the available Transform Rules at Cloudflare Dashboard by Modifying the Response Header. Helpful step-by-step article how to add a modify HTTP Response:
You’d have to have something similar as below for the CSP response header on your domain, feel free to change the ‘when incoming requests match …’ to whatever makes most sense for your setup (whole domain or some particular URL):
If your domain is behind Cloudflare and you’re using Google Sites, then you’d have to check if you already have got some CSP from Google Sites added, therefrom use the “Set static” as action/method to replace all existing header fields of a response with the entered value (if they already exist at Google Sites) and if not then it’ll add the entered value to the responses where CSP header is not present.
Good read from the Blog:
You’ve also got some mixed and double headers present:
On Google Sites URl there is a CSP present already:
Despite not related to the Cloudflare, from the Source Code View, on the line No. 5, you’ve closed the link element a bit incorrect inside the head element:
Thanks! It’s a bit bizarre because I didn’t alter the code; I exported an updated version from Adobe InDesign, and it works unless I put it into the original folder. It works in other folders and on my computer. I’ll look for that in the the code.