brands: fix custom_css being escaped (cherry-pick #14994) (#14996)

brands: fix custom_css being escaped (#14994)

* brands: fix custom_css being escaped



* escape adequately



---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens L. <jens@goauthentik.io>

authentik/brands/tests.py

@@ -148,3 +148,14 @@ class TestBrands(APITestCase):
                 "default_locale": "",
             },
         )
+
+    def test_custom_css(self):
+        """Test custom_css"""
+        brand = create_test_brand()
+        brand.branding_custom_css = """* {
+            font-family: "Foo bar";
+        }"""
+        brand.save()
+        res = self.client.get(reverse("authentik_core:if-user"))
+        self.assertEqual(res.status_code, 200)
+        self.assertIn(brand.branding_custom_css, res.content.decode())

authentik/brands/utils.py

@@ -5,6 +5,8 @@ from typing import Any
 from django.db.models import F, Q
 from django.db.models import Value as V
 from django.http.request import HttpRequest
+from django.utils.html import _json_script_escapes
+from django.utils.safestring import mark_safe
 
 from authentik import get_full_version
 from authentik.brands.models import Brand
@@ -32,8 +34,13 @@ def context_processor(request: HttpRequest) -> dict[str, Any]:
     """Context Processor that injects brand object into every template"""
     brand = getattr(request, "brand", DEFAULT_BRAND)
     tenant = getattr(request, "tenant", Tenant())
+    # similarly to `json_script` we escape everything HTML-related, however django
+    # only directly exposes this as a function that also wraps it in a <script> tag
+    # which we dont want for CSS
+    brand_css = mark_safe(str(brand.branding_custom_css).translate(_json_script_escapes))  # nosec
     return {
         "brand": brand,
+        "brand_css": brand_css,
         "footer_links": tenant.footer_links,
         "html_meta": {**get_http_meta()},
         "version": get_full_version(),

authentik/core/templates/base/skeleton.html

@@ -16,7 +16,7 @@
         {% block head_before %}
         {% endblock %}
         <link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}">
-        <style>{{ brand.branding_custom_css }}</style>
+        <style>{{ brand_css }}</style>
         <script src="{% versioned_script 'dist/poly-%v.js' %}" type="module"></script>
         <script src="{% versioned_script 'dist/standalone/loading/index-%v.js' %}" type="module"></script>
         {% block head %}