If you selected to use Hub Embedded iFrame setting to display your custom tab URL and your website does not appear correctly in the Hub web portal, you can configure your web server to permit your website to appear correctly in the iframe.
How to Allow Your Website to Display in an iFrame in the Custom Tab on the Hub Web Portal
If your custom tab is not loading correctly in the iframe on the Hub portal, your website might be configured with the HTTP response headers X-Frame-Options or Content-Security-Policy to prevent your website from appearing in an iframe.
If the HTTP header X-Frame Option is configured for your website, to allow your website to display in an iframe, remove the X-Frame-Option header from your website configuration.
If the HTTP header, Content-Security-Policy is configured for your website, to allow your website to display in an iframe, add the frame-src option to the header to allow the web portal to embed your website in the iframe. Enter as
Content-Security-Policy: frame-src <https://YOUR-HUB-APP-URL>;
How to Configure Cross-Origin Resource Sharing (CORS) to Display Images Correctly in the Custom Tab on the Hub Web Portal
If images are not loading correctly in the iframe in the web portal, configure your website to allow the web portal to access images.
Images might not display because, for security, browsers restrict cross-origin HTTP requests initiated from scripts. This means that a web application using those APIs can only request resources from the same origin the application was loaded from. To allow images from other origins to display correctly, the response from the other origins must include the right CORS headers.
CORS is an HTTP-header based mechanism that defines a way in which a browser and server can interact to determine whether it is safe to allow the cross-origin request. When performing certain types of cross-domain requests, browsers that support CORS initiate an extra "preflight" request to the server hosting the cross-origin resources to determine whether they have permission to perform the action. In preflight, the browser sends headers that indicate the HTTP method and headers that are used in the actual request.
In response, the server sends back an Access-Control-Allow-Origin header with Access-Control-Allow-Origin: *, which means that the resource can be accessed from any (*) origin. To retrieve the image resource, a GET HTTP request is used, and the server sends back an Access-Control-Allow-Method header with an Access-Control-Allow-Method: GET, which means that the resource can be accessed over a GET HTTP request.
To display images correctly in the web portal, you define the following CORS preflight request headers on your website.
Access-Control-Allow-Origin: <YOUR-HUB-APP-URL> Access-Control-Allow-Method: GET
For more information about configuring CORS, see the Cross-Origin Resource Sharing website.
