Freigeben über

Einbetten einer Power Pages-Website in eine andere Website mithilfe eines iFrames

Eine der gängigsten Methoden zur Verwendung von webbasierten Anwendungen besteht darin, Webanwendungsfunktionen in eine andere Website einzubetten. Normalerweise existiert die andere Website bereits, aber Sie möchten ihre Fähigkeiten verbessern und neue Funktionen hinzufügen, die mit Ihren über die Power Pages-Anwendung angezeigten Daten arbeiten.

In diesem Szenario ist es einfacher, Ihre Power Pages-Websitefunktionalität einzubetten, als sie von Grund auf neu zu erstellen. In diesem Artikel werden die Schritte zum Einbetten einer Power Pages-Anwendung in eine andere Website mithilfe eines iFrames erläutert.

Schritt 1. Die Website für iFrame aktivieren

iFrames sind auf neuen Power Pages-Websites standardmäßig deaktiviert, um sicherzustellen, dass niemand Ihre Website extern einbetten kann, um Clickjacking-Angriffe zu versuchen.

  1. Die HTTP-Header-Antwort einrichten. Sie können entweder die Content-Sicherheitsrichtlinie (CSP) Frame-Vorgänger Direktive (empfohlen) oder X-Frame-Optionen auswählen.

    Anmerkung

    Content-Sicherheitsrichtlinien-Frame-Vorgänger hat X-Frame-Optionen abgelöst und ist die in diesem Artikel beschriebene Methode.

    1. Legen Sie die Site-Einstellung fest, um den HTTP-Header HTTP/Content-Sicherheitsrichtlinie zu aktivieren. Weitere Informationen: Einrichten des HTTP-Headers in Portalen

    2. Befolgen Sie die CSP: Frame-Vorgänger beschriebene Syntax, um den Wert einzustellen.

      Um eine Power Pages-Site zu aktivieren, die mithilfe eines iFrames in die Website www.contoso.com eingebettet wird, sieht die Einstellung zum Beispiel wie folgt aus:

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

      Anmerkung

      Die 'self'-Zeichenfolge ist wichtig. Ohne sie kann die Power Pages-Site keine eigenen Seiten einbetten, was häufig in Szenarien wie modalen Popup-Menüs für grundlegende Formulare erforderlich ist.

      Es ist wichtig, die Möglichkeit zum Einbetten einer Power Pages-Site in einen iFrame auf bestimmte Websites zu beschränken, anstatt das Platzhalterzeichen (*) zu verwenden.

      CSP besteht aus zahlreichen Direktiven, deren Werte von verschiedenen Faktoren abhängen (z.B. von wo die Skripte geladen werden). In diesem Artikel werden diese Informationen nicht behandelt, da sie implementierungsspezifisch sind. Wir empfehlen jedoch, dieses Setup zuerst auf einem Nicht-Produktionswebsite zu testen, die Browserkonsolenfehler zu überprüfen, um Probleme zu identifizieren, die Sie beheben müssen, und die Einstellung anzupassen.

  2. Stellen Sie SameSite standardmäßig auf Keine für Power Pages-Websitecookies.

    Das SameSite-Attribut für Cookies ist nützlich, um die Website gegen websiteübergreifende Anforderungsfälschungen (CSRF) zu schützen. Dies bedeutet jedoch auch, dass die Site in Szenarien nicht in einen iFrame eingebettet werden kann, z. B. wenn die Site eine Benutzerauthentifizierung erfordert oder dynamische Komponenten wie Formulare oder Listen enthält.

    Um die Power Pages-Site in einen iFrame einzubetten, müssen Sie daher das SameSite-Cookie-Attribut für Ihre Power Pages-Site standardmäßig in Keine ändern. Mehr Informationen: Änderungen im SameSite-Modus

    Anmerkung

    Markieren von SameSite-Cookies als Keine macht Ihre Power Pages-Site nicht anfällig für CSRF-Angriffe, da die Power Pages Anti-CSRF-Token verwenden, um diese Angriffe zu verhindern.

Schritt 2. Ihre Power Pages-Website einbetten

