🏗️ Correction du mode iframe : ajout tests, meilleure persistance (#1764)

Author: fabienheureux

.secrets.baseline

@@ -90,6 +90,10 @@
     {
       "path": "detect_secrets.filters.allowlist.is_line_allowlisted"
     },
+    {
+      "path": "detect_secrets.filters.common.is_baseline_file",
+      "filename": ".secrets.baseline"
+    },
     {
       "path": "detect_secrets.filters.common.is_ignored_due_to_verification_policies",
       "min_level": 2
@@ -138,7 +142,7 @@
         "filename": "core/settings.py",
         "hashed_secret": "1ee34e26aeaf89c64ecc2c85efe6a961b75a50e9",
         "is_verified": false,
-        "line_number": 295
+        "line_number": 296
       }
     ],
     "dbt/package-lock.yml": [
@@ -187,5 +191,5 @@
       }
     ]
   },
-  "generated_at": "2025-07-02T08:21:38Z"
+  "generated_at": "2025-07-03T13:57:54Z"
 }

core/context_processors.py

@@ -26,9 +26,9 @@ def content(request):
 
 def global_context(request) -> dict:
     base = {
+        "iframe": getattr(request, "iframe", False),
         "assistant": {
             "is_home": request.path == reverse("home"),
-            "is_iframe": "iframe" in request.GET,
             "POSTHOG_KEY": settings.ASSISTANT["POSTHOG_KEY"],
             "MATOMO_ID": settings.ASSISTANT["MATOMO_ID"],
             "BASE_URL": settings.ASSISTANT["BASE_URL"],

core/settings.py

@@ -174,13 +174,17 @@
 with suppress(ModuleNotFoundError):
     from debug_toolbar.settings import CONFIG_DEFAULTS
 
+    def show_toolbar_callback(request):
+        path_is_not_excluded = not any(p in request.path for p in patterns_to_exclude)
+        # view_is_not_in_iframe_mode = "iframe" not in request.GET
+        return path_is_not_excluded
+
     patterns_to_exclude = [
         "/test_iframe",
+        "/lookbook",
     ]
     DEBUG_TOOLBAR_CONFIG = {
-        "SHOW_TOOLBAR_CALLBACK": lambda request: not any(
-            p in request.path for p in patterns_to_exclude
-        ),
+        "SHOW_TOOLBAR_CALLBACK": show_toolbar_callback,
         "HIDE_IN_STACKTRACES": CONFIG_DEFAULTS["HIDE_IN_STACKTRACES"] + ("sentry_sdk",),
     }
 
@@ -256,9 +260,6 @@ def context_processors():
                 "sites_faciles.content_manager.context_processors.skiplinks",
                 "sites_faciles.content_manager.context_processors.mega_menus",
             ],
-            "builtins": [
-                "core.templatetags.iframe_tags",
-            ],
         },
     },
 ]
@@ -518,5 +519,5 @@ def context_processors():
 # ---
 LOOKBOOK = {
     "preview_base": ["previews"],
-    "show_previews": DEBUG,
+    "show_previews": decouple.config("SHOE_PREVIEWS", default=True, cast=bool),
 }

core/templatetags/iframe_tags.py

@@ -1,5 +1,6 @@
 import { expect } from "@playwright/test"
 import { test } from "./config"
