Integrere en portal på et andet websted ved hjælp af en iFrame

  • Artikel
  • 4 minutter til læsning

En af de mest almindelige måder at bruge portalprogrammer på er at integrere portalfunktionalitet på et andet websted. Det andet websted findes som regel allerede, men du ønsker at forbedre webstedets egenskaber og tilføje nye funktioner, der fungerer med de data, der vises via portalprogrammet.

I dette scenarie er det nemmere at integrere portalfunktionaliteten frem for at bygge den fra bunden. I denne artikel forklares trinnene til integrering af et portalprogram på et andet websted ved hjælp af en iFrame.

Trin 1. Aktivere portalen til iFrame

IFrames er som standard deaktiveret på nye portaler for at sikre, at ingen kan integrere dit portalprogram eksternt for at forsøge at udføre "clickrudening"-angreb.

  1. Konfigurer HTTP-svaroverskriften. Du kan enten vælge mappen Content-Security-Policy (CSP) frame-ancestors (anbefales) eller X-Frame-Options.

    Bemærk

    Content-Security-Policy frame-ancestors har tilsidesat X-Frame-Options og er den metode, der beskrives i denne artikel.

    1. Angiv webstedsindstillingen for at aktivere HTTP-overskriften HTTP/Content-Security-Policy. Flere oplysninger: Konfigurere HTTP-overskrifter på portaler

    2. Anvend den syntaks, der er beskrevet i CSP: frame-ancestors, for at angive værdien.

      Hvis du for eksempel vil aktivere en portal, der kan integreres ved hjælp af en iFrame på webstedet www.contoso.com, ser indstillingen sådan ud:

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

      Bemærk

      Strengen 'self' er vigtig. Uden den kan portalen ikke integrere sine egne sider, hvilket som regel er påkrævet i scenarier som modale pop op-menuer til basisformularer.

      Det er vigtigt at begrænse muligheden for at integrere en portal i en iFrame på bestemte websteder frem for at bruge jokertegnet (*).

      CSP består af mange direktiver, hvis værdier afhænger af forskellige faktorer (for eksempel hvor scripts indlæses fra). Denne artikel dækker ikke disse oplysninger, fordi de er specifikke for de enkelte implementeringer. Det anbefales dog, at du først tester denne installation på en portal, der ikke er i produktion, ser på fejl i browserkonsollen for at identificere problemer, du skal løse, og justerer indstillingen.

  2. Angiv standarden SameSite til Ingen for portalcookies.

    SameSite-attributten for cookies er nyttig for at sikre webstedet mod CSRF-angreb (forfalskning af anmodning på tværs af websteder). Det betyder dog også, at webstedet ikke kan integreres i en iFrame i scenarier, som når webstedet kræver brugergodkendelse eller indeholder dynamiske komponenter som formularer eller lister.

    Så hvis du vil integrere portalen i en iFrame, skal du som standard ændre cookieattributten SameSite for din portal til Ingen. Flere oplysninger: Ændringer i tilstanden SameSite

    Bemærk

    Hvis du markerer SameSite-cookies som Ingen, bliver din portal ikke sårbar over for CSRF-angreb, da portalplatformen bruger anti-CSRF-tokens til at forhindre disse angreb.

Trin 2. Integrere din portal

Når du har fuldført forrige trin, skal du blot integrere portaloplevelsen på dit websted ved at bruge HTML iFrame-koden til at integrere hele webstedet eller bestemte sider efter behov.

Det anbefales, at portalens domænenavn er ligestillet eller underordnet i forhold til domænenavnet for det websted, hvor du integrerer portalen i en iFrame. Hvis for eksempel rodwebstedet er www.contoso.com, skal portalens domænenavn være portal.contoso.com. Dette er vigtigt for at sikre, at de cookies, der bruges af portalen, ikke klassificeres som tredjepartscookies og blokeres af browseren (blog). Ellers virker funktioner som Captcha og omdirigering af basis/avancerede formularer måske ikke korrekt. Hvis du vil konfigurere et brugerdefineret domænenavn på portalen, skal du gå til Tilføje et brugerdefineret domænenavn.

Trin 3. Håndtere sidehoveder og sidefødder

Du kan ændre, hvordan sidehoveder og sidefødder vises – eller om de overhovedet skal vises – på integrerede portalsider.

Undgå, at de integrerede portalhoveder og -fødder vises

Det er almindeligt, at det overordnede websted, hvor du vil integrere en portal, allerede har sidehoveder og sidefødder. I sådanne situationer vil du måske ikke have vist sidehovedet og sidefoden på den integrerede portal. Overvej følgende scenarier:

  • Når en hel portal er integreret i en iFrame
    Fjern indholdet af sidehovedet og sidefoden ved at opdatere de respektive webskabeloner til sidehoved og sidefod.

  • Når en specifik portalside integreres i en iFrame
    Portalsidehovedet eller -sidefoden skal som regel ikke vises, når du integrerer en specifik side på et websted. Du ønsker dog stadig, at sidehovedet og sidefoden er tilgængelig, når brugeren går direkte til portalen. Det kan du gøre ved at ændre sidehoved og sidefod, så de gengives dynamisk på baggrund af sideindhold.

Tilføje betinget kode i sidehoved og sidefod

Webskabeloner til sidehoved og sidefod understøtter komplette Liquid-tilpasninger, så du kan tilføje betinget kode for at få vist bestemte egenskaber.

I følgende kode vises for eksempel et søgepanel i sidehovedet, hvis siden er alt andet end søgesiden.

Vigtigt

Da sidehovedet er et element, der er fælles for alle sider, cachelagres page.id som standard for den første side, der åbnes af en bruger. Koden bruger derfor erstatningsmærket til at sikre, at disse elementer ikke cachelagres og altid evalueres på baggrund af den aktuelle side.

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

Som et alternativ til at tilføje betinget kode i sidehoved og sidefod kan du også overveje følgende metoder. Vi anbefaler dog ikke disse tilgange. De har begge begrænsninger, og ingen af dem understøtter fuld funktionalitet.

  • I skrivebeskyttede scenarier, der ikke omfatter lister eller formularer, skal du deaktivere sidehoved og sidefod fra skabelonen.
  • Brug en særlig omskrivningsskabelon (~/Areas/Portal/Pages/Form.aspx).

Se også

Konfigurer webstedsindstillinger for portaler
Skabelonmærke for erstatning
Aktivér outputcachelagring for sidehoved og sidefod på en portal
Tilstanden SameSite
Konfigurere HTTP-overskrifter på portaler