feat: render html in iframe

bhelx commented 1 year ago

WIP: let me look into the security of this before we merge.

This is something we discussed but didn't get around to. This changes the HTMLOutput component to render the html and not just the text. It uses an iframe for sandboxing and it allows js or anything to be loaded.

A couple notes:

Is this actually secure? I need to think about it for a bit. There may be some more attributes i need to set on the iframe.
User can still view the source with the text/plain mimetype. Should we assume they want to see it rendered? Provide another mime type?

https://user-images.githubusercontent.com/185919/205683649-3ab20b11-7d8a-47e3-a6f5-4022b3c01d6d.mp4

nilslice commented 1 year ago

Love it! I think text/plain is good enough to let a user get the raw HTML out. But, we could add our own "view source" button or something if it's in text/html and add the same syntax highlighting that @Jhaines1988 added for application/json .

bhelx commented 1 year ago

But, we could add our own "view source"

Not a bad idea. Or some kind of hint at least

cloudflare-workers-and-pages[bot] commented 1 year ago

Deploying with Cloudflare Pages

Latest commit:	`efb6b5c`
Status:	✅ Deploy successful!
Preview URL:	https://bec2f483.playground-1xh.pages.dev
Branch Preview URL:	https://render-html-in-iframe.playground-1xh.pages.dev

View logs

extism / playground

feat: render html in iframe #12

Deploying with Cloudflare Pages