Intégrer un site Power Pages dans un autre site Web à l’aide d’un iframe

L’une des manières les plus courantes d’utiliser des applications basées sur le web consiste à intégrer des fonctionnalités d’application Web dans un autre site Web. Habituellement, l’autre site Web existe déjà, mais vous souhaitez améliorer ses capacités et ajouter de nouvelles fonctions qui fonctionnent avec vos données mises en évidence via l’application Power Pages.

Dans ce scénario, il est plus facile d’intégrer les fonctionnalités de votre site Power Pages plutôt que de les créer à partir de zéro. Cet article explique les étapes pour intégrer une application Power Pages dans un autre site Web à l’aide d’un iframe.

Étape 1. Activer le site pour l’iframe

Les iframes sont désactivés sur les nouveaux sites Power Pages par défaut, pour garantir que personne ne peut intégrer votre en externe pour tenter des attaques de "clickjacking".

  1. Définissez l’en-têtes de réponse HTTP. Vous pouvez choisir soit la directive Content-Security-Policy (CSP) frame-ancestors (recommandée), soit X-Frame-Options.

    Note

    Les ancêtres des trames Content-Security-Policy ont remplacé X-Frame-Options et constituent la méthode décrite dans cet article.

    1. Définissez le paramètre du site pour activer l’en-tête HTTP HTTP/Content-Security-Policy. Pour plus d’informations, consultez Configurer les en-têtes HTTP dans les portails.

    2. Suivez la syntaxe décrite dans CSP: frame-ancestors pour définir la valeur.

      Par exemple, pour activer un site Power Pages pouvant être intégré à l’aide d’un iframe dans le site Web www.contoso.com, le paramètre ressemblera à ce qui suit :

      Content-Security-Policy: frame-ancestors 'self' <https://www.contoso.com>;

      Note

      La chaîne 'self' est importante ; sans cela, le site Power Pages ne pourra pas intégrer ses propres pages, ce qui est généralement requis dans des scénarios tels que les menus contextuels modaux pour les formulaires de base.

      Il est important de limiter la possibilité d’intégrer un site Power Pages dans un iframe à des sites spécifiques, plutôt que d’utiliser le caractère générique (*).

      CSP se compose de nombreuses directives dont les valeurs dépendent de divers facteurs (comme d’où les scripts sont chargés). Cet article ne couvre pas ces informations car elles sont spécifiques à l’implémentation. Cependant, nous vous recommandons de tester d’abord cette configuration sur un site hors production, de consulter les erreurs de la console du navigateur pour identifier les problèmes que vous devez résoudre et d’ajuster le paramètre.

  2. Définissez SameSite par défaut sur Aucun pour les cookies de site Power Pages.

    L’attribut SameSite pour les cookies est utile pour sécuriser le site contre les attaques de falsification de requêtes intersites (CSRF). Cependant, cela signifie également que le site ne peut pas être intégré dans un iframe dans des scénarios tels que lorsque le site nécessite une authentification de l’utilisateur ou contient des composants dynamiques tels que des formulaires ou des listes.

    Par conséquent, pour intégrer le site Power Pages dans un iframe, vous devez remplacer l’attribut de cookie SameSite de votre site Power Pages par Aucun par défaut. Plus d’informations : Modifications du mode SameSite

    Note

    Marquer les cookies SameSite avec Aucun ne rend pas votre site Power Pages vulnérable aux attaques CSRF, car Power Pages utilise des jetons anti-CSRF pour empêcher ces attaques.

Étape 2. Incorporer votre site Power Pages

Après avoir terminé l’étape précédente, tout ce que vous avez à faire pour intégrer l’expérience du site Power Pages dans votre site Web est d’utiliser la balise iframe HTML pour intégrer l’ensemble du site ou des pages spécifiques, selon les besoins.

