Insertar un sitio de Power Pages en otro sitio web mediante un iframe

Una de las formas más comunes de utilizar las aplicaciones basadas en web es insertar la funcionalidad web dentro de otro sitio web. Por lo general, el otro sitio web ya existe, pero desea mejorar sus capacidades y agregar nuevas funciones que funcionen con sus datos surgidos a través de la aplicación Power Pages.

En este escenario, es más fácil insertar la funcionalidad de su sitio de Power Pages en lugar de crearlo desde cero. Este artículo explica los pasos para insertar una aplicación de Power Pages en un sitio web diferente mediante un iframe.

Paso 1. Habilitar el sitio para iframe

Los iframes están deshabilitados en los nuevos sitios de Power Pages de forma predeterminada, para garantizar que nadie pueda insertar su sitio web externamente para intentar ataques de "clickjacking".

  1. Configurar el encabezado de respuesta HTTP. Puede elegir entre la directiva Content-Security-Policy frame-ancestors (CSP) (recomendado) o X-Frame-Options.

    Nota

    Content-Security-Policy frame-ancestors ha reemplazado a X-Frame-Options y es el método descrito en este artículo.

    1. Establecer la configuración del sitio para habilitar el encabezado HTTP HTTP/Content-Security-Policy. Más información: Configurar encabezados HTTP en portales

    2. Siga la sintaxis descrita en CSP: frame-ancestors para establecer el valor.

      Por ejemplo, para habilitar un sitio de Power Pages que se puede insertar mediante un iframe en el sitio web www.contoso.com, la configuración será similar a la siguiente:

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

      Nota

      La cadena 'self' es importante; sin ella, el sitio de Power Pages no podrá insertar sus propias páginas, lo que comúnmente se requiere en escenarios como menús emergentes modales para formularios básicos.

      Es importante limitar la capacidad de insertar un sitio de Power Pages en un iframe a sitios específicos, en lugar de utilizar el carácter comodín (*).

      CSP consta de numerosas directivas cuyos valores dependen de varios factores (como desde dónde se cargan los scripts). Este artículo no cubre esa información porque es específico de la implementación. Sin embargo, le recomendamos que primero pruebe esta configuración en un sitio que no sea de producción, observe los errores de la consola del navegador para identificar los problemas que necesita solucionar y ajuste la configuración.

  2. Establezca el SameSite predeterminado en Ninguno para las cookies del sitio de Power Pages.

    El atributo SameSite para cookies es útil para proteger el sitio contra ataques de falsificación de solicitudes entre sitios (CSRF). Sin embargo, esto también significa que el sitio no se puede insertar en un iframe en escenarios como cuando el sitio requiere autenticación de usuario o contiene componentes dinámicos como formularios o listas.

    Por lo tanto, para insertar el sitio de Power Pages en un iframe, debe cambiar el atributo de cookie SameSite de su sitio de Power Pages a Ninguno de manera predeterminada. Más información: Cambios en el modo SameSite

    Nota

    Marcando cookies de SameSite como Ninguno no hace que su sitio de Power Pages sea vulnerable a los ataques CSRF, porque Power Pages utiliza tokens anti-CSRF para prevenir estos ataques.

Paso 2. Insertar su sitio de Power Pages

Después de completar el paso anterior, todo lo que necesita hacer para insertar la experiencia del sitio de Power Pages en su sitio web es usar la Etiqueta de iframe HTML para insertar todo el sitio o páginas específicas, según sea necesario.

Recomendamos que el nombre de dominio de Power Pages sea del mismo nivel o un elemento secundario del nombre de dominio del sitio donde está insertando el portal en un iframe. Por ejemplo, si su sitio web raíz es www.contoso.com, el nombre de dominio del sitio de Power Pages debe ser portal.contoso.com. Esto es importante para garantizar que las cookies utilizadas por el sitio de Power Pages no se clasifiquen como cookies de terceros y sean bloqueadas por el navegador (blog). De lo contrario, es posible que funciones como Captcha y la redirección de formularios básicos/de varios pasos no funcionen correctamente. Para configurar un nombre de dominio personalizado en su sitio de Power Pages, vaya a Agregar un nombre de dominio personalizado.

Paso 3. Gestionar encabezados y pies de página

Puede modificar cómo aparecen los encabezados y pies de páginao si aparecen en absoluto en las páginas del sitio de Power Pages insertadas.

Evite que se muestren los encabezados y pies de página del sitio insertado

Es común que el sitio primario donde desea insertar un sitio de Power Pages ya tenga encabezados y pies de página. En tales situaciones, es posible que no desee mostrar el encabezado y pie de página del sitio insertado. Supongamos los siguientes escenarios:

  • Cuando un sitio de Power Pages completo está insertado en un iframe
    Elimine el contenido de su encabezado y pie de página actualizando las respectivas plantillas web de encabezado y pie de página.

  • Cuando una página específica del sitio de Power Pages está insertada en un iframe
    Por lo general, no desea mostrar el encabezado o pie de página del sitio cuando inserta una página específica en un sitio web. Sin embargo, aún desea que el encabezado y el pie de página estén disponibles cuando el usuario acceda al sitio directamente. Puede lograr esto modificando los encabezados y pies de página para representar dinámicamente en función del contenido de la página.

Agregar código condicional en encabezados y pies de página

Las plantillas web de encabezado y pie de página admiten personalizaciones líquidas completas, por lo que puede agregar código condicional para representar ciertas propiedades.

Por ejemplo, el siguiente código muestra una barra de búsqueda en el encabezado si la página no es la página de búsqueda.

Importante

Dado que el encabezado es un elemento común a todas las páginas, page.id se almacenará en caché de forma predeterminada para la primera página que abra un usuario. Por lo tanto, este código usa la etiqueta de sustitución para garantizar que estos elementos no se almacenen en caché y que siempre se evalúen en función de 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 %}

Como alternativa a agregar código condicional en encabezados y pies de página, también puede considerar los siguientes métodos. Sin embargo, no recomendamos ninguno de los dos enfoques; ambos tienen limitaciones y ninguno es compatible con la funcionalidad completa.

  • Para escenarios de solo lectura que no incluyen listas o formularios, deshabilite el encabezado y pie de página de su plantilla.
  • Utilice una plantilla de reescritura especial (~/Areas/Portal/Pages/Form.aspx).

Consultar también

  • Last updated on