Insertar un portal en otro sitio web mediante un iframe

Una de las formas más comunes de utilizar las aplicaciones del portal es integrar la funcionalidad del portal 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 del portal.

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

Paso 1. Habilitar el portal para iframe

Los iframes están deshabilitados en los nuevos portales de forma predeterminada, para garantizar que nadie pueda insertar su aplicación de portal 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 portal 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 portal 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 portal 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 portal 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 a Ninguno para las cookies del portal.

   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 portal en un iframe, debe cambiar el atributo de cookie SameSite de su portal a Ninguno por defecto. Más información: Cambios en el modo SameSite

   Nota

   Marcando cookies de SameSite como Ninguno no hace que su portal sea vulnerable a los ataques CSRF, porque la plataforma de portales utiliza tokens anti-CSRF para prevenir estos ataques.

Paso 2. Inserte su portal

Después de completar el paso anterior, todo lo que necesita hacer para integrar la experiencia del portal 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 del portal sea pariente o 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 portal debe ser portal.contoso.com. Esto es importante para garantizar que las cookies utilizadas por el portal 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ásica / avanzada no funcionen correctamente. Para configurar un nombre de dominio personalizado en su portal, 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ágina—o si aparecen en absoluto—en las páginas del portal incrustadas.

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

Es común que el sitio principal donde desea insertar un portal 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 portal insertado. Supongamos los siguientes escenarios:

• Cuando un portal 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 portal está insertada en un iframe
  Por lo general, no desea mostrar el encabezado o pie de página del portal 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 portal 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.

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

Configurar opciones del sitio para portales
Etiqueta de plantilla de sustitución
Activación del almacenamiento en caché para la salida del encabezado y pie de página en un portal
Modo SameSite
Configurar encabezados HTTP en portales