Is it possible to iFrame a Workers Site?
I have a Workers Site that is running like a charm but I can’t seem to embed it in a page like I might a regular html element.
I am using just a regular iframe like this:
<iframe>https://example.com/index.html</iframe>
What am I doing worng?
or
Is iFraming Worker Sites not possible?
I don’t think this is the correct way to use iframe.
Refer to this instead: HTML Iframes
Unfortunately that way also does not seem to work either:
<iframe src="https://example.com/index.html" height="700" width="100%"></iframe>
It just errors saying “example.com refused to connect”
Which makes me assume embedding a Worker Site in an iFrame isn’t allowed.
Hopefully someone with a good knowledge of Workers can shed some light on this
Can you share where do you see this message?
Also, when you provide the URL of the actual webpage that contains the iframe, we might be able to assist further.
That error appears in the iframe box like this:
The webpage is to be a Custom Error Page so hard to show it. I am just working on a super basic html page in notepad to use, literally the Custom Error Code and the iframe, super simple (I had hoped!)
This is the basic code I am using:
<html>
<head></head>
<body>
<h2>::CLOUDFLARE_ERROR_500S_BOX::</h2>
<iframe src="https://example.com/index.html" height="700" width="100%"></iframe>
</body>
</html>
If I use a regular (server hosted) website instead of a Worker Site it works totally fine
This does not provide any useful insights - it can be caused by different reasons.
Can you open F12 Developers Tools - Network tab and try refresh the page, do you see any resources failed to load? If yes, what’s the reason?
Ah
X-Frame Options set to deny
is going to be it. As there is no server to change that setting on (being a Worker Site) how do I get around that?
So you mentioned that you want to embed the iframe into the custom error page. Well, I don’t think you can change X-Frame-Options header value for the custom error page.
Anyway, thanks for trying this out. It would be useful for other people who wants to do the similar thing.
What I mean how do I change the “X-Frame-Options header value” for my Workers Site?
I can iframe a regular site no problem.
But I can not iframe my worker site anywhere, be in on a regular hosted webpage, on a testing site like W3Schools Tryit Editor
or even iframing a worker element in the worker site itself.
It is the Worker Site X-Frame-Options header value that I want to change, but there is no server to change it on, so how would I be able to do it?
Or is iframing / embedding a Worker Site not possible? (In which case how do people use them beyond very basic functions?)
For example I have a web player that plays an audio file, I would love to use a worker for the player (it works great) but when I try to embed it into my regular site I get this same X-Frame-Options header value error.
Can you share the output of this command?
curl -o /dev/null -s --dump-header - https://example.com/index.html
Sure
HTTP/1.1 200 OK
Date: Fri, 12 Feb 2021 09:30:33 GMT
Content-Type: text/html; charset=utf8
Content-Length: 14737
Connection: keep-alive
Set-Cookie: __cfduid=d5222655209080433c5683a00ca8ed4ce1613122233; expires=Sun, 14-Mar-21 09:30:33 GMT; path=/; domain=.subfm.online; HttpOnly; SameSite=Lax; Secure
Accept-Ranges: bytes
ETag: index.9998d174b4.html
CF-Cache-Status: MISS
Feature-Policy: none
Referrer-Policy: unsafe-url
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
cf-request-id: 08372cfd180000edefab2c7000000001
Expect-CT: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
Report-To: {"group":"cf-nel","endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report?s=81bpSREDMcEsJUGoVXAeCG7T1NY7fxEh%2FYAQbdTCajwpnYGUdTYXcn%2FhKgWcVXdwJMkCZfTdGh91jSIP5mQm7dTwL%2FvHQ2Re%2B5Ed01Q%3D"}],"max_age":604800}
NEL: {"max_age":604800,"report_to":"cf-nel"}
Server: cloudflare
CF-RAY: 62054aa82e64edef-CDGThat looks to me like your worker is adding a lot of headers, Referer-Policy, Featyre-Policy etc., as well as X-Frame-Options.
If you search your worker code base for X-Frame-Options what do you find?
Are you using any Cloudflare Apps? I recall there was at least one that could be used to add headers.
I literally just used the walk through here: Start from scratch · Cloudflare Workers docs
and then put my html one page site up
I didnt write any Workers code myself at all, probably why I cant get it to do what I want! haha
Ive changed it from DENY to ALLOW but it still shows in script.js of the worker dir
Still same error
Will keep digging
Sorry to keep replying but it’s finally working!
Thanks for your help!
Now it’s time to get busy! haha 
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.