Nachdem Sie den vorherigen Schritt abgeschlossen haben, müssen Sie zum Einbetten der Power Pages-Site-Umgebung in Ihre Website nur das HTML-iFrame-Tag nutzen, um die gesamte Site oder einzelne Seiten nach Bedarf einzubetten.

Es wird empfohlen, dass der Power Pages-Domänenname ein gleichgeordneter oder untergeordneter Domänenname der Site ist, auf der Sie die Site in einen iFrame einbetten. Wenn Ihre Stammwebsite beispielsweise www.contoso.com ist, sollte der Domainname der Power Pages-Site portal.contoso.com lauten. Dies ist wichtig, um sicherzustellen, dass die von der Power Pages-Site verwendeten Cookies nicht klassifiziert als Cookies von Drittanbietern klassifiziert und vom Browser blockiert werden (Blog). Andernfalls funktionieren Funktionen wie Captcha und grundlegende/mehrstufige Formularumleitung möglicherweise nicht richtig. Um einen benutzerdefinierten Domainnamen in Ihrer Power Pages-Site einzurichten, gehen Sie zu Einen benutzerdefinierten Domainnamen hinzufügen.

Schritt 3. Kopf- und Fußzeile behandeln

Sie können ändern, wie Kopf- und Fußzeilen auf eingebetteten Power Pages-Websiteseiten angezeigt werden – oder ob sie überhaupt angezeigt werden.

Verhindern, dass die eingebetteten Site-Kopf- und -Fußzeilen angezeigt werden

Es ist üblich, dass die übergeordnete Website, auf der Sie eine Power Pages-Site einbetten möchten, bereits Kopf- und Fußzeilen enthält. In solchen Situationen möchten Sie möglicherweise die Kopf- und Fußzeile der eingebetteten Site nicht anzeigen. Betrachten Sie die folgenden Szenarien:

  • Wenn eine ganze Power Pages-Site in einen iFrame eingebettet ist
    Entfernen Sie den Inhalt Ihrer Kopf- und Fußzeile, indem Sie die entsprechenden Kopf- und Fußzeilen-Webvorlagen aktualisieren.

  • Wenn eine spezifische Seite einer Power Pages-Site in einen iFrame eingebettet ist
    Normalerweise möchten Sie die Kopf- oder Fußzeile der Site nicht anzeigen, wenn Sie eine bestimmte Seite in eine Website einbetten. Sie möchten jedoch, dass Kopf- und Fußzeile weiterhin verfügbar sind, wenn der Benutzer direkt zur Site geht. Sie können dies erreichen, indem Sie Kopf- und Fußzeilen so ändern, dass sie basierend auf dem Seiteninhalt dynamisch gerendert werden.

Bedingungscode in Kopf- und Fußzeilen hinzufügen

Kopf- und Fußzeilen-Webvorlagen unterstützen vollständige liquid Anpassungen, sodass Sie bedingten Code hinzufügen können, um bestimmte Eigenschaften zu rendern.

Der folgende Code zeigt beispielsweise eine Suchleiste in der Kopfzeile an, wenn die Seite etwas anderes als die Suchseite ist.

Wichtig

Da die Kopfzeile ein gemeinsames Element aller Seiten ist, wird page.id standardmäßig für die erste Seite zwischengespeichert, die von einem Benutzer geöffnet wird. Daher verwendet dieser Code die Ersatz-Tag um sicherzustellen, dass diese Elemente nicht zwischengespeichert werden und immer basierend auf der aktuellen Seite ausgewertet werden.

{% 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 %}

Als Alternative zum Hinzufügen von bedingtem Code in Kopf- und Fußzeilen können Sie auch die folgenden Methoden in Betracht ziehen. Wir empfehlen jedoch keinen der beiden Ansätze; Beide haben Einschränkungen und keiner unterstützt die volle Funktionalität.

  • Deaktivieren Sie für schreibgeschützte Szenarien, die keine Listen oder Formulare enthalten, die Kopf- und Fußzeile in Ihrer Vorlage.
  • Verwenden Sie eine spezielle Rewrite-Vorlage (~/Areas/Portal/Pages/Form.aspx).

Siehe auch