Se você tiver optado por usar a configuração de iFrame Incorporado ao Hub para exibir a URL da guia personalizada e o site não for exibido corretamente no portal da Web do Hub, você poderá configurar o servidor da Web para permitir que o site seja exibido corretamente no iframe.

Como permitir que o site seja exibido em um iFrame na Guia Personalizada no portal da Web do Hub

Se a guia personalizada não for carregada corretamente no iframe no portal do Hub, talvez o site esteja configurado com os cabeçalhos de resposta HTTP X-Frame-Options ou Content-Security-Policy para impedir que o site seja exibido em um iframe.

Se o cabeçalho HTTP X-Frame Option estiver configurado para permitir que o site seja exibido em um iframe, remova o cabeçalho X-Frame-Option da configuração do site.

Se o cabeçalho HTTP Content-Security-Policy estiver configurado para permitir que o site seja exibido em um iframe, adicione a opção frame-src ao cabeçalho para permitir que o portal da Web incorpore o site ao iframe. Digite como

Content-Security-Policy: frame-src <https://YOUR-HUB-APP-URL>;

Como configurar o compartilhamento de recursos entre origens (CORS) para exibir imagens corretamente na guia personalizada no portal da Web do Hub

Se as imagens não estiverem sendo carregadas corretamente no iframe no portal da Web, configure o site para permitir que o portal da Web acesse imagens.

As imagens podem não ser exibidas porque, por segurança, os navegadores restringem as solicitações HTTP de origem cruzada iniciadas por meio de scripts. Isso significa que um aplicativo Web que usa essas APIs só pode solicitar recursos da mesma origem da qual o aplicativo foi carregado. Para permitir que imagens de outras origens sejam exibidas corretamente, a resposta de outras origens deve incluir os cabeçalhos CORS corretos.

O CORS é um mecanismo baseado em cabeçalho HTTP que define uma maneira pela qual um navegador e um servidor podem interagir para determinar se é seguro permitir a solicitação entre origens. Ao realizar determinados tipos de solicitações entre domínios, os navegadores compatíveis com o CORS iniciam uma solicitação extra de "preflight" para o servidor que hospeda os recursos de origem cruzada a fim de determinar se eles têm permissão para executar a ação. No preflight, o navegador envia cabeçalhos que indicam o método HTTP e os cabeçalhos usados na solicitação real.

Em resposta, o servidor retorna um cabeçalho Access-Control-Allow-Origin com Access-Control-Allow-Origin: *, o que significa que o recurso pode ser acessado de qualquer origem (*). Para recuperar o recurso de imagem, uma solicitação GET HTTP é usada, e o servidor envia um cabeçalho Access-Control-Allow-Method com um Access-Control-Allow-Method: GET, o que significa que o recurso pode ser acessado por uma solicitação GET HTTP.

Para exibir imagens corretamente no portal da Web, defina os cabeçalhos de solicitação de comprovação do CORS a seguir em seu site.

Access-Control-Allow-Origin: <YOUR-HUB-APP-URL>
Access-Control-Allow-Method: GET

Para obter mais informações sobre como configurar o CORS, consulte o site Compartilhamento de Recursos entre Origens.