Escape and sanitize all variables and data passed to js

Author: jacklinke

docs/api/autocomplete_views.md

@@ -365,3 +365,14 @@ AutocompleteModelView.invalidate_permissions(user=request.user)
 # Invalidate all cached permissions
 AutocompleteModelView.invalidate_permissions()
 ```
+
+## Security Considerations
+
+When creating custom templates and renderers for Tom Select widgets, always ensure proper escaping of user-provided values:
+
+1. Use the `escape()` function for any user data inserted into HTML content
+2. For URL attributes (href, src), always escape the URLs using the `escape()` function
+3. Avoid using `new Function()` with user-provided content whenever possible
+4. When customizing rendering templates, validate and sanitize all input
+
+This is particularly important when using custom rendering templates with `data_template_option` and `data_template_item`.

example_project/test_utils.py

@@ -0,0 +1,98 @@
+"""Tests for django-tomselect's utils."""
+
+import pytest
+
+from django_tomselect.utils import safe_escape, safe_url, sanitize_dict
+
+
+class TestUtilityFunctions:
+    """Test utility functions for proper escaping."""
+
+    def test_safe_escape(self):
+        """Test that safe_escape properly handles HTML content."""
+        # Test with HTML content
+        html = '<script>alert("XSS");</script>'
+        assert safe_escape(html) == "&lt;script&gt;alert(&quot;XSS&quot;);&lt;/script&gt;"
+
+        # Test with None value
+        assert safe_escape(None) == ""
+
+        # Test with non-string value
+        assert safe_escape(123) == "123"
+
+    def test_safe_url(self):
+        """Test that safe_url validates and sanitizes URLs correctly."""
+        # Test with safe URLs
+        assert safe_url("http://example.com") == "http://example.com"
+        assert safe_url("https://example.com") == "https://example.com"
+        assert safe_url("/relative/path") == "/relative/path"
+        assert safe_url("./relative/path") == "./relative/path"
+
+        # Test with unsafe URLs
+        assert safe_url("javascript:alert(1)") is None
+        assert safe_url("data:text/html,<script>alert(1)</script>") is None
+        assert safe_url('vbscript:msgbox("Hello")') is None
+
+        # Test with None value
+        assert safe_url(None) is None
+
+    def test_sanitize_dict(self):
+        """Test that sanitize_dict properly escapes dictionary values."""
+        # Test with a simple dictionary
+        data = {
+            "name": "<strong>Test</strong>",
+            "description": '<script>alert("XSS");</script>',
+            "url": "http://example.com",
+            "evil_url": "javascript:alert(1)",
+        }
+
+        sanitized = sanitize_dict(data)
+
+        assert sanitized["name"] == "&lt;strong&gt;Test&lt;/strong&gt;"
+        assert sanitized["description"] == "&lt;script&gt;alert(&quot;XSS&quot;);&lt;/script&gt;"
+        assert sanitized["url"] == "http://example.com"
+        assert sanitized["evil_url"] != "javascript:alert(1)"
+
+        # Test with nested dictionary
+        nested_data = {
+            "user": {"name": "<em>John</em>", "profile_url": "javascript:alert(2)"},
+            "items": [{"name": "<b>Item 1</b>"}, {"name": "<script>alert(3)</script>"}],
+        }
+
+        sanitized = sanitize_dict(nested_data)
+
+        assert sanitized["user"]["name"] == "&lt;em&gt;John&lt;/em&gt;"
+        assert sanitized["user"]["profile_url"] != "javascript:alert(2)"
+        assert sanitized["items"][0]["name"] == "&lt;b&gt;Item 1&lt;/b&gt;"
+        assert sanitized["items"][1]["name"] == "&lt;script&gt;alert(3)&lt;/script&gt;"
+
+
+@pytest.mark.django_db
+class TestSecurityEscaping:
+    """Tests for security escaping in TomSelect widgets."""
+
+    @pytest.fixture
+    def malicious_edition(self, sample_edition):
+        """Create an edition with malicious content."""
+        original_name = sample_edition.name
+        sample_edition.name = '<script>alert("XSS");</script>'
+        sample_edition.save()
+
+        yield sample_edition
+
+        # Restore original name after test
+        sample_edition.name = original_name
+        sample_edition.save()
+
+    @pytest.fixture
+    def edition_with_html(self, sample_edition):
+        """Create an edition with HTML tags in its name."""
+        original_name = sample_edition.name
+        sample_edition.name = '<strong>with formatting</strong> and <img src="x" onerror="alert(1)">'
+        sample_edition.save()
+
+        yield sample_edition
+
+        # Restore original name after test
+        sample_edition.name = original_name
+        sample_edition.save()

example_project/test_widgets.py

@@ -1919,3 +1919,147 @@ class MockView:
             view2.value_fields.append(label_field)
 
         assert "custom_field" in view2.value_fields
+
+
+@pytest.mark.django_db
+class TestWidgetSecurity:
+    """Security tests for TomSelect widgets."""
+
+    @pytest.fixture
+    def malicious_edition(self):
+        """Create an edition with various malicious content."""
+        edition = Edition.objects.create(
+            name='Attack Vector <img src="x" onerror="alert(1)">',
+            year="<script>document.cookie</script>",
+            pages='100" onmouseover="alert(2)',
+            pub_num="javascript:alert(3)",
+        )
+        yield edition
+        edition.delete()
+
+    @pytest.fixture
+    def setup_complex_widget(self):
+        """Create widget with complex configuration for thorough testing."""
+
+        def _create_widget(show_urls=True, with_plugins=True):
+            config_kwargs = {
+                "url": "autocomplete-edition",
+                "value_field": "id",
+                "label_field": "name",
+            }
+
+            # Add URL display options if requested
+            if show_urls:
+                config_kwargs.update(
+                    {
+                        "show_detail": True,
+                        "show_update": True,
+                        "show_delete": True,
+                    }
+                )
+
+            # Add plugin configurations if requested
+            if with_plugins:
+                config_kwargs.update(
+                    {
+                        "plugin_dropdown_header": PluginDropdownHeader(
+                            show_value_field=True, extra_columns={"year": "Year", "pub_num": "Publication #"}
+                        ),
+                        "plugin_dropdown_footer": PluginDropdownFooter(
+                            title="Options",
+                        ),
+                        "plugin_clear_button": PluginClearButton(),
+                        "plugin_remove_button": PluginRemoveButton(),
+                    }
+                )
+
+            return TomSelectModelWidget(config=TomSelectConfig(**config_kwargs))
+
+        return _create_widget
+
+    def test_render_option_template_escaping(self):
+        """Test escaping in the option template for dropdown choices."""
+        # This test specifically targets the option.html template for search results
+        widget = TomSelectModelWidget(
+            config=TomSelectConfig(
+                url="autocomplete-edition",
+                value_field="id",
+                label_field="name",
+                plugin_dropdown_header=PluginDropdownHeader(show_value_field=True),
+            )
+        )
+
+        # Get the rendered widget and look for proper escaping in templates
+        full_render = widget.render("test_field", None)
+
+        # Check that the option template uses escape function
+        # We should find either template string syntax or function calls with escape
+        assert (
+            "${escape(data[this.settings.labelField])}" in full_render
+            or "${data[this.settings.labelField]}" in full_render
+            or "escape(data[this.settings.labelField])" in full_render
+        )
+
+    def test_javascript_url_escaping(self, setup_complex_widget, malicious_edition, monkeypatch):
+        """Test that javascript: URLs are properly escaped in href attributes."""
+        widget = setup_complex_widget(show_urls=True)
+
+        # Mock methods to return javascript: URLs
+        def mock_url(view_name, args=None):
+            return "javascript:alert('hijacked');"
+
+        # Override the reverse function to return our malicious URLs
+        monkeypatch.setattr("django_tomselect.widgets.reverse", mock_url)
+
+        # Render the widget with a malicious edition
+        rendered = widget.render("test_field", malicious_edition.pk)
+
+        # Parse the output
+        soup = BeautifulSoup(rendered, "html.parser")
+
+        # Check that no unescaped javascript: URLs exist in href attributes
+        for a_tag in soup.find_all("a"):
+            if "href" in a_tag.attrs:
+                assert not a_tag["href"].startswith("javascript:")
+
+        # Check that script strings are properly escaped in the output
+        assert "javascript:alert('hijacked');" not in rendered
+        assert "javascript:" not in rendered or "javascript\\:" in rendered
+
+    def test_unsafe_object_properties(self, malicious_edition):
+        """Test that unsafe object properties can't be exploited."""
+        # Create an object with properties that could be dangerous if not escaped
+        malicious_edition.name = "Safe Name"
+        malicious_edition.__proto__ = {"dangerous": "property"}
+        malicious_edition.constructor = {"dangerous": "constructor"}
+        malicious_edition.__defineGetter__ = lambda x: "exploit"
+
+        widget = TomSelectModelWidget(
+            config=TomSelectConfig(url="autocomplete-edition", value_field="id", label_field="name")
+        )
+
+        # This should not cause any errors or vulnerabilities
+        try:
+            rendered = widget.render("test_field", malicious_edition.pk)
+            # If we get here without error, that's good
+            assert rendered is not None
+        except Exception as e:
+            pytest.fail(f"Widget rendering failed with: {e}")
+
+    def test_dropdown_inputs_sanitization(self, setup_complex_widget):
+        """Test that inputs in dropdown are properly sanitized."""
+        widget = setup_complex_widget(with_plugins=True)
+
+        # Add the dropdown_input plugin which renders an input in the dropdown
+        widget.plugin_dropdown_input = PluginDropdownInput()
+
+        # Render the widget (no need for a value)
+        rendered = widget.render("test_field", None)
+
+        # Look for proper escaping in the dropdown input elements
+        assert "escape(" in rendered
+
+        # Make sure event handlers on inputs are sanitized
+        assert 'input onkeyup="' not in rendered
+        assert 'input onchange="' not in rendered
+        assert 'input onfocus="' not in rendered

src/django_tomselect/autocompletes.py

@@ -15,6 +15,7 @@
 from django_tomselect.constants import EXCLUDEBY_VAR, FILTERBY_VAR, PAGE_VAR, SEARCH_VAR
 from django_tomselect.logging import package_logger
 from django_tomselect.models import EmptyModel
+from django_tomselect.utils import safe_url, sanitize_dict
 
 
 class AutocompleteModelView(View):
@@ -249,8 +250,6 @@ def prepare_results(self, results: QuerySet) -> list[dict[str, Any]]:
         pk_name = self.model._meta.pk.name
         for item in values:
             # Only include URLs if user has relevant permissions
-            # item['can_list'] = self.has_permission(self.request, 'list')
-            # item['can_create'] = self.has_permission(self.request, 'create')
             item["can_view"] = self.has_permission(self.request, "view")
             item["can_update"] = self.has_permission(self.request, "update")
             item["can_delete"] = self.has_permission(self.request, "delete")
@@ -261,22 +260,26 @@ def prepare_results(self, results: QuerySet) -> list[dict[str, Any]]:
             # Add instance-specific URLs conditionally based on permissions
             if self.detail_url and item["can_view"]:
                 try:
-                    item["detail_url"] = reverse(self.detail_url, args=[item["id"]])
+                    item["detail_url"] = safe_url(reverse(self.detail_url, args=[item["id"]]))
                 except NoReverseMatch:
                     package_logger.warning("Could not reverse detail_url %s", self.detail_url)
 
             if self.update_url and item["can_update"]:
                 try:
-                    item["update_url"] = reverse(self.update_url, args=[item["id"]])
+                    item["update_url"] = safe_url(reverse(self.update_url, args=[item["id"]]))
                 except NoReverseMatch:
                     package_logger.warning("Could not reverse update_url %s", self.update_url)
 
             if self.delete_url and item["can_delete"]:
                 try:
-                    item["delete_url"] = reverse(self.delete_url, args=[item["id"]])
+                    item["delete_url"] = safe_url(reverse(self.delete_url, args=[item["id"]]))
                 except NoReverseMatch:
                     package_logger.warning("Could not reverse delete_url %s", self.delete_url)
 
+            # Sanitize all values to prevent XSS
+            item = sanitize_dict(item)
+
+        # Allow custom processing through hook
         return self.hook_prepare_results(values)
 
     def hook_prepare_results(self, results: list[dict[str, Any]]) -> list[dict[str, Any]]:
@@ -314,7 +317,6 @@ def has_permission(self, request, action="view"):
 
         Supports custom auth backends via Django's auth system.
         """
-
         # Skip all checks if configured to do so
         if self.skip_authorization:
             return True
@@ -459,7 +461,6 @@ def get_iterable(self) -> list[dict[str, str | int]]:
             return []
 
         try:
-
             # Handle TextChoices and IntegerChoices
             if isinstance(self.iterable, type) and hasattr(self.iterable, "choices"):
                 return [

src/django_tomselect/templates/django_tomselect/render/clear_button.html

@@ -5,8 +5,8 @@
 
 {% block code %}
 html: function(data){
-    return `<div class="${data.className}"
-                title="${data.title}"
+    return `<div class="${escape(data.className)}"
+                title="${escape(data.title)}"
                 role="button"
                 aria-label="{% translate 'Clear selection' %}"
                 tabindex="0">&times;</div>`;

