Si vous avez choisi d'utiliser le paramètre iFrame intégré au Hub pour afficher l'URL de votre onglet personnalisé et que votre site Web ne s'affiche pas correctement dans le portail Web du Hub, vous pouvez configurer votre serveur Web pour permettre à votre site Web de s'afficher correctement dans l'iFrame.
Comment autoriser votre site Web à s'afficher dans un iFrame de l'onglet personnalisé dans le portail Web du Hub
Si votre onglet personnalisé ne se charge pas correctement dans l'iFrame dans le portail du Hub, votre site Web peut être configuré avec les en-têtes de réponse HTTP X-Frame-Options ou Content-Security-Policy pour empêcher votre site Web de s'afficher dans un iFrame.
Si l'en-tête HTTP X-Frame Option est configuré pour votre site Web, pour permettre à votre site Web de s'afficher dans un iFrame, supprimez l'en-tête X-Frame-Option de la configuration de votre site Web.
Si l'en-tête HTTP Content-Security-Policy est configuré pour votre site Web, pour permettre à votre site Web de s'afficher dans un iFrame, ajoutez l'option frame-src à l'en-tête pour permettre au portail Web d'intégrer votre site Web dans l'iFrame. Utilisez le format suivant
Content-Security-Policy: frame-src <https://YOUR-HUB-APP-URL>;
Comment configurer le partage des ressources entre origines multiples (CORS, Cross-Origin Resource Sharing) pour afficher correctement les images dans l'onglet personnalisé du portail Web du Hub
Si les images ne se chargent pas correctement dans l'iFrame du portail Web, configurez votre site Web pour permettre au portail Web d'accéder aux images.
Les images peuvent ne pas s'afficher, car pour des raisons de sécurité, les navigateurs limitent les demandes HTTP entre origines multiples initiées à partir de scripts. Cela signifie qu'une application Web utilisant ces API ne peut demander que des ressources de la même origine à partir de laquelle l'application a été chargée. Pour permettre aux images d'autres origines de s'afficher correctement, la réponse des autres origines doit inclure les en-têtes CORS appropriés.
CORS est un mécanisme basé sur l'en-tête HTTP qui définit le mode d'interaction entre un navigateur et un serveur pour déterminer s'il est sans risque d'autoriser la demande entre origines multiples. Lorsque vous effectuez certains types de demandes entre domaines, les navigateurs qui prennent en charge CORS initient une demande « préliminaire » supplémentaire au serveur hébergeant les ressources entre origines multiples afin de déterminer s'ils sont autorisés à effectuer l'action. Dans cet état préliminaire, le navigateur envoie des en-têtes qui indiquent la méthode et les en-têtes HTTP utilisés dans la demande réelle.
En réponse, le serveur renvoie un en-tête Access-Control-Allow-Origin avec Access-Control-Allow-Origin : *, ce qui signifie que la ressource est accessible depuis n'importe quelle origine (*). Pour récupérer la ressource d'image, une demande GET HTTP est utilisée, et le serveur renvoie un en-tête Access-Control-Allow-Method avec Access-Control-Allow-Method: GET, ce qui signifie que la ressource est accessible via une demande GET HTTP.
Pour afficher correctement les images dans le portail Web, vous pouvez définir les en-têtes de demande préliminaire CORS suivants sur votre site Web.
Access-Control-Allow-Origin: <YOUR-HUB-APP-URL> Access-Control-Allow-Method: GET
Pour plus d'informations sur la configuration de CORS, reportez-vous au site Web Partage des ressources entre origines multiples.
