flows: preserve signed background URLs in CSS (#21868)

* flows: preserve signed background URLs in CSS

Flow background URLs can include signed S3 query parameters with & separators. These values are rendered inside <style> tags, where Django autoescaping changes & to &amp;; browsers then request the literal escaped query string from S3, causing 400 responses for presigned background images.

Mark the flow background URL values as safe in the CSS-only template contexts used by the standard flow interface, the SFE flow page, and the full-screen login background. Regression coverage asserts that signed URL query separators are preserved in the rendered CSS for both standard and SFE flows.

Co-authored-by: Codex <codex@openai.com>

* flows: preserve signed background URLs in CSS

* fix unrelated test

---------

Co-authored-by: Codex <codex@openai.com>

authentik/brands/tests.py

@@ -20,11 +20,16 @@ class TestBrands(APITestCase):
 
     def setUp(self):
         super().setUp()
-        self.default_flags = {}
-        for flag in Flag.available(visibility="public"):
-            self.default_flags[flag().key] = flag.get()
         Brand.objects.all().delete()
 
+    @property
+    def default_flags(self) -> dict[str, object]:
+        """Get current public flags.
+
+        Some tests define temporary Flag subclasses, so this can't be cached in setUp.
+        """
+        return {flag().key: flag.get() for flag in Flag.available(visibility="public")}
+
     def test_current_brand(self):
         """Test Current brand API"""
         brand = create_test_brand()

authentik/core/templates/login/base_full.html

@@ -12,7 +12,7 @@
 {% block head %}
 <style data-id="static-styles">
     :root {
-        --ak-global--background-image: url("{{ request.brand.branding_default_flow_background_url }}");
+        --ak-global--background-image: url("{{ request.brand.branding_default_flow_background_url|iriencode|safe }}");
     }
 </style>
 

authentik/flows/templates/if/flow-sfe.html

@@ -23,7 +23,7 @@
             height: 100%;
           }
           body {
-            background-image: url("{{ flow_background_url }}");
+            background-image: url("{{ flow_background_url|iriencode|safe }}");
             background-repeat: no-repeat;
             background-size: cover;
           }

authentik/flows/templates/if/flow.html

@@ -39,7 +39,7 @@
 <script src="{% versioned_script 'dist/flow/FlowInterface-%v.js' %}" type="module"></script>
 <style data-id="flow-css">
   :root {
-      --ak-global--background-image: url("{{ flow_background_url }}");
+      --ak-global--background-image: url("{{ flow_background_url|iriencode|safe }}");
   }
 </style>
 {% endblock %}

authentik/flows/tests/test_stage_views.py

@@ -1,12 +1,14 @@
 """stage view tests"""
 
 from collections.abc import Callable
+from unittest.mock import patch
 
 from django.test import RequestFactory, TestCase
+from django.urls import reverse
 
 from authentik.core.tests.utils import RequestFactory as AuthentikRequestFactory
 from authentik.core.tests.utils import create_test_flow
-from authentik.flows.models import FlowStageBinding
+from authentik.flows.models import Flow, FlowStageBinding
 from authentik.flows.stage import StageView
 from authentik.flows.views.executor import FlowExecutorView
 from authentik.lib.utils.reflection import all_subclasses
@@ -42,6 +44,46 @@ class TestViews(TestCase):
             "/static/dist/assets/images/flow_background.jpg",
         )
 
+    def test_flow_interface_css_background_preserves_presigned_url_query(self):
+        """Test flow CSS keeps signed URL query separators intact."""
+        flow = create_test_flow()
+        background_url = (
+            "https://s3.ca-central-1.amazonaws.com/example/media/public/background.png"
+            "?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=credential"
+            "&X-Amz-Signature=signature"
+        )
+
+        with patch.object(Flow, "background_url", return_value=background_url):
+            response = self.client.get(
+                reverse("authentik_core:if-flow", kwargs={"flow_slug": flow.slug})
+            )
+
+        self.assertContains(
+            response,
+            f'--ak-global--background-image: url("{background_url}");',
+            html=False,
+        )
+
+    def test_flow_sfe_css_background_preserves_presigned_url_query(self):
+        """Test SFE flow CSS keeps signed URL query separators intact."""
+        flow = create_test_flow()
+        background_url = (
+            "https://s3.ca-central-1.amazonaws.com/example/media/public/background.png"
+            "?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=credential"
+            "&X-Amz-Signature=signature"
+        )
+
+        with patch.object(Flow, "background_url", return_value=background_url):
+            response = self.client.get(
+                reverse("authentik_core:if-flow", kwargs={"flow_slug": flow.slug}) + "?sfe"
+            )
+
+        self.assertContains(
+            response,
+            f'background-image: url("{background_url}");',
+            html=False,
+        )
+
 
 def view_tester_factory(view_class: type[StageView]) -> Callable:
     """Test a form"""