Een portal insluiten in een andere website met behulp van een iframe

  • Artikel
  • 5 minuten om te lezen

Een van de meest gebruikelijke manieren om portaltoepassingen te gebruiken, is door portalfunctionaliteit 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 portaltoepassing worden opgevraagd.

In dit scenario is het gemakkelijker om uw portalfunctionaliteit in te sluiten in plaats van deze helemaal opnieuw te bouwen. In dit artikel worden de stappen uitgelegd om een portaltoepassing in een andere website in te sluiten met behulp van een iframe.

Stap 1. De portal voor iframe inschakelen

Iframes zijn standaard uitgeschakeld op nieuwe portals, om ervoor te zorgen dat niemand uw portaltoepassing extern kan insluiten om "clickjacking"-aanvallente 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 portal 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 'self' tekenreeks is belangrijk; zonder dit kan de portal 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 portal 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-productieportal, de fouten in de browserconsole te bekijken om problemen te identificeren die u moet oplossen en de instelling aan te passen.

  2. Stel de ZelfdeSite standaard op Geen voor portalcookies.

    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 portal in een iframe in te sluiten, moet u daarom het SameSite-cookiekenmerk voor uw portal wijzigen in: Geen standaard. Meer informatie: SameSite-modus verandert

    Notitie

    SameSite-cookies markeren als Geen maakt uw portal niet kwetsbaar voor CSRF-aanvallen, omdat het portalplatform anti-CSRF-tokens gebruikt om deze aanvallen te voorkomen.

Stap 2. Uw portal 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 portalervaring in uw website in te sluiten.

We raden aan dat de portaldomeinnaam een broer of zus is van de domeinnaam van de site waar u de portal insluit in een iframe. Als uw rootwebsite bijvoorbeeld www.contoso.com is, moet de portaaldomeinnaam portal.contoso.com zijn. Dit is belangrijk om ervoor te zorgen dat de cookies die door de portal worden gebruikt, niet worden geclassificeerd als: cookies van derden en worden geblokkeerd door de browser (blog). Anders werken functionaliteiten zoals Captcha en basis/geavanceerde formulieromleiding mogelijk niet goed. Om een aangepaste domeinnaam op uw portal in te stellen, gaat u naar Voeg een aangepaste domeinnaam toe.

Stap 3. Behandelen kop- en voetteksten

U kunt wijzigen hoe kop- en voetteksten worden weergegeven—of ze überhaupt verschijnen—op ingesloten portaalpagina's.

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

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

  • Wanneer een hele portal 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 portalpagina is ingesloten in een iframe
    Meestal wilt u de kop- of voettekst van de portal 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 portal 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

Site-instellingen configureren voor portals
Vervanging Sjablooncode
Uitvoer in cache voor kop- en voettekst in een portal inschakelen
SameSite-modus
De HTTP-koptekst instellen in portals