Si se decantó por la opción iFrame integrado de Hub para mostrar la dirección URL de la pestaña personalizada, pero su sitio web no aparece correctamente en el portal web de Hub, puede configurar el servidor web para permitir que el sitio web aparezca correctamente en el iFrame.
Cómo permitir que el sitio web se muestre en un iFrame en la pestaña personalizada del portal web de Hub
Si la pestaña personalizada no se carga correctamente en el iFrame del portal de Hub, puede que el sitio web esté configurado con los encabezados de respuesta HTTP "X-Frame-Options" o "Content-Security-Policy", lo que impide que el sitio web se muestre en un iFrame.
Si el encabezado HTTP X-Frame Option está configurado en el sitio web y quiere permitir que el sitio web se muestre en un iFrame, elimine el encabezado X-Frame-Option de la configuración del sitio web.
Si el encabezado HTTP Content-Security-Policy está configurado en el sitio web y quiere que el sitio web se muestre en un iFrame, agregue la opción frame-src al encabezado para permitir que el portal web integre el sitio web en el iFrame. Introdúzcala así:
Content-Security-Policy: frame-src <https://YOUR-HUB-APP-URL>;
Cómo configurar el intercambio de recursos entre orígenes (CORS) para mostrar imágenes correctamente en la pestaña personalizada del portal web de Hub
Si las imágenes no se cargan correctamente en el iFrame del portal web, configure el sitio web para permitir que el portal web acceda a las imágenes.
Es posible que las imágenes no se muestren porque, por motivos de seguridad, los navegadores restringen las solicitudes HTTP entre orígenes iniciadas desde scripts. Esto significa que una aplicación web que utiliza esas API solo puede solicitar recursos procedentes del mismo origen desde el que se cargó la aplicación. Para permitir que las imágenes de otros orígenes se muestren correctamente, la respuesta procedente de los otros orígenes debe incluir los encabezados CORS adecuados.
CORS es un mecanismo basado en encabezados HTTP que define la forma en la que un navegador y un servidor pueden interactuar para determinar si es seguro permitir la solicitud entre orígenes. Cuando se realizan ciertos tipos de solicitudes entre dominios, los navegadores que admiten CORS envían una solicitud de "comprobación previa" extra al servidor que aloja los recursos entre orígenes, a fin de determinar si tienen permiso para realizar la acción. En esa solicitud de "comprobación previa", el navegador envía los encabezados que indican el método HTTP y los encabezados que se utilizan en la solicitud real.
En respuesta, el servidor devuelve un encabezado Access-Control-Allow-Origin donde se especifica "Access-Control-Allow-Origin: *", que significa que se puede acceder al recurso desde cualquier origen (*). Para recuperar el recurso de imagen, se utiliza una solicitud GET HTTP, y el servidor devuelve un encabezado Access-Control-Allow-Method con un método Access-Control-Allow-Method: GET, lo que significa que se puede acceder al recurso a través de una solicitud GET HTTP.
Para que las imágenes se muestren correctamente en el portal web, hay que definir los siguientes encabezados de solicitud de "comprobación previa" de CORS en el sitio web:
Access-Control-Allow-Origin: <YOUR-HUB-APP-URL> Access-Control-Allow-Method: GET
Para obtener más información sobre cómo configurar CORS, consulte el sitio web sobre intercambio de recursos entre orígenes.
