Tester le referrer d’une iframe¶

Ce guide explique comment tester que le referrer (l’URL de la page parente) est correctement capturĂ© et transmis lorsque notre site est intĂ©grĂ© dans une iframe sur un autre site.

Contexte¶

Lorsque notre application est intĂ©grĂ©e via iframe sur un site tiers, nous capturons l’URL complĂšte de la page parente (incluant les paramĂštres de requĂȘte) pour nos analyses. Cette URL est encodĂ©e en base64 et passĂ©e comme paramĂštre ref dans l’URL de l’iframe, puis dĂ©codĂ©e cĂŽtĂ© analytics pour ĂȘtre stockĂ©e dans le sessionStorage sous la clĂ© qf_ifr.

Prérequis¶

  • ngrok installĂ© sur votre machine

  • Le serveur de dĂ©veloppement local configurĂ©

Étapes de test¶

1. Installer ngrok¶

Si ce n’est pas dĂ©jĂ  fait, installez ngrok depuis https://ngrok.com/

2. Démarrer le serveur local¶

Lancez votre serveur web local sur le port 8000 (ou un autre port de votre choix) :

python manage.py runserver 8000

3. Exposer le serveur local via ngrok¶

Dans un autre terminal, lancez ngrok en spĂ©cifiant le mĂȘme port que votre serveur local :

ngrok http 8000

Ngrok vous donnera une URL publique temporaire, par exemple : https://4a3a46f653a8.ngrok-free.app

4. RĂ©cupĂ©rer l’URL de prĂ©visualisation Lookbook¶

Allez sur la page de test Lookbook du referrer :

https://quefairedemesdechets.ademe.local/lookbook/inspect/tests/t_1_referrer/

En haut Ă  droite de l’écran, copiez l’URL de prĂ©visualisation. Elle ressemble Ă  :

https://quefairedemesdechets.ademe.local/lookbook/preview/tests/t_1_referrer/?timestamp=1768857086931&display=%257B%2522theme%2522%253A%2522light%2522%257D

5. Remplacer le host par celui de ngrok¶

Remplacez quefairedemesdechets.ademe.local par votre URL ngrok dans l’URL de prĂ©visualisation :

https://4a3a46f653a8.ngrok-free.app/lookbook/preview/tests/t_1_referrer/?timestamp=1768857086931&display=%257B%2522theme%2522%253A%2522light%2522%257D

Ouvrez cette URL dans votre navigateur.

6. Vérifier le sessionStorage¶

  1. Ouvrez les outils de développement de votre navigateur (F12)

  2. Allez dans l’onglet « Application » (Chrome) ou « Stockage » (Firefox)

  3. Dans la section « Session Storage », sélectionnez le domaine local

  4. Cherchez la clé qf_ifr

7. Vérifier le résultat attendu¶

La valeur de qf_ifr doit afficher le referrer complet avec tous les paramĂštres, par exemple :

https://4a3a46f653a8.ngrok-free.app/lookbook/preview/tests/t_1_referrer/?timestamp=1768855346452&display=%257B%2522theme%2522%253A%2522light%2522%257D

Si c’est le cas, le referrer est correctement capturĂ© et transmis ! 🎉