iFrame on Google Sites

What is the name of the domain?

worldwar2database.com

What is the error number?

None

What is the error message?

www.worldwar2database.com refused to connect.

What is the issue you’re encountering

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.

Cloudflare Page: https://www.worldwar2database.com/grace-church-plaque/
Google Sites: World Wars Fall 2024 - wwiposters

What are the steps to reproduce the issue?

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!

Screenshot of the error

On domainA.com use HTML code to embed domainB.com Webpage as:

<iframe src="https://domainB.com/something/" width="600" height="400"></iframe>

On domainB.com, make sure your domainB.com is using Cloudflare and :orange: 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:

slika

On Google Sites URl there is a CSP present already:
slika

I had problems with the HTML5 code - the link changed to https://www.worldwar2database.com/gcplaque.html

Apologies for the confusion. I’m not sure why the CSS at the original link stopped loading.

Thanks, that’s a start, I’ll give those docs a try! I appreciate the reply.

1 Like

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:

Remove the </link>.

Looks good to me:

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.

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.