react-frame-component: [Violation] Avoid using document.write()

This is coming from:

    if (doc.body.children.length < 1) {
         doc.open('text/html', 'replace');
         doc.write(this.props.initialContent);
         doc.close();
    }

In Firefox this is an error and the frame won’t load: DOMException: "The operation is insecure."

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 4
Comments: 23 (10 by maintainers)

Most upvoted comments

v5 is now the latest release

ryanseddon on Apr 20, 2021

Hey @anthonyxiques

No worries I think it has sat enough for me to push out a new major release, I assume you’ve tested your implementation with the alpha release and it all works as expected?

Would like to contribute toward cost of your time to make that happen - let me know if that is a possibility 🙏

I’ve been meaning to setup the sponsor feature for a while now so maybe when that’s done you can donate me a coffee!

ryanseddon on Apr 16, 2021

What’s the context for the error? Unfortunately document.write is the only viable solution right now. If I was to drop IE11 support srcdoc could be an alternative.

It’s been a while but as I remember - Firefox just refuses to load the component throwing a DOMException so it doesn’t work there (in the context of an extension).

I made the following patch (using patch-package) which allowed it to work in Firefox (this is not a fix, just good enough for my purposes):

-        doc.open('text/html', 'replace');
-        doc.write(this.props.initialContent);
-        doc.close();
+        doc.getElementsByTagName('html')[0].innerHTML = this.props.initialContent;

-      '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
+      '<head></head><body><div class="frame-root"></div></body>'

davidb1 on Oct 8, 2020