Can I have a webflow page in a generated iframe?

Design help General
1

hey there guys :slight_smile:
hope you are all doing well? so this one will sound a bit weird I know but I need some webflow goodness on our site which already has a cms and a less-than-desirable builder. I do have the plan where I can export my code from webflow, but the cms only has this really basic html, css and javascript integration js is just for a script-tag. so I thought I would create a fab webflow page and impress the heck out of everyone and use an iframe-generator to embed the page and found this iframe generator that I thought I could embed with

I tested it with one of my weblow sites but when I tested the iframe it said that weblow was not allowing me to render.

webflow you are my only hope (excuse the star wars ref) but its true. :slight_smile: can I upgrade or do something to make it work?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

While it is possible for a site to block themselves from being IFRAME-embedded, to my knowledge Webflow doesn’t do that.

CORRECTION - Yes Webflow does block its staged ( *.webflow.io ) sites from embedding, but only in specific circumstances. Read my next post for details.

Here’s a demo of 3 examples;

  1. Google ( blocks )
  2. Webflow published site
  3. Webflow unpublished site

https://iframe-tests-4bf1dd.webflow.io/

https://preview.webflow.com/preview/iframe-tests-4bf1dd?utm_medium=preview_link&utm_source=designer&utm_content=iframe-tests-4bf1dd&preview=3146ceaf81f453ed5e9d17e291629abe&workflow=preview

It’s difficult to guess what you’re seeing without a readonly link to your site, and seeing the actual <iframe> code you’re embedding in your containing site.

My guess is something’s wrong with the iframe code, or that perhaps the containing site is breaking it on render. Can you share the link to the actual site where you have the IFRAME embedded?

Also, IFRAMEs are quite simple, but there are challenges as well- scrollbars, adapting to responsive breakpoints, security “across the frame” etc. As long as you’re doing a simple embed you should be fine.

1 Like
3

thank you so much for getting back to me :slight_smile:
I just took the generated iframe and plonked it into some html in an online editor to see if it worked. sadly though it didnt and I am sort of hoping its the generated iframe thats the problem although I cannot see what I did wrong. I did this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <div><iframe src="https://lindas-fantastic-site-8f77f7.webflow.io/" name="myIFrame" scrolling="yes" width="100%" height="100%" style="border: none #000000;"></iframe></div>

    <script src="src/script.js"></script>
  </body>
</html>

and it can be viewed here:
https://949597.playcode.io/
didnt get around to designing anything yet so I just tested with a few templates
I used this one because its pretty :slight_smile:

https://preview.webflow.com/preview/lindas-fantastic-site-8f77f7?utm_medium=preview_link&utm_source=designer&utm_content=lindas-fantastic-site-8f77f7&preview=51c71ffd2f652811bbb34e3ebcb21566&workflow=preview

4

Hey, I learned something new. Very interesting.

YES you will be able to IFRAME-embed your Webflow site in another website, once it’s on a paid plan and published to a custom domain name. However you cannot IFRAME embed content from the *.webflow.io staging domain to another domain.

To test this, try embedding these two sites into your playcode.io page;

Both of these are the same site. The first one is the live site on a custom domain, and the second is the staging site on webflow.io.

This happens because web requests made to *.webflow.io return an HTTP header that specifies a content-security-policy restricting where that content can be IFRAME-hosted.

Specifically, it looks like this;

content-security-policy: frame-ancestors 'self' https://*.webflow.com http://*.webflow.com http://*.webflow.io http://webflow.com https://webflow.com

Webflow sites published to custom domains do not have that policy header.

Here’s a codepen demonstrating it as well.

1 Like
5

Thank you so much for your thorough reply thats absolutely perfect😍

1 Like
6

Based on your description, it sounds like you want to integrate a Webflow page with a CMS that has limited HTML, CSS, and JavaScript integration capabilities. Using an iframe-generator to embed your Webflow page might be a good solution in this scenario.

7

Hey there, I know this is an old issue but by testing your codepen, both URL are not able to be embed in the iframe. I have the same exact issue currently. Please help :pray:

8

Hey Tuck, is your site using ecommerce or memberships?
I’ve noticed that Webflow generates the CSPs slightly differently for these, and you may not be able to IFRAME embed them on any other domain.

9

It’s not an ecommerce site and no memberships. We are on a paid plan currently, not sure why is it happening. Even iframing your site sygnal.com is not working now

10

Sygnal has memberships enabled.
What’s your site?

11

Our site is butter.us
All of our membership is on a separate subdomain off from webflow.

12

Yes you can see your CSP here-

It tells browsers that your site can only be IFRAMEd inside of pages from the same domain.

image

The reason why is that you have memberships enabled.
You may never have used it, but at some point you activated it or the template you purchased had it activated.

If you go here, you can see Webflow’s memberships sign-up page.

https://www.butter.us/sign-up

Really nothing you can do to remove it. Even Webflow support cannot remove memberships or commerce, apparently.

Two options;

  1. completely rebuild your site, this time, no memberships or ecommerce activation.
  2. hack your headers with a reverse proxy. I’m not sure what your use case here is for being embedded in an IFRAME, but you can create, e.g. embed, butter.us for that special purpose, or proxy your whole site for everyone, and rewrite that header.

You might contact Webflow and see if they have a means to change that rule per-site. I’ve never seen that done, but can’t hurt to ask.

Although Webflow blocks this to mitigate the risk of membership hacking, in your case, you’re not actually using Webflow’s memberships. You’ll have to decide whether you’re ok with clickjacking risks, etc.

If you have a specific domain you’d be IFRAMEd in, you can restrict it to that trusted domain for safety.

13

Rebuilding the site would be quite a hassle I’d imagine. We will try ask help from Webflow support.

By the way, thank you for the deep dive. Really appreciated for the help! :pray:

1 Like