Skip to content

Instantly share code, notes, and snippets.

@mstewartgallus

mstewartgallus/sandbox.jsx

Created January 31, 2023 22:43
Show Gist options
  • Save mstewartgallus/f6c2a3b707da8a950049a7dc5f19b9d3 to your computer and use it in GitHub Desktop.
Save mstewartgallus/f6c2a3b707da8a950049a7dc5f19b9d3 to your computer and use it in GitHub Desktop.
Download ZIP
I think I want something like this for sandboxing blog comments. I feel like it might break horribly though.
Raw
sandbox.jsx
import * as React from "react";
const empty = `<!DOCTYPE>
<html>
<body>
</body>
</html>
`;
export const Sandbox = ({children}) => {
const frame = React.useRef(null);
const body = frame.current?.contentDocument?.body;
return <>
<iframe sandbox="" allow="" credentialless srdoc={empty} ref={frame} />
{body && React.createPortal(children, body)}
</>;
};
const MyComponent = () =>
<Sandbox>
<div
dangerouslySetInnerHTML={{__html: markup}} />
</Sandbox>;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment