Compartir por

Inserir un sitio de Power Pages noutro sitio web usando un iframe

Unha das formas máis comúns de usar aplicacións baseadas na web é incorporar a funcionalidade da aplicación web a outro sitio web. Normalmente o outro sitio web xa existe, pero desexa mellorar as súas habilidades e engadir novas funcións que funcionan cos seus datos extraídos a través da aplicación de Power Pages.

Neste escenario, é máis fácil incorporar a funcionalidade do sitio de Power Pages en vez de construílo desde cero. Este artigo explica os pasos para incrustar unha aplicación de Power Pages noutro sitio web usando un iframe.

Paso 1. Habilitar o sitio para iframe

Os iframes están desactivados por defecto en novos sitios de Power Pages para garantir que ninguén poida incorporar o seu sitio web externamente para intentar realizar ataques de "secuestro de clics" (clickjacking).

  1. Defina a cabeceira de resposta HTTP. Pode escoller a directiva de predecesores de marcos da política de seguridade de contido (CSP) (recomendada) ou Opcións de X-Frame.

    Nota

    Os predecesores de marcos da política de seguridade de contido substituíron as opcións de X-Frame e son o método descrito neste artigo.

    1. Estableza a configuración do sitio para habilitar a cabeceira HTTP HTTP/Política de seguridade de contido. Máis información: Configuración de cabeceiras HTTP en portais

    2. Siga a sintaxe descrita en CSP: predecesores de marcos para establecer o valor.

      Por exemplo, para habilitar un sitio de Power Pages que se pode inserir usando un iframe no sitio web www.contoso.com, a configuración terá o seguinte aspecto:

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

      Nota

      A cadea 'self' é importante; sen ela, o sitio de Power Pages non poderá incorporar as súas propias páxinas, o cal normalmente se require en escenarios como os menús emerxentes modais para formularios básicos.

      É importante limitar a posibilidade de incorporar un sitio de Power Pages nun iframe a sitios específicos, en lugar de usar o carácter comodín (*).

      CSP consta de numerosas directivas cuxos valores dependen de varios factores (como desde onde se cargan os scripts). Este artigo non trata esa información porque é específica da implementación. Non obstante, recomendámoslle que primeiro probe esta configuración nun sitio que non sexa de produción, que observe os erros da consola do navegador para identificar os problemas que debe corrixir e axuste a configuración.

  2. Configure o valor predeterminado SameSite en Ningunha para as cookies do sitio de Power Pages.

    O atributo SameSite das cookies é útil para protexer o sitio contra os ataques de falsificación de solicitudes entre sitios (CSRF). Non obstante, isto tamén significa que o sitio non se pode inserir nun iframe en situacións como cando o sitio require autenticación de usuario ou contén compoñentes dinámicos como formularios ou listas.

    Polo tanto, para incorporar o sitio de Power Pages nun iframe, debe cambiar o atributo de cookie SameSite do seu sitio de Power Pages a Ningunha por defecto. Máis información: Cambios de modo SameSite

    Nota

    Marcar as cookies de SameSite como Ningunha non fai que o seu sitio de Power Pages sexa vulnerable aos ataques de CSRF, porque Power Pages usa tokens anti-CSRF para evitar estes ataques.

Paso 2. Inserir o seu sitio de Power Pages

Despois de completar o paso anterior, todo o que cómpre facer para incorporar a experiencia do sitio de Power Pages no seu sitio web é usar a Etiqueta de iframe HTML para incorporar todo o sitio ou páxinas específicas, segundo sexa necesario.

Recomendamos que o nome de dominio de Power Pages sexa un elemento secundario do nome de dominio do sitio no que está a inserir o sitio nun iframe. Por exemplo, se o seu sitio web raíz é www.contoso.com, o nome do dominio do sitio de Power Pages debería ser portal.contoso.com. Isto é importante para garantir que as cookies empregadas polo sitio de Power Pages non se clasifiquen como cookies de terceiros e sexan bloqueadas polo navegador (blog). Se non, é posible que funcionalidades como Captcha e a redirección de formularios básicos ou de varios pasos non funcionen correctamente. Para configurar un nome de dominio personalizado no seu sitio de Power Pages, vaia a Engadir un nome de dominio personalizado.

Paso 3. Manexar cabeceiras e pés de páxina

Pode modificar como aparecen as cabeceiras e os pés de páxina, ou se aparecen en absoluto, nas páxinas do sitio de Power Pages incrustadas.

Evitar que se mostren as cabeceiras e os pés de páxina do sitio incrustados

É habitual que o sitio principal onde desexa inserir un sitio de Power Pages xa teña cabeceiras e pés de páxina. Nestas situacións, é posible que non queira mostrar a cabeceira e o pé de páxina do sitio incrustado. Teña en conta os seguintes escenarios:

  • Cando un sitio web completo está integrado nun iframe Power Pages
    Elimine o contido da cabeceira e do pé de páxina actualizando os respectivos modelos web de cabeceira e pé de páxina.

  • Cando unha páxina de sitio específica está incrustada nun iframe Power Pages
    Normalmente, non quere amosar a cabeceira ou o pé de páxina do sitio cando insire unha páxina específica nun sitio web. Non obstante, aínda quere que a cabeceira e o pé de páxina estean dispoñibles cando o usuario vai directamente ao sitio. Pode conseguilo modificando as cabeceiras e os pés de páxina para renderizar dinámicamente en función do contido da páxina.

Engadir código condicional en cabeceira e pés de páxina

Os modelos web de cabeceira e pé de páxina admiten personalizacións completas de Liquid, polo que pode engadir código condicional para renderizar certas propiedades.

Por exemplo, o seguinte código mostra unha barra de busca na cabeceira se a páxina non é a páxina de busca.

Importante

Porque a cabeceira é un elemento común a todas as páxinas, page.id quedará almacenado na memoria caché por defecto para a primeira páxina aberta por un usuario. Polo tanto, este código usa a etiqueta de substitución para asegurarse de que estes elementos non se gardarán na caché e sempre se avaliarán en función da páxina 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 %}

Como alternativa para engadir código condicional en cabeceira e pés de páxina, tamén pode considerar os seguintes métodos. Non obstante, non recomendamos ningún dos dous enfoques; ambos teñen limitacións e ningún dos dous admite a funcionalidade completa.

  • Para escenarios de só lectura que non inclúan listas nin formularios, desactive a cabeceira e o pé de páxina do seu modelo.
  • Empregue un modelo de reescritura especial (~/Areas/Portal/Pages/Form.aspx).

Consulte tamén

  • Last updated on