Proxy-pass old site into new site iFrame

Support
,
1

We are launching our site onto a new content management system. We want to slowly do this transition. One of those parts is hosting the old site “inside” the new site for a set of content. In this case we want to “iFrame” in the content of our existing blog posts. We’ve created a component that will read the path of the current URL and use that to make the iFrame src.

What we need help with is getting the redirect rules correct. Right now we keep getting a 404 when attempting to use the redirects.

Here are the redirects _redirects:

/all/blogs/* /old-site 200!
/blogs/* /old-site 200!

What we’d like to see is a url that goes to https://example.com/all/blogs/slug-of-blog-post but is passed to the new site’s https://example.com/old-site with the full URL being parsed. Going to https:/example.com/old-site works, however we want to do the proxy rewrite so the end-user never really sees the old-site in the URL and we can more easily transition to our new netlify deployment.

Any guidance appreciated.

We also have a not forced rewrite rule in the netlify.toml to ensure we keep any existing marketing urls working from emails.

netlify.toml redirects:

[[redirects]]
  from = "/*"
  to = "/amer/us/en-us/:splat"
  status = 200

Does having the two sets of redirects cause an issue?

2

I’m not 100% sure, but I think what you might want to try is 301 redirects instead of 200. If that doesn’t help, maybe you’d have to use JavaScript to parse the URL and redirect accordingly.

Also, about the other redirect, I don’t think it will cause any problem because Netlify processes redirects in the following order:

The _redirects file takes preference over netlify.toml and is parsed from top to bottom, that is, if the first rule matches, rest of the rules are ignored.

3

The goal is to keep content in our old CMS and surface it in the new website.

There hundreds of URLs that exist with specific content as well as tracking parameters that already exist. The goal is to proxy-pass the new URL to an embedded version of the new site.

We do not want a 301 or 302 redirect because that will change the URL that already exists and does not carry over arbitrary query parameters – see: Preserve query parameters on redirect - #59 by abohannon. This existing issue is why we need to use the proxy-pass through until we officially migrate all content to the new system.

The issue I’m seeing right now is when I go to https://example.com/all/blogs/some-key I get our 404 page, which means it is not doing the proxy pass to the https://example.com/old-site.

4

Yes, you’re right. 301 or 302 won’t pass on query paramters. Sadly, I don’t think/know if it’s entirely possible with just Netlify redirects and would have taken JavaScript’s help if it were me.

5

Another thing to note is that we are using next-on-netlify.

Looking at our build it sets up this bit of code:

💫 Setting up pages with getInitialProps as Netlify Functions in out_functions/
   pages/old-site.js
💫 Setting up pages with getServerSideProps as Netlify Functions in out_functions/
🔥 Copying pre-rendered pages with getStaticProps and JSON data to out_publish/
💫 Setting up pages with getStaticProps and fallback: true as Netlify Functions in out_functions/
💫 Setting up pages with getStaticProps and revalidation interval as Netlify Functions in out_functions/
🔥 Copying pre-rendered pages without props to out_publish/
   pages/example-page.html
   pages/404.html
🔀 Setting up redirects
   # Prepending custom redirects
   /old-site  /.netlify/functions/next_oldsite  200

I’m guessing this “two layers” of redirects with a 200 may be causing an issue.

7

One piece of information I did not share properly was the component we are using to embed the iframe.

export const IFrameFullPageEmbed: React.FC<IFrameEmbedProps> = (props) => {
  const baseUrl = props.baseUrl;

  if (process.browser) {
    const expectedUrl = `${baseUrl}${window.location.pathname}${window.location.search}`;

    if (url !== expectedUrl) {
      setUrl(expectedUrl);
      const iframe = document.getElementById('hidden-iframe');
      iframe?.setAttribute('src', expectedUrl);
      // Call to href below forces the document to actually reload
      iframe?.contentDocument.location.href;
    }
  }

  return (
    <React.Fragment>
      <iframe id="hidden-iframe" src={url} className="h-screen w-screen" key={url} title="embedded page" />
    </React.Fragment>
  );
};

export default IFrameFullPageEmbed;

We’ve gotten this to work by using a static page and reading from the proxy-pass URL. It appears the two-layer of redirects (the one configured and the one next-on-netlify adds for server side rendering) do not work. It’s not a big deal for us in this scenario.

With /old-site looking like:

<IFrameFullPageEmbed baseUrl="https://example.com" />

With the redirects in place everything is working like we want.

/all/blogs/* /old-site 200!
/blogs/* /old-site 200!

Thanks for the suggestions. Looks like reading the URL in browser and updating the iFrame worked best.