Incorporer une application de code dans un iframe

Cet article explique comment incorporer une application de code dans un iframe au sein d’un hôte externe, comme une ressource web d’application pilotée par modèle, un site web personnalisé ou un autre service prenant en charge les iframes. Étant donné que les applications de code appliquent la stratégie de sécurité de contenu (CSP) par défaut, vous devez mettre à jour la frame-ancestors directive pour permettre à votre hôte de charger l’application.

Note

• Seuls les utilisateurs de Power Apps au sein du même tenant peuvent accéder à une application de code intégré. Vous ne pouvez pas partager l’URL iframe avec des utilisateurs en dehors de votre locataire.
• Vous ne pouvez pas incorporer d’applications de code dans une application de bureau native, qui inclut Android et iOS. Cette limitation exclut les intégrations internes telles que Power Apps dans Teams.

Prerequisites

• Vous devez être administrateur de l’environnement Power Platform pour mettre à jour les paramètres CSP.
• L’application de code doit être déployée dans un environnement.

Obtenir l’URL de l’application de code

Pour incorporer une application de programmation, vous avez besoin de son URL de lancement. L’URL prend la forme suivante :

https://apps.powerapps.com/play/e/{environmentId}/app/{appId}?tenantid={tenantId}

Vous trouverez l’URL complète en ouvrant l’application dans Power Apps et en copiant l’adresse à partir du navigateur. tenantId est un paramètre de requête facultatif pour prendre en charge l’accès invité et détermine le locataire à partir duquel ouvrir l’application.

Ajouter l’iframe à votre serveur

Après avoir obtenu l’URL de l’application de code, ajoutez un <iframe> élément au code HTML de votre hôte. Remplacez l’URL de votre application par la src valeur et définissez la largeur et la hauteur en fonction de votre disposition.

<iframe
  width="1200"
  height="800"
  src="https://apps.powerapps.com/play/e/{environmentId}/{appId}"
  title="My code app">
</iframe>

Note

Si votre application de code utilise la géolocalisation de l’appareil, le microphone, la caméra, l’écran complet ou les API du Presse-papiers, incluez les autorisations correspondantes dans l’attribut allow :

<iframe ... allow="geolocation; microphone; camera; fullscreen; clipboard-write"></iframe>

Configurer CSP pour autoriser le framing

Par défaut, les applications de code utilisent la directive suivante frame-ancestors , qui limite les origines qui peuvent charger l’application dans un cadre :

frame-ancestors 'self' https://*.powerapps.com

Si vous incorporez une application de code dans n’importe quel hôte en dehors de https://*.powerapps.com, par exemple une application basée sur un modèle, une instance Dynamics 365 ou un site web personnalisé, le navigateur bloque le cadre et enregistre une violation csp similaire à ce qui suit :

Refused to frame 'https://<environment>.powerplatformusercontent.com/' because it violates the following Content Security Policy directive: "frame-ancestors 'self' https://*.powerapps.com"

Pour résoudre ce problème, ajoutez votre origine d’hôte à la frame-ancestors directive pour l’environnement. Par exemple:

• Pour une application Dynamics 365 ou pilotée par modèle : https://<your-org>.crm.dynamics.com
• Pour un domaine personnalisé : https://contoso.com

Important

Les valeurs personnalisées fusionnent avec la valeur par défaut frame-ancestors . Une fois que vous avez enregistré, la directive effective est la suivante :

frame-ancestors 'self' https://*.powerapps.com https://<your-org>.crm.dynamics.com

Pour obtenir des instructions sur la mise à jour de la frame-ancestors directive à l’aide du Centre d’administration Power Platform ou de l’API REST, consultez Configurer la stratégie de sécurité du contenu.

Articles connexes

Configurer la stratégie de sécurité du contenu
architecture