Wenn Sie die Einstellung „Eingebetteter iFrame für Hub“ für die Anzeige Ihrer benutzerdefinierten Registerkarten-URL gewählt haben und Ihre Website nicht korrekt im Hub-Webportal angezeigt wird, können Sie Ihren Webserver so konfigurieren, dass Ihre Website korrekt im iFrame angezeigt wird.
So ermöglichen Sie die Anzeige Ihrer Website in einem iFrame auf der Registerkarte „Benutzerdefiniert“ im Hub-Webportal
Wenn Ihre benutzerdefinierte Registerkarte im iFrame auf dem Hub-Portal nicht korrekt geladen wird, ist Ihre Website möglicherweise mit den HTTP-Antwortkopfzeilen „X-Frame-Options“ oder „Content-Security-Policy“ so konfiguriert, dass Ihre Website nicht in einem iFrame angezeigt wird.
Wenn die HTTP-Kopfzeile X-Frame-Options für Ihre Website so konfiguriert ist, dass Ihre Website in einem iFrame angezeigt werden kann, entfernen Sie die Kopfzeile „X-Frame-Options“ aus Ihrer Website-Konfiguration.
Wenn die HTTP-Kopfzeile Content-Security-Policy für Ihre Website so konfiguriert ist, dass Ihre Website in einem iFrame angezeigt werden kann, fügen Sie die frame-src-Option in die Kopfzeile ein, um dem Webportal die Einbettung Ihrer Website in den iFrame zu erlauben. Geben Sie diese in folgender Form ein:
Content-Security-Policy: frame-src <https://YOUR-HUB-APP-URL>;
So konfigurieren Sie die ursprungsübergreifende gemeinsame Nutzung von Ressourcen (Cross-Origin Resource Sharing, CORS), um Bilder in der Registerkarte „Benutzerdefiniert“ auf dem Hub-Webportal korrekt anzuzeigen
Wenn Bilder im iFrame im Webportal nicht korrekt geladen werden, konfigurieren Sie Ihre Website so, dass das Webportal auf Bilder zugreifen kann.
Bilder werden möglicherweise nicht angezeigt, da Browser aus Sicherheitsgründen die von Skripts initiierten ursprungsübergreifenden HTTP-Anforderungen einschränken. Das bedeutet, dass eine Webanwendung, die diese APIs verwendet, nur Ressourcen von demselben Ursprung anfordern kann, von dem die Anwendung geladen wurde. Damit Bilder aus anderen Ursprüngen korrekt angezeigt werden können, muss die Antwort aus den anderen Ursprüngen die richtigen CORS-Kopfzeilen enthalten.
CORS ist ein auf HTTP-Kopfzeilen basierender Mechanismus, der definiert, wie ein Browser und ein Server interagieren können, um zu ermitteln, ob es sicher ist, die ursprungsübergreifende Anforderung zuzulassen. Bei der Durchführung bestimmter Arten von domänenübergreifenden Anforderungen initiieren Browser, die CORS unterstützen, eine zusätzliche „Vorabanforderung“ (Preflight) an den Server, der die herkunftsübergreifenden Ressourcen hostet, um zu ermitteln, ob sie die Berechtigung haben, die Aktion durchzuführen. Beim Preflight sendet der Browser Kopfzeilen, die die HTTP-Methode und Kopfzeilen angeben, die in der eigentlichen Anforderung verwendet werden.
Als Antwort sendet der Server eine Kopfzeile Access-Control-Allow-Origin mit „Access-Control-Allow-Origin: *“ zurück, was bedeutet, dass auf die Ressource von jedem (*) Ursprung aus zugegriffen werden kann. Zum Abrufen der Bildressource wird eine GET HTTP-Anforderung verwendet, und der Server sendet eine Kopfzeile Access-Control-Allow-Method mit einer Access-Control-Allow-Method: GET zurück, was bedeutet, dass auf die Ressource über eine GET-HTTP-Anforderung zugegriffen werden kann.
Um Bilder im Webportal korrekt anzuzeigen, definieren Sie auf Ihrer Website die folgenden CORS-Preflight-Anforderungskopfzeilen.
Access-Control-Allow-Origin: <YOUR-HUB-APP-URL> Access-Control-Allow-Method: GET
Weitere Informationen zum Konfigurieren von CORS finden Sie auf der Website für ursprungsübergreifende gemeinsame Nutzung von Ressourcen.
