I have built a browser-based HTML/Markdown code editor, that seems to be working great for the most part. I have live rendering previews as the user updates code, etc. I already sanitize any <script> tags, but other elements such as <div> or <style> are allowed.
The problem is if the user saves the document with invalid HTML (i.e., unclosed <style> tags, etc.), upon reloading the document, the whole site will be inoperable due to my HTML elements being "eaten" by the unclosed tag in the user code.
Question: Is there a solid strategy to render user code in an isolated container such that errors inside that container do not bleed out into the rest of the page?
I am using Javascript with React. This seems like a use case for iFrames, but I have had it beaten into me that iFrames are never a good idea, and there is always a better way to do what you want to do.
Iframes are the perfect solution for problems like this. Over using them can be a problem on a page, but in this case it is the right tool for the job.
Also not sure why that was beaten into you, the frame tag is always bad, but iframes used sparingly are useful.