Nous recommandons que le nom de domaine Power Pages soit un frère ou un enfant du nom de domaine du site sur lequel vous intégrez le site dans un iframe. Par exemple, si votre site Web racine est www.contoso.com, le nom de domaine du site Power Pages doit être portal.contoso.com. Ceci est important pour garantir que les cookies utilisés par le site Power Pages ne seront pas classés comme cookies tiers et être bloqué par le navigateur (blog). Sinon, des fonctionnalités telles que Captcha et la redirection de formulaire de base/à plusieurs étapes pourraient ne pas fonctionner correctement. Pour configurer un nom de domaine personnalisé sur votre site Power Pages, rendez-vous sur Ajouter un nom de domaine personnalisé.

Étape 3. Gérer les en-têtes et pieds de page

Vous pouvez modifier l’apparence des en-têtes et des pieds de page ou s’ils apparaissent du tout sur les pages du site Power Pages intégré.

Empêcher l’affichage des en-têtes et pieds de page du site intégré

Il est courant que le site parent sur lequel vous souhaitez intégrer un site Power Pages ait déjà des en-têtes et des pieds de page. Dans de telles situations, il se peut que vous ne souhaitiez pas afficher l’en-tête et le pied de page du site intégré. Envisageons les scénarios suivants :

  • Lorsqu’un site Power Pages entier est intégré dans un iframe
    Supprimez le contenu de votre en-tête et de votre pied de page en mettant à jour les modèles Web d’en-tête et de pied de page respectifs.

  • Lorsqu’une page de site Power Pages spécifique est intégrée dans un iframe
    En règle générale, vous ne souhaitez pas afficher l’en-tête ou le pied de page du site lorsque vous intégrez une page spécifique dans un site Web. Cependant, vous souhaitez toujours que l’en-tête et le pied de page soient disponibles lorsque l’utilisateur accède directement au site. Vous pouvez y parvenir en modifiant les en-têtes et les pieds de page pour un rendu dynamique basé sur le contenu de la page.

Ajouter du code conditionnel dans l’en-tête et les pieds de page

Les modèles Web d’en-tête et de pied de page prennent en charge les personnalisations liquides complètes, vous pouvez donc ajouter du code conditionnel pour restituer certaines propriétés.

Par exemple, le code suivant affiche une barre de recherche dans l’en-tête si la page est autre chose que la page de recherche.

Important

Parce que l’en-tête est un élément commun à toutes les pages, page.id sera mis en cache par défaut pour la première page ouverte par un utilisateur. Par conséquent, ce code utilise la balise de substitution pour s’assurer que ces éléments ne seront pas mis en cache et seront toujours évalués en fonction de la page actuelle.

{% substitution %}
{% assign current_page = page.id %}
{% assign sr_page = sitemarkers[Search].id %}
{% if current_page == sr_page %}
{% assign section_class = section-landing-search %}
<section class=page_section section-landing-{{ current_page }} {{ section_class | h }} color-inverse\>
    <div class=container\>
        <div class=row \>
            <div class=col-md-12 text-center\>
                {% if current_page == sr_page %}
                    <h1 class=section-landing-heading\>{% editable snippets 'Search/Title' default:resx["Discover_Contoso"] %}\</h1\>
                {% include 'Search' %}
                {% endif %}
            </div\>
        </div\>
    </div\>
</section\>
{% endif %}
{% endsubstitution %}

Au lieu d’ajouter du code conditionnel dans l’en-tête et les pieds de page, vous pouvez également envisager les méthodes suivantes. Cependant, nous ne recommandons pas l’une ou l’autre approche ; ils ont tous les deux des limitations et aucun ne prend en charge toutes les fonctionnalités.

  • Pour les scénarios en lecture seule qui n’incluent aucune liste ni aucun formulaire, désactivez l’en-tête et le pied de page de votre modèle.
  • Utiliser un modèle de réécriture spécial (~/Areas/Portal/Pages/Form.aspx).

Voir aussi

  • Last updated on