Sanitize the initial JSON data to prevent XSS attacks.

Author: adamghill

django_unicorn/components/unicorn_template_response.py

@@ -8,6 +8,8 @@
 from bs4.element import Tag
 from bs4.formatter import HTMLFormatter
 
+from django_unicorn.utils import sanitize_html
+
 from ..decorators import timed
 from ..utils import generate_checksum
 
@@ -85,19 +87,33 @@ def render(self):
                 "hash": hash,
             }
             init = orjson.dumps(init).decode("utf-8")
-            init_script = f"Unicorn.componentInit({init});"
+            json_element_id = f"unicorn:data:{self.component.component_id}"
+            init_script = f"Unicorn.componentInit(JSON.parse(document.getElementById('{json_element_id}').textContent));"
+
+            json_tag = soup.new_tag("script")
+            json_tag["type"] = "application/json"
+            json_tag["id"] = json_element_id
+            json_tag.string = sanitize_html(init)
 
             if self.component.parent:
                 self.component._init_script = init_script
+                self.component._json_tag = json_tag
             else:
+                json_tags = []
+                json_tags.append(json_tag)
+
                 for child in self.component.children:
                     init_script = f"{init_script} {child._init_script}"
+                    json_tags.append(child._json_tag)
 
                 script_tag = soup.new_tag("script")
                 script_tag["type"] = "module"
                 script_tag.string = f"if (typeof Unicorn === 'undefined') {{ console.error('Unicorn is missing. Do you need {{% load unicorn %}} or {{% unicorn_scripts %}}?') }} else {{ {init_script} }}"
                 root_element.insert_after(script_tag)
 
+                for t in json_tags:
+                    root_element.insert_after(t)
+
         rendered_template = UnicornTemplateResponse._desoupify(soup)
         rendered_template = mark_safe(rendered_template)
         self.component.rendered(rendered_template)

django_unicorn/utils.py

@@ -6,6 +6,8 @@
 from typing import get_type_hints as typing_get_type_hints
 
 from django.conf import settings
+from django.utils.html import _json_script_escapes, format_html
+from django.utils.safestring import mark_safe
 
 import shortuuid
 from cachetools.lru import LRUCache
@@ -130,3 +132,16 @@ def get_method_arguments(func) -> List[str]:
     function_signature_cache[func] = list(function_signature.parameters)
 
     return function_signature_cache[func]
+
+
+def sanitize_html(str):
+    """
+    Escape all the HTML/XML special characters with their unicode escapes, so
+    value is safe to be output in JSON.
+
+    This is the same internals as `django.utils.html.json_script` except it takes a string
+    instead of an object to avoid calling DjangoJSONEncoder.
+    """
+
+    str = str.translate(_json_script_escapes)
+    return mark_safe(str)

example/unicorn/components/text_inputs.py

@@ -5,6 +5,7 @@
 
 class TextInputsView(UnicornView):
     name = "World"
+    testing_xss = "Whatever </script> <script>alert('uh oh')</script>"
 
     def set_name(self, name=None):
         if name:

pyproject.toml

@@ -70,3 +70,4 @@ tj = "npm run-script test"
 t = ["tp", "tj"]
 is = "isort --settings pyproject.toml ."
 b = "npm run build"
+pyt = "pytest -m 'not slow'"

tests/templatetags/test_unicorn_render.py

@@ -207,8 +207,8 @@ def test_unicorn_render_component_one_script_tag(settings):
     context = {}
     html = unicorn_node.render(context)
 
-    assert "<script" in html
-    assert len(re.findall("<script", html)) == 1
+    assert '<script type="module"' in html
+    assert len(re.findall('<script type="module"', html)) == 1
 
 
 def test_unicorn_render_child_component_no_script_tag(settings):
@@ -235,8 +235,8 @@ def test_unicorn_render_parent_component_one_script_tag(settings):
     context = {}
     html = unicorn_node.render(context)
 
-    assert "<script" in html
-    assert len(re.findall("<script", html)) == 1
+    assert '<script type="module"' in html
+    assert len(re.findall('<script type="module"', html)) == 1
 
 
 def test_unicorn_render_calls(settings):
@@ -249,8 +249,8 @@ def test_unicorn_render_calls(settings):
     context = {}
     html = unicorn_node.render(context)
 
-    assert "<script" in html
-    assert len(re.findall("<script", html)) == 1
+    assert '<script type="module"' in html
+    assert len(re.findall('<script type="module"', html)) == 1
     assert '"calls":[{"fn":"testCall","args":[]}]' in html
 
 
@@ -264,8 +264,8 @@ def test_unicorn_render_calls_with_arg(settings):
     context = {}
     html = unicorn_node.render(context)
 
-    assert "<script" in html
-    assert len(re.findall("<script", html)) == 1
+    assert '<script type="module"' in html
+    assert len(re.findall('<script type="module"', html)) == 1
     assert '"calls":[{"fn":"testCall2","args":["hello"]}]' in html
 
 
@@ -279,8 +279,8 @@ def test_unicorn_render_calls_no_mount_call(settings):
     context = {}
     html = unicorn_node.render(context)
 
-    assert "<script" in html
-    assert len(re.findall("<script", html)) == 1
+    assert '<script type="module"' in html
+    assert len(re.findall('<script type="module"', html)) == 1
     assert '"calls":[]' in html
 
 
@@ -294,8 +294,8 @@ def test_unicorn_render_hash(settings):
     context = {}
     html = unicorn_node.render(context)
 
-    assert "<script" in html
-    assert len(re.findall("<script", html)) == 1
+    assert '<script type="module"' in html
+    assert len(re.findall('<script type="module"', html)) == 1
     assert '"hash":"' in html
 
     # Assert that the content hash is correct

tests/test_utils.py

@@ -1,4 +1,9 @@
-from django_unicorn.utils import generate_checksum, get_method_arguments, get_type_hints
+from django_unicorn.utils import (
+    generate_checksum,
+    get_method_arguments,
+    get_type_hints,
+    sanitize_html,
+)
 
 
 def test_generate_checksum_bytes(settings):
@@ -57,3 +62,10 @@ def test_func(input_str):
     expected = {}
     actual = get_type_hints(test_func)
     assert actual == expected
+
+
+def test_sanitize_html():
+    expected = '{"id":"abcd123","name":"text-inputs","key":"asdf","data":{"name":"World","testing_thing":"Whatever \\u003C/script\\u003E \\u003Cscript\\u003Ealert(\'uh oh\')\\u003C/script\\u003E"},"calls":[],"hash":"hjkl"}'
+    data = '{"id":"abcd123","name":"text-inputs","key":"asdf","data":{"name":"World","testing_thing":"Whatever </script> <script>alert(\'uh oh\')</script>"},"calls":[],"hash":"hjkl"}'
+    actual = sanitize_html(data)
+    assert actual == expected