Introduction

safe-content-frame renders untrusted HTML, PDF, or any other content inside a sandboxed iframe. Every render is served from its own hashed subdomain of scf.auiusercontent.com, a separate site from your app, so scripts in the frame cannot reach your app's cookies, storage, or window even with allow-scripts set.

The package is framework-agnostic JavaScript with no React or DOM-framework dependency.

Install

npm install safe-content-frame

Render HTML

import { SafeContentFrame } from "safe-content-frame";

const frame = new SafeContentFrame("my-app");

const container = document.getElementById("preview")!;
const rendered = await frame.renderHtml(modelGeneratedHtml, container);

await rendered.fullyLoadedPromiseWithTimeout(5000);

rendered.sendMessage({ type: "theme", value: "dark" });

// later
rendered.dispose();

The first argument to SafeContentFrame is your product identifier. It scopes the hashed origin, so different products on the same domain do not collide.

Pages