Bygg inn et Power Pages-nettsted på et annet nettsted ved hjelp av en iFrame

En av de vanligste måtene å bruke nettbaserte programmer på er å bygge inn nettprogramfunksjonalitet på et annet nettsted. Det andre nettstedet finnes vanligvis allerede, men du ønsker å forbedre det og legge til nye funksjoner som fungerer med dataene som vises via Power Pages-programmet.

I dette scenarioet er det enklere å bygge inn Power Pages-nettstedsfunksjonaliteten i stedet for å bygge den fra grunnen av. Denne artikkelen forklarer fremgangsmåten for å bygge inn et Power Pages-program på et annet nettsted ved hjelp av en iFrame.

Trinn 1. Aktiver nettstedet for iFrame

IFrames er som standard deaktivert i nye Power Pages-nettsteder for å sikre at ingen kan bygge inn nettstedet eksternt for å gjøre forsøk på klikknappingsangrep (clickjacking).

  1. Konfigurer HTTP-svarhodet. Du kan velge direktivet Content-Security-Policy (CSP) frame-ancestors (anbefalt) eller X-Frame-Options.

    Merk

    Content-Security-Policy frame-ancestors har erstattet X-Frame-Options, og er metoden som beskrives i denne artikkelen.

    1. Angi nettstedsinnstillingen for å aktivere HTTP-hodet HTTP/Content-Security-Policy. Mer informasjon: Konfigurere HTTP-hoder i portaler

    2. Følg syntaksen som er beskrevet i CSP: frame-ancestors for å angi verdien.

      Hvis du for eksempel vil aktivere et Power Pages-nettsted som kan bygges inn ved hjelp av en iFrame på nettstedet www.contoso.com, ser innstillingen slik ut:

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

      Merk

      Strengen 'self' er viktig. Uten den kan ikke Power Pages-nettstedet bygge inn sine egne sider, som vanligvis er nødvendig i scenarioer med for eksempel modale hurtigmenyer for standardskjemaer.

      Det er viktig å begrense funksjonen for å bygge inn et Power Pages-nettsted i en iFrame til bestemte nettsteder, i stedet for å bruke jokertegnet (*).

      CSP består av en rekke direktiver der verdiene avhenger av ulike faktorer (for eksempel hvor skriptene lastes inn). Denne artikkelen dekker ikke denne informasjonen, fordi den er spesifikk for en gitt implementasjon. Vi anbefaler likevel at du først tester denne konfigurasjonen på et nettsted som ikke er for produksjon, ser på feilene i nettleserkonsollen for å finne problemer som må løses, og justere innstillingen.

  2. Sett SameSite-standarden til None for Power Pages-nettstedsinformasjonskapsler.

    SameSite-attributtet for informasjonskapsler er nyttig for å beskytte nettstedet mot angrep med forfalskning av forespørsler på tvers av nettsteder (CSRF). Dette betyr imidlertid også at nettstedet ikke kan bygges inn i en iFrame i scenarioer, for eksempel når nettstedet krever brukerautentisering eller inneholder dynamiske komponenter som skjemaer eller lister.

    For å kunne bygge inn Power Pages-nettstedet i en iFrame må du derfor endre attributtet for SameSite-informasjonskapsel for Power Pages-nettstedet til None som standard. Mer informasjon: Endringer i SameSite-modus

    Merk

    Når du merker SameSite-informasjonskapsler som None, blir ikke Power Pages-nettstedet sårbar overfor CSRF-angrep, fordi Power Pages bruker anti-CSRF-tokener til å forhindre disse angrepene.

Trinn 2. Bygg inn Power Pages-nettstedet

Etter at du har fullført forrige trinn, trenger du bare å bygge inn Power Pages-nettstedsopplevelsen på nettstedet ved å bruke HTML-iFrame-koden til å bygge inn hele nettstedet eller bestemte sider etter behov.

Vi anbefaler at Power Pages-domenenavnet er likestilt eller underordnet domenenavnet for nettstedet der du bygger inn nettstedet i en iFrame. Hvis rotnettstedet for eksempel er www.contoso.com, må Power Pages-nettstedsdomenenavnet være portal.contoso.com. Dette er viktig for å sikre at informasjonskapslene som brukes av Power Pages-nettstedet, ikke klassifiseres som informasjonskapsler fra tredjeparter og blokkeres av nettleseren (blogg). Ellers kan det hende at funksjonalitet som Captcha og omadressering av standardskjemaer og flertrinnsskjemaer ikke fungerer som den skal. Du kan konfigurere et egendefinert domenenavn på Power Pages-nettstedet, ved å gå til Legge til et egendefinert domenenavn.

Trinn 3. Håndtere topp- og bunntekst

Du kan endre hvordan topp- og bunntekst skal vises, eller om de skal vises i det hele tatt, på innebygde Power Pages-nettstedssider.

Unngå at den innebygde topp- og bunnteksten for nettstedet vises

Det er vanlig at det allerede finnes topp- og bunntekst på det overordnede nettstedet der du vil bygge inn et Power Pages-nettsted. I slike situasjoner vil du kanskje ikke vise topp- og bunnteksten for det innebygde nettstedet. Tenk deg følgende scenarioer:

  • Når et helt Power Pages-nettsted er innebygd i en iFrame
    Fjern innholdet i topp- og bunnteksten ved å oppdatere de respektive nettmalene for topp- og bunntekst.

  • Når en bestemt Power Pages-nettstedsside er innebygd i en iFrame
    Du ønsker vanligvis ikke å vise topp- eller bunnteksten for nettstedet når du bygger inn en bestemt side på et nettsted. Du ønsker imidlertid at topp- og bunnteksten skal være tilgjengelig når brukeren går direkte til nettstedet. Du kan oppnå dette ved å endre topp- og bunnteksten slik at den gjengis dynamisk basert på sideinnhold.

Legge til betinget kode i topp- og bunntekst

Nettmaler for topptekst og bunntekst støtter full tilpassing av liquid, slik at du kan legge til betinget kode for å gjengi visse egenskaper.

Koden nedenfor viser for eksempel et søkefelt i toppteksten hvis siden er noe annet enn en søkeside.

Viktig

Siden toppteksten er et element som er felles for alle sider, blir page.id hurtigbufret som standard for den første siden som åpnes av en bruker. Denne koden bruker derfor erstatningskoden for å sikre at disse elementene ikke hurtigbufres, og at de alltid evalueres basert på gjeldende 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 å legge til betinget kode i topp- og bunntekst kan du også vurdere følgende metoder: Vi anbefaler imidlertid ikke noen av disse metodene. Begge har begrensninger, og ingen av dem støtter alle funksjoner.

  • Når det gjelder scenarioer som ikke omfatter noen lister eller skjemaer, deaktiverer du topp- og bunntekst i malen.
  • Bruk en spesiell mal for omskriving (~/Areas/Portal/Pages/Form.aspx).

Se også

  • Last updated on