Power Pages -sivuston upottaminen toiseen sivustoon iframen avulla

Yksi yleisimmistä verkkopohjaisten sovellusten käyttötavoista on upottaa verkkosovellus toiseen sivustoon. Yleensä kyse on aiemmin luodun sivuston ominaisuuksien parantamisesta ja sellaisten uusien toimintojen lisäämisestä, joilla voidaan käyttää Power Pages -sovelluksessa esiinnousseita tietoja.

Tässä skenaariossa on yksinkertaisempaa upottaa Power Pages -sivuston toiminto kuin luoda se alusta alkaen. Tässä artikkelissa käsitellään Power Pages -sovelluksen toiseen sivustoon iframen avulla tapahtuvan upottamisen vaiheet.

Vaihe 1. Iframen ottaminen käyttöön sivustossa

Iframet on poistettu uusissa Power Pages -sivustoissa oletusarvoisesti käytöstä, sillä näin voidaan varmistaa, ettei kukaan voi upottaa verkkosovellusta ulkoisesti ja yrittää tällä tavoin klikkauskaappaushyökkäyksiä.

  1. Määritä vastauksen HTTP-otsikko. Valittavana on joko Content-Security-Policy (CSP) frame-ancestors -direktiivi (suositus) tai X-Frame-Options.

    Muistiinpano

    Content-Security-Policy frame-ancestors on korvannut X-Frame-Option-menetelmän, ja tätä korvaavaa menetelmää käsitellään tässä artikkelissa.

    1. Määritä sivustoasetus sallimaan HTTP-otsikko HTTP/Content-Security-Policy. Lisätietoja: HTTP-otsikoiden määrittäminen portaaleissa

    2. Määritä kohdassa CSP: frame-ancestors kuvattu syntaksi määrittämään arvo.

      Esimerkki asetuksesta, jolla upotettava Power Pages -sivusto otetaan käyttöön käyttämällä iframea sivustossa www.contoso.com:

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

      Muistiinpano

      'self'-merkkijono on tärkeä, sillä ilman sitä Power Pages -sivusto ei voi upottaa omia sivujaan, mikä on yleisesti pakollista skenaarioissa, kuten peruslomakkeiden modaalisissa ponnahdusvalikoissa.

      Power Pages -sivuston upotusmahdollisuus iframeen on tärkeää rajoittaa tiettyihin sivustoihin sen sijaan, että käytettäisiin yleismerkkiä (*).

      CSP koostuu useista direktiiveistä, joiden arvo määräytyy monien tekijöiden (kuten komentosarjan latauspaikan) mukaan. Tässä artikkeleissa ei käsitellä näitä tietoja, koska ne määräytyvät toteutuskohtaisesti. On kuitenkin suositeltavaa testata tämä määritys muussa kuin tuotantosivustossa, selvittää korjattavat ongelman selaimen konsolivirheiden avulla ja muokata asetusta.

  2. Määritä Power Pages -sivuston evästeiden SameSite-oletusarvoksi Ei mitään.

    Evästeiden SameSite-määrite on kätevä tapa suojata sivusto CSRF (jaetun julkaisuoikeuspyynnön väärentäminen) -hyökkäyksiltä. Tämä kuitenkin tarkoittaa myös sitä, että sivustoa ei upottaa iframeen esimerkiksi sellaisissa skenaarioissa, joissa sivusto edellyttää käyttäjän todennusta tai sisältää lomakkeiden tai luetteloiden kaltaisia dynaamisia osia.

    Niinpä Power Pages -sivuston upottaminen iframeen edellyttää, että Power Pages -sivuston SameSite-evästemääritteen oletukseksi on vaihdettava Ei mitään. Lisätietoja: SameSite-tilamuutokset

    Muistiinpano

    SameSite-evästeiden Ei mitään -merkintä ei altista Power Pages -sivustoa CSRF-hyökkäyksille, koska Power Pages käyttää CSRF-hyökkäyksiä estäviä tunnuksia.

