For The Love of iframes.

I adore a good iframe. They’re so el­e­gant as a web com­po­nent.

Just ex­pose an end­point, say https://writewithharper.com/editor, set it up to ac­cept some query pa­ra­me­ters and get it hosted. Now you can ac­cess this web-com­po­nent from any page that has a loose enough Content Security Policy. For me, that means my school as­sign­ments and other as­sorted doc­u­men­ta­tion.

It also means that I can avoid set­ting up a com­plex build sys­tem for MDX, while still be­ing able to in­clude in­ter­ac­tive com­po­nents.

The ex­am­ple from ear­lier:

<iframe
  src="https://writewithharper.com/editor?initialText=See, we can now embed the the Harper editor%0Arght into this document!%0A%0AIt's a little too easy."
  width="100%"
  height="400px"
  style="border-radius:10px;border:0px"
></iframe>

One ma­jor caveat though: when we pass our ar­gu­ments to the com­po­nent through the query URL, this gets sent to the com­po­nen­t’s server as well. I cer­tainly trust the Harper web­site’s server, since I main­tain it and the code is open source, but that is­n’t al­ways the case.

You should also prob­a­bly avoid do­ing this too much. Most browsers spawn a whole new process for every iframe, so if you want things to stay snappy it is best to limit your­self to just one (maybe two) per page.