Using iframe to safely display HTML content.

Updated tests.

feder/assets/scss/style.scss

@@ -168,4 +168,16 @@ $gray: #F0F0F0;
 
 .letter-body {
   margin-bottom: 20px;
+
+  iframe {
+    width: 100%;
+    height: 400px;
+    border: 0;
+  }
+}
+
+iframe.letter-quote {
+  width: 100%;
+  height: 200px;
+  border: 0;
 }

feder/letters/templates/letters/_letter_small.html

@@ -2,7 +2,9 @@
 {% include 'letters/_header.html' %}
 <div class="letter-body">
     {% if object.html_body %}
-        {{ object.html_body|safe }}
+        <iframe srcdoc="{{ object.html_body|escape }}"
+                sandbox="allow-top-navigation">
+        </iframe>
     {% else %}
         {{ object.body|linebreaks }}
     {% endif %}

feder/letters/templates/letters/_object.html

@@ -1,7 +1,9 @@
 {% load i18n %}
 <div class="letter-body">
     {% if object.html_body %}
-        {{ object.html_body|safe }}
+        <iframe srcdoc="{{ object.html_body|escape }}"
+                sandbox="allow-top-navigation">
+        </iframe>
     {% else %}
         {{ object.body|linebreaks }}
     {% endif %}
@@ -10,7 +12,10 @@
 {% if object.quote or object.html_quote %}
     <blockquote class="expandable">
         {% if object.html_quote %}
-            {{ object.html_quote|safe }}
+            <iframe srcdoc="{{ object.html_quote|escape }}"
+                    class="letter-quote"
+                    sandbox="allow-top-navigation">
+            </iframe>
         {% else %}
             {{ object.quote|linebreaks }}
         {% endif %}

feder/letters/tests/test_views.py

@@ -499,8 +499,21 @@ def test_no_match_of_case(self):
         self.assertEqual(Case.objects.count(), 0)
         self.assertEqual(letter.case, None)
 
-    def _get_body(self, case=None):
-        return {
+    def test_html_body(self):
+        body = self._get_body(html_body=True)
+
+        response = self.client.post(
+            path=self.authenticated_url,
+            data=json.dumps(body),
+            content_type="application/imap-to-webhook-v1+json",
+        )
+        letter = Letter.objects.first()
+        self.assertEqual(response.status_code, 200)
+        self.assertTrue(letter.body)
+        self.assertTrue(letter.html_body)
+
+    def _get_body(self, case=None, html_body=False):
+        body = {
             "headers": {
                 "auto_reply_type": "vacation-reply",
                 "cc": [],
@@ -516,6 +529,8 @@ def _get_body(self, case=None):
                 ],
             },
             "text": {
+                # It's assumed that content is always given to webhook endpoint,
+                # otherwise endpoint will generate exception.
                 "content": "W dniach 30.07-17.08.2018 r. przebywam na urlopie.",
                 "quote": "",
             },
@@ -527,3 +542,11 @@ def _get_body(self, case=None):
                 "content": "MTIzNDU=",
             },
         }
+
+        if html_body:
+            body["text"][
+                "html_content"
+            ] = "<p>W dniach <i>30.07-17.08.2018 r.</i> przebywam na urlopie.</p>"
+            body["text"]["html_quote"] = ""
+
+        return body

feder/static/css/style.css

@@ -7486,3 +7486,12 @@ button.close {
 /* Letters app */
 .letter-body {
   margin-bottom: 20px; }
+  .letter-body iframe {
+    width: 100%;
+    height: 400px;
+    border: 0; }
+
+iframe.letter-quote {
+  width: 100%;
+  height: 200px;
+  border: 0; }