JSFiddle - React, Tailwind, and code Playground

by philfreo

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>
      <h1>iframe 1</h1>
      <p>An inline onclick handler is blocked on all browsers</p>
      <iframe
        sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
        id="iframeOne"
        title="iframe with inline JS"
      ></iframe>
      <h1>iframe 2</h1>
      <p>this will show an alert in Firefox and Chrome but not Safari.</p>
      <iframe
        sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
        id="iframeTwo"
        title="iframe with bound JS"
      ></iframe>
    </div>

    <script>
    /**
     * First iframe: inline onclick
     *
     * Sandbox mode prevents these on all browsers
     */

    const iframeOne = document.getElementById("iframeOne");

    // this is how Froala writes content to its iframe
    iframeOne.contentWindow.document.open();
    iframeOne.contentWindow.document.write("<!DOCTYPE html>");
    iframeOne.contentWindow.document.write(
      `<html><head></head><body><button onclick="alert('I am inline')">click me</button></body></html>`
    );
    iframeOne.contentWindow.document.close();

    /**
     * Second iframe: addEventListener
     *
     * Firefox and Chrome allow this. Safari does not.
     */
    const iframeTwo = document.getElementById("iframeTwo");

    // this is how Froala writes content to its iframe
    iframeTwo.contentWindow.document.open();
    iframeTwo.contentWindow.document.write("<!DOCTYPE html>");
    iframeTwo.contentWindow.document.write(
      "<html><head></head><body><button>click me</button></body></html>"
    );
    iframeTwo.contentWindow.document.close();

    const iframeButton = iframeTwo.contentDocument.getElementsByTagName(
      "button"
    )[0];

    iframeButton.addEventListener("click", () => {
      alert("I was bound by parent window");
    });

    </script>
  </body>
</html>