Vaihe 2. Upota Power Pages -sivuston tyyli

Edellisen suorittamisen jälkeen Power Pages -sivustojen kokemuksen upottamiseen sivustoon tarvitaan vain HTML-iframe-tunniste, jolla upotetaan tarpeen mukaan koko sivusto tai tietyt sivut.

Power Pagesin toimialueen nimen kannattaa olla sen sivuston rinnakkais- tai alitason toimialuenimi, johon sivusto upotetaan iframessa. Jos pääsivusto on esimerkiksi www.contoso.com, Power Pages -sivuston toimialueen nimen on oltava portal.contoso.com. Tämä on tärkeää, sillä näin voidaan varmistaa, että Power Pages -sivuston käyttämiä evästeitä ei luokitella kolmannen osapuolen evästeiksi eikä selain estä niitä (blogi). Muussa tapauksessa esimerkiksi Captcha-toiminto sekä peruslomakkeen ja monivaiheisen lomakkeen uudelleenohjaus ei ehkä toimi oikein. Lisätietoja mukautetun toimialuenimen määrittämisestä Power Pages -sivustossa on kohdassa Mukautetun toimialuenimen lisääminen.

Vaihe 3. Otsikoiden ja alatunnisteiden käsitteleminen

Otsikoiden ja alatunnisteiden näkymistä upotetuilla Power Pages -sivuston sivulle tai sitä, näkyvätkö ne lainkaan, voidaan muokata.

Upotetun sivuston otsikon ja alatunnisteiden näkymisen estäminen

On yleistä, että pääsivustossa, johon Power Pages -sivusto halutaan upottaa, on jo otsikoita ja alatunnisteita. Siinä tapauksessa upotetun sivuston otsikkoa ja alatunnistetta ei ehkä haluta näyttää. Esimerkkiskenaariot:

  • Kun koko Power Pages -sivusto on upotettu iFrameen
    Poista otsikon ja alatunnisteen sisältöä päivittämällä kyseisen otsikon ja alatunnisteen verkkomallit.

  • Kun tietty Power Pages -sivuston sivu on upotettu iFrameen
    Sivuston otsikko ja alatunnistetta ei yleensä haluta näyttää, kun tietty sivu upotetaan sivustoon. Otsikkoa ja alatunnistetta halutaan kuitenkin käyttää, kun käyttäjä siirtyy suoraan sivustoon. Se on mahdollista muokkaamalla otsikot ja alatunnisteet hahmontumaan dynaamisesti sivun sisällön perusteella.

Ehdollisen koodin lisääminen otsikkoon ja alatunnisteeseen

Otsikon ja alatunnisteen verkkomallit tukevat täydellisiä liquid-mukauttamisia, joten tietyt ominaisuudet voidaan hahmontaa lisäämällä ehdollista koodia.

Esimerkiksi seuraava koodi näyttää hakupalkin otsikossa, jos sivu on jokin muu kuin hakusivu.

Tärkeä

Koska otsikko on kaikille sivuille yhteinen elementti, välimuistiin tallennetaan oletusarvoisesti käyttäjän ensimmäisenä avaaman sivun page.id. Tämän vuoksi koodi käyttää korvaustunnistetta varmistamaan, että kyseisiä elementtejä ei tallenneta välimuistiin ja että ne arvioidaan aina nykyisen sivun perusteella.

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

Vaihtoehtona ehdollisen koodin lisäämiselle otsikkoon ja alatunnisteeseen voi harkita myös seuraavia menetelmiä. Kummankaan menetelmän käyttöä ei kuitenkaan suositella, sillä molemmissa on rajoituksia eikä kumpikaan tue kaikkia toimintoja.

  • Jos kyse on vain luku -skenaarioista, joissa ei ole käytössä luetteloita eikä lomakkeita, poista mallin otsikko ja alatunniste käytöstä.
  • Käytä erityistä uudelleenkirjoitusmallia (~/Areas/Portal/Pages/Form.aspx).

Katso myös

  • Last updated on