+import { hideDjangoToolbar } from "./helpers"
 
 test("Desktop | iframe formulaire is loaded with correct parameters", async ({
   page,
@@ -116,7 +117,7 @@ test("Desktop | iframe cannot read the referrer when referrerPolicy is set to no
   expect(referrer).toBe("")
 })
 
-test("iframe can read the referrer when referrerPolicy is not set", async ({
+test("Desktop | iframe can read the referrer when referrerPolicy is not set", async ({
   page,
   assistantUrl,
 }) => {
@@ -136,22 +137,29 @@ test("iframe can read the referrer when referrerPolicy is not set", async ({
   expect(referrer).toBe(`${assistantUrl}/test_iframe?carte=1`)
 })
 
-// Need to be run locally with nginx running
-// test("Desktop | iframe mode is kept during navigation", async ({ browser, page, carteUrl, assistantUrl }) => {
-//   await page.goto(`/dechet/chaussures?iframe`, { waitUntil: "domcontentloaded" });
-//   page.getByTestId("header-logo-link").click()
-//   await expect(page).toHaveURL(`${assistantUrl}`)
-//   expect(await page.$("body > footer")).toBeFalsy()
-//   await page.close()
-
-//   const newPage = await browser.newPage()
-//   await newPage.goto(`/dechet/chaussures`, { waitUntil: "networkidle" });
-//   expect(browser.contexts)
-//   expect(await newPage.$("body > footer")).toBeTruthy()
-//   await newPage.close()
-//   const yetAnotherPage = await browser.newPage()
-//   await yetAnotherPage.goto(`/dechet/chaussures?iframe`, { waitUntil: "networkidle" });
-//   await yetAnotherPage.goto(`/`, { waitUntil: "networkidle" });
-//   await yetAnotherPage.goto(`/dechet/chaussures`, { waitUntil: "networkidle" });
-//   expect(await yetAnotherPage.$("body > footer")).not.toBeTruthy()
-// });
+test("Desktop | iFrame mode persists across navigation", async ({
+  page,
+  assistantUrl,
+}) => {
+  test.slow()
+  // Starting URL - change this to your site's starting point
+  await page.goto(`${assistantUrl}/?iframe`, { waitUntil: "domcontentloaded" })
+  expect(page).not.toBeNull()
+
+  for (let i = 0; i < 50; i++) {
+    await expect(page.locator("body")).toHaveAttribute(
+      "data-state-iframe-value",
+      "true",
+    )
+
+    // Find all internal links on the page (href starting with the same origin)
+    const links = page.locator(`a[href^="${assistantUrl}"]`)
+
+    // Pick a random internal link to click
+    const count = await links.count()
+    const randomLink = links.nth(Math.floor(Math.random() * count))
+    if (await randomLink.isVisible()) {
+      await randomLink.click()
+    }
+  }
+})

e2e_tests/iframe.spec.ts

@@ -1,5 +1,7 @@
 # Ignore line length recommandations from flake8
 # flake8: noqa: E501
+from django.conf import settings
+from django.template import Context, Template
 from django.template.loader import render_to_string
 from django_lookbook.preview import LookbookPreview
 
@@ -92,3 +94,69 @@ def suggestions(self, **kwargs):
     def share_and_embed(self, **kwargs):
         context = {"heading": "Faites découvrir ce site"}
         return render_to_string("snippets/share_and_embed.html", context)
+
+
+class IframePreview(LookbookPreview):
+    def carte(self, **kwargs):
+        template = Template(
+            f"""
+            <script src="{settings.ASSISTANT["BASE_URL"]}/static/carte.js"></script>
+            """,
+        )
+        return template.render(Context({}))
+
+    def carte_sur_mesure(self, **kwargs):
+        template = Template(
+            f"""
+            <script src="{settings.ASSISTANT["BASE_URL"]}/static/carte.js" data-slug="cyclevia"></script>
+            """,
+        )
+
+        return template.render(Context({}))
+
+    def carte_preconfiguree(self, **kwargs):
+        template = Template(
+            f"<script src='{settings.ASSISTANT['BASE_URL']}/static/carte.js'"
+            """data-action_displayed="preter|emprunter|louer|mettreenlocation|reparer|donner|echanger|acheter|revendre"
+            data-max-width="800px"
+            data-height="720px"
+            data-bounding_box="{&quot;southWest&quot;: {&quot;lat&quot;: 47.570401, &quot;lng&quot;: 1.597977}, &quot;northEast&quot;: {&quot;lat&quot;: 48.313697, &quot;lng&quot;: 3.059159}}"
+            ></script>
+            """
+        )
+
+        return template.render(Context({}))
+
+    def formulaire(self, **kwargs):
+        template = Template(
+            f"<script src='{settings.LVAO['BASE_URL']}/static/iframe.js'"
+            """
+                data-max_width="100%"
+                data-height="720px"
+                data-direction="jai"
+                data-first_dir="jai"
+                data-action_list="reparer|echanger|mettreenlocation|revendre"
+                data-iframe_attributes='{"loading":"lazy", "id" : "resize" }'>
+                </script>
+            """
+        )
+
+        return template.render(Context({}))
+
+    def assistant(self, **kwargs):
+        template = Template(
+            f"""
+        <script src="{settings.ASSISTANT["BASE_URL"]}/iframe.js" data-testid='assistant'></script>
+        """
+        )
+
+        return template.render(Context({}))
+
+    def assistant_without_referrer(self, **kwargs):
+        template = Template(
+            f"""
+        <script src="{settings.ASSISTANT["BASE_URL"]}/iframe.js" data-debug-referrer data-testid='assistant'></script>
+        """
+        )
+
+        return template.render(Context({}))

previews/template_preview.py

@@ -3,16 +3,22 @@ def __init__(self, get_response):
         self.get_response = get_response
 
     def __call__(self, request):
+        # Prepare request
+        self._prepare_request_if_iframe(request)
         response = self.get_response(request)
 
+        # Prepare response
         self._set_logged_in_cookie(request, response)
-        self._handle_iframe_cookie(request, response)
+        self._persist_iframe_in_headers(request, response)
         self._cleanup_vary_header(response)
 
         return response
 
     def _set_logged_in_cookie(self, request, response):
-        """Set or update the 'logged-in' header based on authentication."""
+        """Set or update the 'logged-in' header based on authentication.
+        It is use to bypass cache by nginx.
+
+        If present, the logged_in cookie bypasses the cache."""
         cookie_name = "logged_in"
 
         # In some cases, gunicorn can be reached directly without going through
@@ -26,15 +32,32 @@ def _set_logged_in_cookie(self, request, response):
         elif request.COOKIES.get(cookie_name):
             response.delete_cookie(cookie_name)
 
-    def _handle_iframe_cookie(self, request, response):
-        """Manage iframe-related headers and cookies."""
-        iframe_in_request = "iframe" in request.GET
-        iframe_cookie = response.cookies.get("iframe")
+    def _prepare_request_if_iframe(self, request):
+        """Detect if the request comes from an iframe mode.
+        The iframe mode is usually set on the initial request, and must be passed
+        during the navigation.
+        To be RGPD-compliant, and to satisfy some of our users constraints, we
+        cannot use Django session's cookie.
+        We rely on a mix between querystring and referrer.
 
-        if iframe_in_request:
-            response.set_cookie("iframe", "1")
-            response.headers["iframe"] = "1"
-        elif iframe_cookie and iframe_cookie.value == "1":
+        We also have a client-side fallback, based on sessionStorage : on initial
+        request, we set the iframe value in sessionStorage.
+        """
+        is_in_iframe_mode = False
+        if request.headers.get("Sec-Fetch-Dest") == "iframe":
+            is_in_iframe_mode = True
+
+        if "iframe" in request.GET:
+            is_in_iframe_mode = True
+
+        request.iframe = is_in_iframe_mode
+
+    def _persist_iframe_in_headers(self, request, response):
+        """Persist iframe state in headers.
+        This is useful as headers are used as a cache key with nginx.
+        iFrame version of pages are cached differently."""
+
+        if request.iframe:
             response.headers["iframe"] = "1"
         else:
             # Ensure the iframe header is not lingering

qfdmd/middleware.py

@@ -19,7 +19,7 @@ export default class extends Controller<HTMLElement> {
   declare iframeValue: boolean
 
   connect() {
-    document.addEventListener("turbo:frame-load", this.#initRecurringEvents.bind(this))
+    document.addEventListener("turbo:load", this.#initRecurringEvents.bind(this))
   }
 
   #initRecurringEvents(event) {
@@ -31,9 +31,27 @@ export default class extends Controller<HTMLElement> {
     this.configureIframeSpecificUI()
   }
 
+  #redirectIfIframeMisconfigured() {
+    /**
+    In some situation, the sessionStorage read a true value for iframe whereas
+    the url does not contain the iframe param.
+    The cause is yet unclear, but as fallback we detect this situation and redirect
+    the user dynamically to the correct location, with iframe in the querystring.
+    */
+    const url = new URL(window.location.href)
+    const params = url.searchParams
+
+    if (!params.has("iframe")) {
+      params.set("iframe", "1")
+      url.search = params.toString()
+      window.location.href = url.toString()
+    }
+  }
+
   configureIframeSpecificUI() {
     if (sessionStorage.getItem("iframe") === "true") {
       this.iframeValue = true
+      this.#redirectIfIframeMisconfigured()
     }
 
     if (this.iframeValue) {

static/to_compile/controllers/assistant/state.ts

@@ -1,11 +1,11 @@
 <div class="qf-bg-grey-1000-50-hover qf-py-9w">
-    {% if assistant.is_iframe %}
+    {% if request.iframe %}
         {% include "./_embedded.html" %}
     {% else %}
         {% include "./_standalone.html" %}
     {% endif %}
 </div>
 
-{% if not assistant.is_iframe %}
+{% if not iframe %}
     {% include "./_dsfr_footer.html" %}
 {% endif %}

templates/components/footer/footer.html

@@ -1,5 +1,5 @@
 {% if not assistant.is_home %}
-<header role="banner" class="fr-container qf-filter-none fr-header max-md:qf-hidden">
+<header role="banner" class="fr-container qf-filter-none fr-header max-md:qf-hidden" data-testid="header-iframe">
   <div class="fr-header__body">
     <div class="fr-container">
       <div class="fr-header__body-row">