interface Options {
bodyHtml: string;
headHtml: string;
scripts: string[];
permissions?: string;
allow?: string;
}
// allow-modals: Allows confirm/alert dialogs.
const makeSandboxedIframe = ({ bodyHtml, headHtml, scripts, permissions = 'allow-scripts allow-modals', allow = '' }: Options) => {
const iframe = document.createElement('iframe');
iframe.setAttribute('sandbox', permissions);
if (allow) {
iframe.allow = allow;
}
iframe.addEventListener('load', async () => {
iframe.contentWindow.postMessage({
kind: 'add-script',
scripts,
}, '*');
}, { once: true });
iframe.srcdoc = `
${headHtml}
${bodyHtml}
`;
return {
iframe,
loadPromise: new Promise(resolve => {
iframe.addEventListener('load', () => resolve(), { once: true });
}),
};
};
export default makeSandboxedIframe;