Webflow page embed not working

Design help Custom code
1

Hello,

I have a page where I embeded a webflow.io page, before I had a webflow hosting. When previewing on webflow.io the page works. However when I preview it now on my own domain it says:

Refused to display ‘https://bakkerij.webflow.io/’ in a frame because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self’ https://.webflow.com http://.webflow.com http://*.webflow.io http://webflow.com https://webflow.com”.

I guess this is a restriction from webflow… But is there a way to embed webflow.io pages to showcase?

image
image856×838 189 KB

Example on webflow.io

Example on my own domain on webflow hosting

The code I’m using:

 <iframe id="ViostreamIframe"
  width="100%" height="100%"
  src="https://bakkerij.webflow.io/"
  frameborder="0" 
  allowfullscreen=""
  style="position:absolute; top:0; left: 0;  border-radius:5px; z-index:3;">
 </iframe>

My other options are:

  • Hosting all the showcase projects I’ve made on my own… However, I have the webflow hosting … I can’t add folders to it? Like websitetijd/portfoliotemplate/index.html Also adding those projects to my main project will clash with my CSS classnamings etc. Therefore I should get another website hosting from another company, and create subdomains?

  • make a lottie/video out of it…

  • only show an scrollable image…

  • more…?

2

This is browser security. The technique you are using was used in XSS attacks back in the day, that’s why it’s blocked.

The most compatible way -from what I understand you want to do- is to use an image, video or a lottie.

Regarding hosting; it’s not very clear to me what you want to achieve. What part of your website is webflow, what part is external? How do you want those 2 to co-exist? Who is parent to who?

Webflow hosting is not like regular shared hosting. There is no tree, you cannot really manage filestructure. It’s more like a container running your build that’s being compiled through webflow when you publish.

1 Like
3

I had created some projects which I wanted to showcase on my website. I think I will add an extra webhosting beside the webflow hosting of my parent project, to showcase those projects and use subdomains for each project.

I’ll convert it to back images/videos. Thanks :slight_smile:

1 Like
4

Oh ok. So your portfolio website is a webflow site and on that webflow site you want to realtime show those other projects that were not built in webflow? In that case you can indeed clip them (video, img, lottie) on your webflow portfolio and host those clips on webflow.

But if you want those external projects to be visited live, you need to host them somewhere separate. XSS/phishing protection in modern browsers will halt your iFrame loading of an external website. There might be some l33t hax around that, but I wouldn’t waste production time fighting the webkit devs for exploitable bugs :wink: Those are the guys that write the books on browser building.

5

Hi, I have just checked out your website link and I can see that you managed to get this to work! Well done. Would you mind sharing how? I too would like to achieve this.

6

I actually haven’t fixed it by using embed… I created a image (jpg) of the whole page and inserted it inside… Since Webflow blocks embedding to their webflow.io hosting.