Fix HTML email preview in the checks list

static/css/ping_details.css

@@ -27,7 +27,7 @@
     line-height: 1em;
 }
 
-#email-body-html-iframe {
+#email-body-html iframe {
     border: 0;
     width: 100%;
     height: 500px;

static/js/checks.js

@@ -59,6 +59,18 @@ $(function () {
         var lastPingUrl = base + "/checks/" + code + "/last_ping/";
         $.get(lastPingUrl, function(data) {
             $("#ping-details-body" ).html(data);
+            var htmlPre = $("#email-body-html pre");
+            if (htmlPre.length) {
+                var opts = {USE_PROFILES: {html: true}};
+                var clean = DOMPurify.sanitize(htmlPre.text(), opts);
+                var blob = new Blob([clean], {type: "text/html; charset=utf-8"});
+
+                var iframe = document.createElement("iframe");
+                iframe.sandbox = "";
+                iframe.src = URL.createObjectURL(blob);
+
+                htmlPre.replaceWith(iframe);
+            }
         });
 
         var logUrl = base + "/checks/" + code + "/log/";

static/js/details.js

@@ -139,8 +139,11 @@ $(function () {
                     var clean = DOMPurify.sanitize(htmlPre.text(), opts);
                     var blob = new Blob([clean], {type: "text/html; charset=utf-8"});
 
-                    htmlPre.remove();
-                    document.getElementById("email-body-html-iframe").src = URL.createObjectURL(blob);
+                    var iframe = document.createElement("iframe");
+                    iframe.sandbox = "";
+                    iframe.src = URL.createObjectURL(blob);
+
+                    htmlPre.replaceWith(iframe);
                 }
             }
         );

static/js/log.js

@@ -12,8 +12,11 @@ $(function () {
                 var clean = DOMPurify.sanitize(htmlPre.text(), opts);
                 var blob = new Blob([clean], {type: "text/html; charset=utf-8"});
 
-                htmlPre.remove();
-                document.getElementById("email-body-html-iframe").src = URL.createObjectURL(blob);
+                var iframe = document.createElement("iframe");
+                iframe.sandbox = "";
+                iframe.src = URL.createObjectURL(blob);
+
+                htmlPre.replaceWith(iframe);
             }
         });
 

templates/front/my_checks.html

@@ -96,6 +96,7 @@
 <script src="{% static 'js/selectize.min.js' %}"></script>
 <script src="{% static 'js/nouislider.min.js' %}"></script>
 <script src="{% static 'js/clipboard.min.js' %}"></script>
+<script src="{% static 'js/purify.min.js' %}"></script>
 <script src="{% static 'js/update-timeout-modal.js' %}"></script>
 <script src="{% static 'js/adaptive-setinterval.js' %}"></script>
 <script src="{% static 'js/checks.js' %}"></script>

templates/front/ping_details.html

@@ -106,7 +106,6 @@
             {% if html %}
             <div id="email-body-html" class="tab-pane">
                 <pre>{{ html }}</pre>
-                <iframe id="email-body-html-iframe" sandbox></iframe>
             </div>
             {% endif %}
         </div>