Se si sceglie di utilizzare l'impostazione iFrame incorporato in Hub per visualizzare l'URL della scheda personalizzata e il sito Web non viene visualizzato correttamente nel portale Web di Hub, è possibile configurare il server Web in modo che il sito Web venga visualizzato correttamente nell'iFrame.
Come fare in modo che il sito Web venga visualizzato in un iFrame nella scheda personalizzata del portale Web di Hub
Se la scheda personalizzata non viene caricata correttamente nell'iFrame nel portale di Hub, è possibile che il sito Web sia configurato con le intestazioni della risposta HTTP X-Frame-Options o Content-Security-Policy che impediscono la visualizzazione del sito Web in un iFrame.
Se per il sito Web è configurata l'intestazione HTTP X-Frame-Options, per consentire la visualizzazione del sito Web in un iFrame, rimuovere l'intestazione X-Frame-Options dalla configurazione del sito Web.
Se per il sito Web è configurata l'intestazione HTTP Content-Security-Policy, per consentire la visualizzazione del sito Web in un iFrame, aggiungere l'opzione frame-src all'intestazione per consentire al portale Web di incorporare il sito Web nell'iFrame. Utilizzare il comando
Content-Security-Policy: frame-src <https://YOUR-HUB-APP-URL>;
Come configurare Cross-Origin Resource Sharing (CORS) per visualizzare correttamente le immagini nella scheda personalizzata del portale Web di Hub
Se le immagini non vengono caricate correttamente nell'iFrame nel portale Web, configurare il sito Web per consentire al portale Web di accedere alle immagini.
È possibile che le immagini non vengano visualizzate perché, per motivi di sicurezza, i browser limitano le richieste HTTP tra origini avviate dagli script. Questo significa che un'applicazione Web che utilizza queste API può richiedere risorse solo dalla stessa origine da cui è stata caricata l'applicazione. Per consentire la corretta visualizzazione delle immagini di altre origini, la risposta delle altre origini deve includere le intestazioni CORS corrette.
CORS è un meccanismo basato sull'intestazione HTTP che definisce un modo in cui un browser e un server possono interagire per decidere se è sicuro consentire la richiesta tra origini. Quando si eseguono determinati tipi di richieste tra domini, i browser che supportano CORS avviano un'ulteriore richiesta di controllo preliminare per il server che ospita le risorse tra origini per stabilire se sono autorizzate a eseguire l'azione. Durante il controllo preliminare, il browser invia le intestazioni che indicano il metodo HTTP e le intestazioni utilizzate nella richiesta effettiva.
In risposta, il server restituisce un'intestazione Access-Control-Allow-Origin con Access-Control-Allow-Origin: *, che indica che è possibile accedere alla risorsa da qualsiasi origine (*). Per recuperare la risorsa immagine, viene utilizzata una richiesta GET HTTP e il server restituisce un'intestazione Access-Control-Allow-Method con Access-Control-Allow-Method: GET, che indica che è possibile accedere alla risorsa tramite una richiesta GET HTTP.
Per visualizzare correttamente le immagini nel portale Web, definire i seguenti controlli preliminari di CORS nel sito Web.
Access-Control-Allow-Origin: <YOUR-HUB-APP-URL> Access-Control-Allow-Method: GET
Per ulteriori informazioni sulla configurazione di CORS, vedere il sito Web di Cross-Origin Resource Sharing.
