Seamless Iframe is a customisable React component that allows you to render HTML content in an iframe and makes it look as if it was part of the page itself. Seamless! 👻

import { SeamlessIframe } from "seamless-iframe";

const myHtml = sanitize("<div>hello</div>"); // HTML sanitisation is still recommended.

export const MyPage = (props) => {
    return ( 
        <SeamlessIframe
            sanitizedHtml={myHtml}
            customStyle={`
                body {
                    font-family: sans-serif;
                }
            `}
        />
    );
}

It provides a React component with a set of utilities to render custom HTML in an iframe that looks as if it was part of your page.

Normal iframes in fact:

1. don't inherit styles from the parent window
2. don't provide an easy way to set their full height
3. don't allow users to open links on the top level window
4. don't prevent scripts to change the iframe location

Here's where SeamlessIframe comes in handy. The generated iframes will automatically set their height depending on the content, and they will inherit the parent window or custom styles. In addition, it allows you to quickly customise what happens when a user clicks on a link. If a script (that somehow made it through the sanitization process) inside the iframe tries to manipulate the location (url) of the iframe, SeamlessIframe will intercept it and prevent it from happening.

In summary, further security.

There are a number of great sanitized libraries out there that prevents malicious scripts from being injected in your page.

However, if these libraries fail is good to have another layer of security. Iframes and their powerful sandbox attribute prevents a number of potentially dangerous behaviours.