Intégration web de tableaux de bord et d'objets DigDash

Modifié par Aurelie Bertrand le 2025/05/15 16:22

ℹ Prérequis : Pour garantir le bon fonctionnement de l’intégration des objets DigDash (tableaux de bord, pages, flux, etc.), les pages HTML doivent être hébergées et servies via un serveur web.

DigDash permet d’intégrer facilement ses tableaux de bord ou objets (graphique, filtres, commentaires, etc.) dans une page web existante. Selon le niveau de personnalisation souhaité et le contexte d’utilisation, plusieurs méthodes sont proposées :

  • Par iFrame : cette méthode consiste à insérer un tableau de bord Digdash complet ou un graphique dans une balise <iframe>. Les autres types d'objets (filtres, commentaires, légendes, etc) ne peuvent être intégrés.
    C’est une solution simple à mettre en place, idéale pour afficher rapidement un contenu autonome.  Le tableau de bord ou la page est complètement séparé du reste du site, ce qui réduit les risques de conflits de style avec la page parent. Cependant, elle offre peu de flexilibilité et d'interactivité.
     

  • Par intégration JavaScript embarquée : cette méthode permet d’insérer directement un tableau de bord ou des objets spécifiques (un graphique, un filtre, une légende, etc.) dans la structure même de la page web. Elle permet plus de flexibilité et d'interactivité mais peut présenter des risques de conflits de style ou script avec la page parent. Elle peut se faire :

    • en utilisant des balises HTML personnalisées (<dd-portlet>, <dd-dashboard>) — solution simple, sans écrire de code JavaScript; pour des pages simples ou dans le cas où le JavaScript n'est pas autorisé.
    • ou via des scripts JavaScript, pour une intégration plus fine et dynamique (filtrage, interactions entre composants, affichage conditionnel…).

ℹ Mode iFrame : Contraintes de sécurité

Certains navigateurs, par exemple Chrome, peuvent refuser de transmettre des cookies provenant d'une page intégrée par une iframe, si cette iframe n'a pas le même domaine que la page l'incluant. Une erreur apparait alors dans la console du navigateur, à propos d'un attribute SameSite qui n'est pas défini.
L'attribut SameSite ne peut pas être défini sur un cookie non sécurisé. Donc le cookie doit aussi avoir un attribut Secure pour permettre de définir SameSite=None. Et l'attribut Secure ne peut être défini que si la connexion est en HTTPS.
En conséquence, intégrer une page de tableaux de bord, ou une page viewflow, en tant qu'iframe, si l'iframe et la page l'incluant ont des domaines différents, nécessite d'utiliser une connexion HTTPS, et de configurer les cookies.

Le document Mozilla suivant explique cette contrainte : https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Set-Cookie/SameSite