seamless-iframe v0.1.3

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

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 1. don't provide an easy way to set their full height 1. don't allow users to open links on the top level window 1. 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.