Seamless Iframe 🔮

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! 👻

Quick examples

🎨 Inherits styles from the parent document and vertically updates its height

🔗 Handle user clicks on links

Usage

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;
                }
            `}
        />
    );
}

Props

| Property | Type | Description | Default | | --- | --- | --- | --- | | sanitizedHtml | String | Required - HTML string of text to be rendered in the iframe. We suggest to sanitize the HTML before passing to the component. | - | | inheritParentStyle| Boolean | Whether to inherit styles on the parent page or not | true | title| String | Title of the iframe, important for accessibility | "" | customStyle | String | Extra set of css rules for the inner content | body { margin: 0; padding: 0; } | | customScript | String | Extra script to be added to the iframe body | `` | | heightCorrection | Boolean | Whether to apply the iframe content scroll height to the iframe element or not | true |
| heightCorrectionOnResize | Boolean | Whether to re apply the height on resize. Off is heightCorrection is false | true | | debounceResizeTime | Number | Debounce time for reapplying height on the window resize event. If set to 0, no debounce function will be applied | 250 | | interceptLinkClicks | Boolean | Whether to listen to link clicks. If enabled, the parent window will show a confirmation whenever a link in the iframe gets clicked | false | | customLinkClickCallback | Function | Function to manipulate the behaviour of the top window on link click. Useless if interceptLinkClicks is falsy. | - | | preventIframeNavigation | Boolean | Whether to prevent the iframe to navigate to a different URL. If a script inside the iframe tries to change the iframe window location, Seamless Iframe will repaint from the initial state. If this happens multiple times, a warning view gets displayed instead of the iframe.| true | | customIframeNavigationInterceptedView | ReactElement | Replace the default warning view when iframe tries to navigate away. | - |

Abstract

What does this library do?

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.

Why would you use an iframe to render html?

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.