Hub の組み込み iFrame 設定を使用してカスタム タブ URL を表示することを選択し、Web サイトが Hub Web ポータルに正しく表示されない場合は、Web サイトが iFrame に正しく表示されるように Web サーバを構成できます。
Hub Web ポータルのカスタム タブの iFrame に Web サイトを表示する方法
カスタム タブが Hub ポータルの iframe に正しくロードされない場合、Web サイトでは HTTP 応答ヘッダー X-Frame-Options または Content-Security-Policy が Web サイトを iframe に表示しないように構成されている可能性があります。
Web サイトに HTTP ヘッダー [X-Frame Option] が構成されている場合、Web サイトを iframe に表示できるようにするには、Web サイトの構成から X-Frame-Option ヘッダーを削除します。
Web サイトに HTTP ヘッダー [Content-Security-Policy] が構成されている場合、Web サイトを iframe に表示できるようにするには、ヘッダーに frame-src オプションを追加して、Web ポータルが Web サイトを iframe に埋め込むことを許可します。以下のように入力します。
Content-Security-Policy: frame-src <https://YOUR-HUB-APP-URL>;
Hub Web ポータルのカスタム タブにイメージを正しく表示するようにオリジン間リソース共有 (CORS) を構成する方法
Web ポータルの iframe にイメージが正しくロードされない場合は、Web ポータルがイメージにアクセスできるように Web サイトを構成します。
セキュリティ上の理由からブラウザはスクリプトから開始されるオリジン間 HTTP 要求を制限しているため、イメージが表示されない場合があります。つまり、これらの API を使用する Web アプリケーションは、アプリケーションのロード元と同じオリジンからのみリソースを要求できます。他のオリジンからのイメージを正しく表示するには、他のオリジンからの応答に正しい CORS ヘッダーを含める必要があります。
CORS は HTTP ヘッダー ベースのメカニズムで、ブラウザとサーバの対話によってオリジン間要求を許可しても安全かどうかを判断する方法を定義します。特定のタイプのクロスドメイン要求を実行する場合、CORS をサポートするブラウザは、オリジン間リソースをホストするサーバに対して追加の「プリフライト」要求を開始して、アクションを実行する権限があるかどうかを判断します。プリフライトでは、ブラウザは、HTTP メソッドを示すヘッダーと、実際の要求で使用されるヘッダーを送信します。
応答として、サーバは「Access-Control-Allow-Origin: *」を含む [Access-Control-Allow-Origin] ヘッダーを返します。これは任意 (*) のオリジンからリソースにアクセスできることを意味します。イメージ リソースを取得するために、[GET HTTP] 要求が使用され、サーバは「[Access-Control-Allow-Method: GET]」を含む [Access-Control-Allow-Method] ヘッダーを返します。これは、GET HTTP 要求を介してリソースにアクセスできることを意味します。
Web ポータルでイメージを正しく表示するには、Web サイトで次の CORS プリフライト要求ヘッダーを定義します。
Access-Control-Allow-Origin: <YOUR-HUB-APP-URL> Access-Control-Allow-Method: GET
CORS の構成の詳細については、オリジン間リソース共有の Web サイトを参照してください。