src/django_tomselect/templates/django_tomselect/render/dropdown_footer.html

@@ -7,13 +7,13 @@
 html: function (data) {
     let footer = ''
     footer += `
-    <div title="{{ widget.plugins.dropdown_footer.title }}" class="{{ widget.plugins.dropdown_footer.footer_class }}">
+    <div title="{{ widget.plugins.dropdown_footer.title|escapejs }}" class="{{ widget.plugins.dropdown_footer.footer_class }}">
         {% if "view_create_url" in widget.keys and widget.view_create_url %}
-            <a href="{{ widget.view_create_url }}" title='{% translate "Go to Create View for these items" %}' class="{{ widget.plugins.dropdown_footer.create_view_class }}" target="_blank" rel="noopener noreferrer">{{ widget.plugins.dropdown_footer.create_view_label }}</a>
+            <a href="{{ widget.view_create_url|escapejs }}" title='{% translate "Go to Create View for these items" %}' class="{{ widget.plugins.dropdown_footer.create_view_class }}" target="_blank" rel="noopener noreferrer">{{ widget.plugins.dropdown_footer.create_view_label|escapejs }}</a>
         {% endif %}
 
         {% if "view_list_url" in widget.keys and widget.view_list_url %}
-            <a href="{{ widget.view_list_url }}" title='{% translate "Go to List View for these items" %}' class="{{ widget.plugins.dropdown_footer.list_view_class }}" target="_blank" rel="noopener noreferrer">{{ widget.plugins.dropdown_footer.list_view_label }}</a>
+            <a href="{{ widget.view_list_url|escapejs }}" title='{% translate "Go to List View for these items" %}' class="{{ widget.plugins.dropdown_footer.list_view_class }}" target="_blank" rel="noopener noreferrer">{{ widget.plugins.dropdown_footer.list_view_label|escapejs }}</a>
         {% endif %}
     </div>
     `

src/django_tomselect/templates/django_tomselect/render/dropdown_header.html

@@ -9,29 +9,29 @@
     {% if widget.plugins.dropdown_header.show_value_field %}
         header += `
         <div class="col">
-            <span class="{{ widget.plugins.dropdown_header.label_class }}" role="columnheader">{{ widget.plugins.dropdown_header.value_field_label }}</span>
+            <span class="{{ widget.plugins.dropdown_header.label_class }}" role="columnheader">{{ widget.plugins.dropdown_header.value_field_label|escapejs }}</span>
         </div>
         <div class="col">
-            <span class="{{ widget.plugins.dropdown_header.label_class }}" role="columnheader">{{ widget.plugins.dropdown_header.label_field_label }}</span>
+            <span class="{{ widget.plugins.dropdown_header.label_class }}" role="columnheader">{{ widget.plugins.dropdown_header.label_field_label|escapejs }}</span>
         </div>
         `
     {% else %}
         header += `
         <div class="col">
-            <span class="{{ widget.plugins.dropdown_header.label_class }}" role="columnheader">{{ widget.plugins.dropdown_header.label_field_label }}</span>
+            <span class="{{ widget.plugins.dropdown_header.label_class }}" role="columnheader">{{ widget.plugins.dropdown_header.label_field_label|escapejs }}</span>
         </div>
         `
     {% endif %}
 
     {% for header in widget.plugins.dropdown_header.extra_headers %}
         header += `
         <div class="col">
-            <span class="{{ widget.plugins.dropdown_header.label_class }}" role="columnheader">{{ header }}</span>
+            <span class="{{ widget.plugins.dropdown_header.label_class }}" role="columnheader">{{ header|escapejs }}</span>
         </div>
         `
     {% endfor %}
 
-    return `<div class="{{ widget.plugins.dropdown_header.header_class }}" title="{{ widget.plugins.dropdown_header.title }}" role="row">
+    return `<div class="{{ widget.plugins.dropdown_header.header_class }}" title="{{ widget.plugins.dropdown_header.title|escapejs }}" role="row">
                 <div class="{{ widget.plugins.dropdown_header.title_row_class }}">${header}</div>
             </div>`
 },