Embed a Wordpress Page (cross-origin) into React App with Dynamic Height

Question

I have been searching for ways to be able to embed a wordpress page into my React app.

The Problem

I can simply use an <iframe> tag and manually insert the height up to the point that the whole page is displayed without scrolling. The issue is that I want this to be dynamic, and be able to simply get the height of the iframe and set it appropriately.

The Wordpress is running on a AWS EC2 instance, and is accessed with a domain that I own. When using libraries like iframe-resizer-react with a sample code of

import React from 'react';
import IframeResizer from 'iframe-resizer-react';

interface ICustomIframeProps {
  url: string; // https url of the wordpress page
}

const CustomIframe: React.FC<ICustomIframeProps> = ({ url }) => {
  return (
    <div>
      <IframeResizer src={url} style={{ width: '1px', minWidth: '100%' }} />
    </div>
  );
};

export default CustomIframe;

I get the error:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://my-wordpress-ec2.com') does not match the recipient window's origin ('http://localhost:3000')

Another solution that has been tried is to use the raw iframe as:

import React from 'react';

interface ICustomIframeProps {
  url: string;
}

const CustomIframe: React.FC<ICustomIframeProps> = ({ url }) => {
  const onIframeLoad = () => {
    const iframe = document.getElementById('target') as HTMLIFrameElement;
    iframe.style.height =
      iframe.contentWindow!.document.body.offsetHeight + 'px';
  };

  return (
    <div>
      <iframe
        title="Wordpress Iframe"
        src={url}
        id="target"
        style={{ width: '100%' }}
        onLoad={() => onIframeLoad()}
      />
    </div>
  );
};

export default CustomIframe;

But, I get:

SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

As far from what I have searched, this suggests that I would need to add code to my Wordpress instance if I want to get the height of the content inside the iframe. Any idea on how to do this?

I am looking for a solution in which I can just create a page on Wordpress, and when using the wordpress API, retrieve my pages, and display a specific one on its entirety (without scrolling through the iframe) on my react app.

Thank you very much in advance!

this can help you https://stackoverflow.com/questions/3846132/jquery-get-height-of-iframe-content-when-loaded — Monzoor Tamal, Jul 20 '20 at 21:37
i think this solution would work if it wasn't a cross-origin iframe. I updated the post. I would appreciate any help you can provide! Thank you tho @MonzoorTamal! — theSabian, Jul 20 '20 at 22:05

score 1 · Answer 1 · answered Jul 21 '20 at 00:32

You should be able to enable cross origins restriction if you own the domain with the following in your .htaccess file

Access-Control-Allow-Origin: * which remove the restriction for all

Access-Control-Allow-Origin: <origin> which remove the restriction for a specific domain

https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

Embed a Wordpress Page (cross-origin) into React App with Dynamic Height

1 Answers1