sandbox markup

[smeijer]

Just like #68, we need to create a sandbox for the markup.

Currently, it's possible to add a <meta http-equiv="refresh" content="1; URL=http://evil.corp"> to the HTML markup, and trigger a full page refresh.

This shouldn't be possible.

We should render the markup in an iframe with the proper restrictions. (See #68). It's quite easy to render the markup (with the srcdoc attribute). But we also need to inject the custom scrollbars, and tailwind styling. That's what will consume the most time of this ticket.

[Siemko]

Maybe using dompurify (https://github.com/cure53/DOMPurify) is the option here? Maybe it's not necessary to use iframe and inject styles?

[MichaelDeBoey]

DOMPurify looks indeed a good option to me 👍

[Siemko]

I gave it a go in #84, works pretty well in my opinion.

[smeijer]

DOMPurify looks indeed a good option to me 👍

I'm not sure if I can agree with that. Here a quote from my comment at the PR:

Hi @Siemko, thanks for contributing.

What I don't like about sanitizing, is that we limit the options that our users have. We're building a sandbox. Not a comment system.

We need the user to be able to create and test redirects. Create and test alerts and onClick handlers (in later stages).

So I don't believe that sanitizing the html untill it's safe, is what we really want.

[smeijer]

I've been thinking about this one today. I don't think it will be that hard to realize. My approach would be:

• add a new /sandbox route
• make that route render a blank page, with only a <Scrollable><div id="target" /></Scrollable>
• update the Preview component to render an iframe, targeting /sandbox
• add a ref to that iframe, and the proper sandbox attributes (to block parent)
• use the ref, to update the target.innerHTML from within the Preview