Integrere et Power Pages-websted på et andet websted ved hjælp af en iFrame

En af de mest almindelige måder at bruge webstedsbaserede programmer på er at integrere webprogrammfunktionalitet 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 Power Pages-programmet.

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

Trin 1. Aktivere websted til iFrame

IFrames er som standard deaktiveret på nye Power Pages-websteder for at sikre, at ingen kan integrere dit websted eksternt for at forsøge at udføre "clickjacking"-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 et Power Pages-websted, 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 Power Pages-webstedet 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 et Power Pages-websted 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å et websted, 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 Power Pages-webstedscookies.

    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 Power Pages-webstedet i en iFrame, skal du som standard ændre cookieattributten SameSite for dit Power Pages-websted til Ingen. Flere oplysninger: Ændringer i tilstanden SameSite

    Bemærk

    Hvis du markerer SameSite-cookies som Ingen, bliver dit Power Pages-websted ikke sårbar over for CSRF-angreb, da Power Pages bruger anti-CSRF-tokens til at forhindre disse angreb.

Trin 2. Formatere dit Power Pages-websted

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

Det anbefales, at Power Pages-domænenavn er ligestillet eller underordnet i forhold til domænenavnet for det websted, hvor du integrerer webstedet i en iFrame. Hvis for eksempel rodwebstedet er www.contoso.com, skal Power Pages-webstedets domænenavn være portal.contoso.com. Dette er vigtigt for at sikre, at de cookies, der bruges af Power Pages-webstgedet, ikke klassificeres som tredjepartscookies og blokeres af browseren (blog). Ellers virker funktioner som Captcha og omdirigering af basis/formular med flere trin måske ikke korrekt. Hvis du vil konfigurere et brugerdefineret domænenavn på Power Pages-webstedet, 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 Power Pages-webstedssider.

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

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

  • Når et helt Power Pages-websted 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 Power Pages-webstedsside integreres i en iFrame
    Webstedssidehovedet 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 webstedet. 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å

  • Last updated on