Een Power Pages-site insluiten in een andere website met behulp van een iframe

Een van de meest gebruikelijke manieren om webtoepassingen te gebruiken, is door functionaliteit voor webtoepassingen in een andere website in te sluiten. Meestal bestaat de andere website al, maar u wilt de mogelijkheden ervan uitbreiden en nieuwe functies toevoegen die werken met uw gegevens die via de Power Pages-toepassing worden opgevraagd.

In dit scenario is het gemakkelijker om uw functionaliteit voor Power Pages-sites in te sluiten in plaats van deze helemaal opnieuw te bouwen. In dit artikel worden de stappen uitgelegd om een Power Pages-toepassing in een andere website in te sluiten met behulp van een iframe.

Stap 1. De site voor iframe inschakelen

Iframes zijn standaard uitgeschakeld op nieuwe Power Pages-sites, om ervoor te zorgen dat niemand uw website extern kan insluiten om "clickjacking"-aanvallen te proberen.

  1. Stel de HTTP-respons koptekst in. U kunt kiezen uit de Inhoud-Beveiliging-Beleid (CSP) frame-voorouders richtlijn (aanbevolen) of X-Frame-opties.

    Notitie

    Content-Security-Policy frame-ancestors heeft X-Frame-Options vervangen en is de methode die in dit artikel wordt beschreven.

    1. Stel de site-instelling in om de HTTP-koptekst in te schakelen HTTP/Inhoud-Beveiliging-Beleid. Meer informatie: De HTTP-koptekst in portals instellen

    2. Volg de syntaxis zoals beschreven in CSP: frame-voorouders om de waarde in te stellen.

      Bijvoorbeeld om een Power Pages-site in te schakelen die kan worden ingesloten door een iframe in de website www.contoso.com te gebruiken, ziet de instelling er als volgt uit:

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

      Notitie

      De tekenreeks 'self' is belangrijk; zonder dit kan de Power Pages-site zijn eigen pagina's niet insluiten, wat vaak nodig is in scenario's zoals modale pop-upmenu's voor basisformulieren.

      Het is belangrijk om de mogelijkheid om een Power Pages-site in een iframe in te sluiten te beperken tot specifieke sites, in plaats van het jokerteken te gebruiken (*).

      CSP bestaat uit talrijke richtlijnen waarvan de waarden afhankelijk zijn van verschillende factoren (zoals waar de scripts worden geladen). Dit artikel behandelt die informatie niet omdat het implementatiespecifiek is. We raden u echter aan deze installatie eerst te testen op een niet-productiesite, de fouten in de browserconsole te bekijken om problemen te identificeren die u moet oplossen en de instelling aan te passen.

  2. Stel de standaard SameSite in op Geen voor Power Pages-sitecookies.

    De SameSite-kenmerk for cookies is handig om de site te beveiligen tegen cross-site request forgery (CSRF)-aanvallen. Dit betekent echter ook dat de site niet kan worden ingesloten in een iframe in scenario's zoals wanneer de site gebruikersverificatie vereist of dynamische componenten zoals formulieren of lijsten bevat.

    Om de Power Pages-site in een iframe in te sluiten, moet u daarom het SameSite-cookiekenmerk voor uw Power Pages-site standaard wijzigen in Geen. Meer informatie: SameSite-modus verandert

    Notitie

    SameSite-cookies markeren als Geen maakt uw Power Pages-site niet kwetsbaar voor CSRF-aanvallen, omdat Power Pages anti-CSRF-tokens gebruikt om deze aanvallen te voorkomen.

Stap 2. Uw Power Pages-site insluiten

Nadat u de vorige stap hebt voltooid, hoeft u slechts de HTML iframe-tag te gebruiken om de hele site of specifieke pagina's in te sluiten, zoals vereist om de Power Pages-site-ervaring in uw website in te sluiten.

We raden aan een Power Pages-domeinnaam te kiezen op hetzelfde niveau of onderliggend niveau van de domeinnaam van de site waar u de site insluit in een iframe. Als uw hoofdwebsite bijvoorbeeld www.contoso.com, is, moet de domeinnaam van de Power Pages-site portal.contoso.com zijn. Dit is belangrijk om ervoor te zorgen dat de cookies die door de Power Pages-site worden gebruikt, niet worden geclassificeerd als cookies van derden en worden geblokkeerd door de browser (blog). Anders werken functionaliteiten zoals Captcha en omleiding voor basisformulieren/formulieren voor meerdere stappen mogelijk niet goed. Om een aangepaste domeinnaam op uw Power Pages-site in te stellen, gaat u naar Een aangepaste domeinnaam toevoegen.

Stap 3. Behandelen kop- en voetteksten

U kunt wijzigen hoe kop- en voetteksten worden weergegeven, en of ze überhaupt worden weergegeven, op ingesloten Power Pages-sitepagina's.

Voorkom dat de ingesloten kop- en voetteksten van de site worden weergegeven

Het is gebruikelijk dat de bovenliggende site waar u een Power Pages-site wilt insluiten, al kop- en voetteksten heeft. In dergelijke situaties wilt u wellicht de kop- en voettekst van de ingesloten site niet weergeven. Bekijk de volgende scenario's:

  • Wanneer een hele Power Pages-site is ingesloten in een iFrame
    Verwijder de inhoud van uw kop- en voettekst door de respectieve websjablonen voor kop- en voetteksten bij te werken.

  • Wanneer een specifieke Power Pages-sitepagina is ingesloten in een iFrame
    Meestal wilt u de kop- of voettekst van de site niet weergeven wanneer u een specifieke pagina in een website insluit. U wilt echter nog steeds dat de kop- en voettekst beschikbaar zijn wanneer de gebruiker rechtstreeks naar de site gaat. U kunt dit bereiken door kop- en voetteksten aan te passen om dynamisch te worden weergegeven op basis van pagina-inhoud.

Voorwaardelijke code toevoegen in kop- en voetteksten

Websjablonen voor kop- en voetteksten ondersteunen volledige vloeibare aanpassingen, dus u kunt voorwaardelijke code toevoegen om bepaalde eigenschappen weer te geven.

De volgende code geeft bijvoorbeeld een zoekbalk in de kop weer als de pagina iets anders is dan de zoekpagina.

Belangrijk

Omdat de header een gemeenschappelijk element is voor alle pagina's, page.id wordt standaard in de cache opgeslagen voor de eerste pagina die door een gebruiker wordt geopend. Daarom gebruikt deze code de vervangingstag om ervoor te zorgen dat deze elementen niet in de cache worden opgeslagen en altijd worden geëvalueerd op basis van de huidige pagina.

{% 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 alternatief voor het toevoegen van voorwaardelijke code in kop- en voetteksten, kunt u ook de volgende methoden overwegen. We raden echter geen van beide benaderingen aan; ze hebben allebei beperkingen en geen van beide ondersteunt volledige functionaliteit.

  • Voor alleen-lezen scenario's die geen lijsten of formulieren bevatten, schakelt u kop- en voettekst van uw sjabloon uit.
  • Gebruik een speciaal herschrijfsjabloon (~/Areas/Portal/Pages/Form.aspx).

Zie ook

  • Last updated on