Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
In diesem Artikel wird erläutert, wie Sie eine Code-App in ein iframe in einem externen Host einbetten, z. B. eine modellgesteuerte App-Webressource, eine benutzerdefinierte Website oder einen anderen Dienst, der iFrames unterstützt. Da Code-Apps standardmäßig eine Inhaltssicherheitsrichtlinie (Content Security Policy, CSP) erzwingen, müssen Sie die frame-ancestors Direktive aktualisieren, damit Ihr Host die App laden kann.
Hinweis
- Nur Power Apps Benutzer innerhalb desselben Mandanten können auf eine eingebettete Code-App zugreifen. Sie können die iframe-URL nicht für Benutzer außerhalb Ihres Mandanten freigeben.
- Sie können Code-Apps nicht in eine systemeigene Desktopanwendung einbetten, die Android und iOS enthält. Diese Einschränkung schließt Erstanbieterintegrationen wie Power Apps in Teams aus.
Voraussetzungen
- Sie müssen ein Administrator der Power Platform-Umgebung sein, um CSP-Einstellungen zu aktualisieren.
- Die Code-Anwendung muss in einer Umgebung bereitgestellt werden.
Code-App-URL abrufen
Zum Einbetten einer Code-App benötigen Sie dessen Wiedergabe-URL. Die URL hat die folgende Form:
https://apps.powerapps.com/play/e/{environmentId}/app/{appId}?tenantid={tenantId}
Sie finden die vollständige URL, indem Sie die App in Power Apps öffnen und die Adresse aus dem Browser kopieren.
tenantId ist ein optionaler Abfrageparameter zur Unterstützung des Gastzugriffs und bestimmt, von welchem Mandanten die App geöffnet werden soll.
Hinzufügen des iframes zu Ihrem Host
Nachdem Sie die Code-App-URL abgerufen haben, fügen Sie dem HTML-Code Ihres Hosts ein <iframe> Element hinzu. Ersetzen Sie die App-URL durch den src Wert, und legen Sie die Breite und Höhe entsprechend dem Layout fest.
<iframe
width="1200"
height="800"
src="https://apps.powerapps.com/play/e/{environmentId}/{appId}"
title="My code app">
</iframe>
Hinweis
Wenn Ihre Code-App die Geolocation-, Mikrofon-, Kamera-, Vollbild- oder Zwischenablage-APIs verwendet, schließen Sie die entsprechenden Berechtigungen in das allow Attribut ein:
<iframe ... allow="geolocation; microphone; camera; fullscreen; clipboard-write"></iframe>
CSP zum Erlauben von Framing konfigurieren
Standardmäßig verwenden Code-Apps die folgende frame-ancestors Direktive, die einschränkt, welche Ursprünge die App in einem Frame laden können:
frame-ancestors 'self' https://*.powerapps.com
Wenn Sie eine Code-App in einen Host außerhalb von https://*.powerapps.com einbetten, z. B. eine modellgesteuerte App, eine Dynamics 365-Instanz oder eine benutzerdefinierte Website, blockiert der Browser den Frame und protokolliert eine CSP-Verletzung ähnlich wie folgt:
Refused to frame 'https://<environment>.powerplatformusercontent.com/' because it violates the following Content Security Policy directive: "frame-ancestors 'self' https://*.powerapps.com"
Um dieses Problem zu beheben, fügen Sie Ihren Host-Origin der frame-ancestors-Direktive für die Umgebung hinzu. Beispiel:
- Für eine Dynamics 365- oder modellgesteuerte App:
https://<your-org>.crm.dynamics.com - Für eine benutzerdefinierte Domäne:
https://contoso.com
Von Bedeutung
Benutzerdefinierte Werte werden mit dem Standardwert frame-ancestors zusammengeführt. Nach dem Speichern lautet die wirksame Richtlinie:
frame-ancestors 'self' https://*.powerapps.com https://<your-org>.crm.dynamics.com
Anweisungen zum Aktualisieren der Direktive mithilfe des Power Platform Admin Centers oder der REST-API finden Sie unter Konfigurieren der frame-ancestorsInhaltssicherheitsrichtlinie.