From 57336187a776a533fa44ae6a180400b4aad0e8ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Wed, 10 Mar 2021 12:29:20 +0200
Subject: [PATCH] Fix HTML email preview in the checks list

---
 static/css/ping_details.css       |  2 +-
 static/js/checks.js               | 12 ++++++++++++
 static/js/details.js              |  7 +++++--
 static/js/log.js                  |  7 +++++--
 templates/front/my_checks.html    |  1 +
 templates/front/ping_details.html |  1 -
 6 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/static/css/ping_details.css b/static/css/ping_details.css
index 11680b5d..7ce82aad 100644
--- a/static/css/ping_details.css
+++ b/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;
diff --git a/static/js/checks.js b/static/js/checks.js
index e6f055f7..f1752d2a 100644
--- a/static/js/checks.js
+++ b/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/";
diff --git a/static/js/details.js b/static/js/details.js
index 1404091c..72cf56bf 100644
--- a/static/js/details.js
+++ b/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);
                 }
             }
         );
diff --git a/static/js/log.js b/static/js/log.js
index 1c34d21f..fa60e673 100644
--- a/static/js/log.js
+++ b/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);
             }
         });
 
diff --git a/templates/front/my_checks.html b/templates/front/my_checks.html
index 77d729d6..21424e48 100644
--- a/templates/front/my_checks.html
+++ b/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>
diff --git a/templates/front/ping_details.html b/templates/front/ping_details.html
index b64219fc..3e7857a4 100644
--- a/templates/front/ping_details.html
+++ b/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>