Incrustar un lloc del Power Pages en un altre lloc web mitjançant un iframe

Una de les maneres més habituals d'utilitzar les aplicacions basades en web és incrustar la funcionalitat web dins d'un altre lloc web. Normalment, l'altre lloc web ja existeix, però voleu millorar les seves aptituds i afegir noves funcions que treballin amb les dades que es mostren a través de l'aplicació del Power Pages.

En aquest cas, és més fàcil incrustar la funcionalitat del lloc del Power Pages en comptes de crear-la des de zero. En aquest article s'expliquen els passos per incrustar una aplicació del Power Pages en un lloc web diferent mitjançant un iframe.

Pas 1. Habilitar el lloc per a l'iframe

Els iframes estan inhabilitats per defecte als nous llocs del Power Pages per garantir que ningú no pugui incrustar el lloc web externament per intentar atacs de "segrest de clics".

  1. Configurar la capçalera de resposta HTTP. Podeu triar la directiva Content-Security-Policy (CSP) frame-ancestors o X-Frame-Options.

    Nota

    Content-Security-Policy-frame-ancestors ha supervisat X-Frame-Options i és el mètode que es descriu en aquest article.

    1. Definiu el valor de lloc per habilitar la capçalera HTTP HTTP/Content-Security-Policy. Més informació: Configurar les capçaleres HTTP en portals

    2. Seguiu la sintaxi descrita a CSP: frame-ancestors per definir el valor.

      Per exemple, per habilitar un lloc del Power Pages que es pot incrustar mitjançant un iframe al lloc web www.contoso.com, la configuració tindrà l'aspecte següent:

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

      Nota

      La cadena 'self' és important; sense ella, el lloc del Power Pages no podrà incrustar les seves pròpies pàgines, que normalment és necessari en escenaris com ara els menús emergents modals per a formularis bàsics.

      És important limitar la capacitat d'incrustar un lloc del Power Pages en un iframe en llocs concrets, en comptes d'utilitzar el caràcter asterisc (*).

      El CSP consta de diverses directives, els valors de les quals depenen de diversos factors (com ara el lloc on es carreguen els scripts). En aquest article no es cobreix aquesta informació, ja que és específica d'implementació. Tanmateix, us recomanem que primer proveu aquesta configuració en un lloc que no sigui de producció, mireu els errors de la consola del navegador per identificar els problemes que heu de corregir i ajusteu la configuració.

  2. Establiu el valor per defecte SameSite en Cap per a les galetes del lloc del Power Pages.

    ,L'atribut SameSite per a les galetes és útil per assegurar el lloc contra els atacs de falsificació de sol·licitud entre llocs (CSRF). Això també vol dir que el lloc no es pot incrustar en un iframe en escenaris com ara quan el lloc requereix l'autenticació d'usuari o conté components dinàmics, com ara formularis o llistes.

    Per tant, per incrustar el lloc del Power Pages en un iframe, heu de canviar l'atribut de galeta SameSite per al lloc del Power Pages en Cap per defecte. Més informació: Canvis en el mode SameSite

    Nota

    Marcar les galetes SameSite com a Cap no fa que el vostre lloc del Power Pages sigui vulnerable als atacs CSRF, ja que el Power Pages utilitza testimonis anti-CSRF per evitar aquests atacs.

Pas 2. Incrustar el lloc del Power Pages

Un cop hàgiu completat el pas anterior, tot el que heu de fer per incrustar l'experiència del lloc del Power Pages al lloc web és utilitzar l'etiqueta HTML iframe per incrustar tot el lloc o pàgines específiques, segons calgui.

Es recomana que el nom del domini del Power Pages sigui un element del mateix nivell o d'un nivell secundari del nom de lloc on esteu incrustant el lloc en un iframe. Per exemple, si el vostre lloc web arrel és www.contoso.com, el nom de domini del lloc del Power Pages hauria de ser portal.contoso.com. Això és important per garantir que les galetes utilitzades pel lloc del Power Pages no es classificaran com a galetes de tercers ni el navegador les bloquejarà (blog). Altrament, la funcionalitat, com ara Captcha i la redirecció de formularis bàsics i de diversos passos pot ser que no funcioni correctament. Per configurar un nom de domini personalitzat al lloc del Power Pages, aneu a Afegir un nom de domini personalitzat.

Pas 3. Gestionar capçaleres i peus de pàgina

Podeu modificar la manera com apareixen les capçaleres i els peus de pàgina (o si apareixen o no) a les pàgines del lloc del Power Pages incrustades.

Evitar que es mostrin les capçaleres i els peus de pàgina incrustats del lloc

És habitual que el lloc principal on voleu incrustar un lloc del Power Pages ja tingui capçaleres i peus de pàgina. En aquestes situacions, pot ser que no vulgueu mostrar la capçalera i el peu de pàgina incrustats del lloc. Tingueu en compte les situacions següents:

  • Quan un lloc sencer Power Pages està incrustat en un iframe
    Per suprimir el contingut de la capçalera i el peu de pàgina, actualieu les plantilles web de capçaleres i de peu de pàgina respectives.

  • Quan una pàgina del lloc web específica Power Pages està incrustada en un iframe
    Normalment, no voleu que es mostri la capçalera o el peu de pàgina del lloc quan incrusteu una pàgina específica en un lloc web. Tanmateix, voleu que la capçalera i el peu de pàgina estiguin disponibles quan l'usuari vagi directament al lloc. Per aconseguir-ho, podeu modificar les capçaleres i els peus de pàgina per representar-les de manera dinàmica en funció del contingut de la pàgina.

Afegir codi condicional a les capçaleres i els peus de pàgina

Les plantilles web de capçaleres i peus de pàgina admeten personalitzacions líquides completes, de manera que podeu afegir un codi condicional per representar determinades propietats.

Per exemple, el codi següent mostra una barra de cerca a la capçalera si la pàgina no és la pàgina de cerca.

Important

Com que la capçalera és un element comú per a totes les pàgines, page.ides desarà per defecte a la primera pàgina que l'usuari ha obert. Per tant, aquest codi utilitza l'etiqueta de substitució per garantir que aquests elements no es desin a la memòria cau i sempre s'avaluïn segons la pàgina actual.

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

Com a alternativa a l'addició de codi condicional a les capçaleres i els peus de pàgina, també podeu tenir en compte els mètodes següents. Tanmateix, no us recomanem cap mètode; tos dos tenen limitacions i no admeten la funcionalitat completa.

  • Per als escenaris només de lectura que no incloguin llistes ni formularis, inhabiliteu la capçalera i el peu de pàgina de la plantilla.
  • Utilitzeu una plantilla de reescriure especial (~/Areas/Portal/Pages/Form.aspx).

Consulteu també

  • Last updated on