Merge pull request from GHSA-vw39-6w7q-gfx5

Co-authored-by: Robin Ward <robin.ward@gmail.com>

app/assets/javascripts/discourse/components/iframed-html.js.es6

@@ -0,0 +1,19 @@
+import Component from "@ember/component";
+
+export default Component.extend({
+  tagName: "iframe",
+  html: null,
+  className: "",
+  classNameBindings: ["html:iframed-html", "className"],
+  sandbox: "allow-same-origin",
+  attributeBindings: ['sandbox:sandbox'],
+
+  didRender() {
+    this._super(...arguments);
+    const iframeDoc = this.element.contentWindow.document;
+    iframeDoc.open("text/html", "replace");
+    iframeDoc.write(this.html);
+    iframeDoc.close();
+  }
+});
+

app/assets/javascripts/discourse/templates/modal/raw-email.hbs

@@ -37,9 +37,7 @@
     {{/if}}
 
     {{#if showHtmlPart}}
-      <div class="incoming-email-html-part">
+      {{iframed-html html=htmlPart className="incoming-email-html-part"}}
-        {{{htmlPart}}}
-      </div>
     {{/if}}
   </div>
 {{/d-modal-body}}

app/assets/stylesheets/common/base/modal.scss

@@ -494,8 +494,14 @@
       box-shadow: none;
     }
     .incoming-email-html-part {
+      width: calc(100% - 36px);
       padding: 10px 4px 4px 4px;
     }
+    @media screen and (max-width: 760px) {
+      .incoming-email-html-part {
+        width: calc(100% - 10px);
+      }
+    }
   }
 }
 

app/assets/stylesheets/common/components/iframed-html.scss

@@ -0,0 +1,4 @@
+.iframed-html {
+  background: white;
+  border: none;
+}

test/javascripts/components/iframed-html-test.js.es6

@@ -0,0 +1,23 @@
+import componentTest from "helpers/component-test";
+
+moduleForComponent("iframed-html", { integration: true });
+
+componentTest("appends the html into the iframe", {
+  template: `{{iframed-html html="<h1 id='find-me'>hello</h1>" className='this-is-an-iframe'}}`,
+
+  async test(assert) {
+    const iframe = find("iframe.this-is-an-iframe");
+    assert.equal(iframe.length, 1, "inserts an iframe");
+
+    assert.ok(
+      iframe[0].classList.contains("this-is-an-iframe"),
+      "Adds className to the iframes classList"
+    );
+
+    assert.equal(
+      iframe[0].contentWindow.document.body.querySelectorAll("#find-me").length,
+      1,
+      "inserts the passed in html into the iframe"
+    );
+  }
+});