Hub 내장형 iFrame 설정을 사용하여 사용자 지정 탭 URL을 표시하도록 선택했으나 웹 사이트가 Hub 웹 포털에 올바르게 표시되지 않는 경우 웹 사이트가 iframe에 올바르게 표시되도록 웹 서버를 구성할 수 있습니다.
Hub 웹 포털의 사용자 지정 탭에서 웹 사이트가 iFrame에 표시되도록 허용하는 방법
사용자 지정 탭이 Hub 포털의 iframe에서 올바르게 로드되지 않는 경우 웹 사이트가 iframe에 나타나지 않도록 HTTP 응답 헤더 X-Frame-Options 또는 Content-Security-Policy로 웹 사이트를 구성할 수 있습니다.
웹 사이트에 HTTP 헤더 X-Frame Option이 구성된 경우 웹 사이트가 iframe에 표시되도록 하려면 웹 사이트 구성에서 X-Frame-Option 헤더를 제거합니다.
웹 사이트에 대해 HTTP 헤더 Content-Security-Policy를 구성한 경우 웹 사이트를 iframe에 표시하려면 헤더에 frame-src 옵션을 추가하여 웹 포털에서 iframe에 웹 사이트를 내장하도록 합니다. 다음으로 입력합니다.
Content-Security-Policy: frame-src <https://YOUR-HUB-APP-URL>;
CORS(원본 간 리소스 공유)를 구성하여 Hub 웹 포털의 사용자 지정 탭에 이미지를 올바르게 표시하는 방법
웹 포털의 iframe에서 이미지가 올바르게 로드되지 않는 경우 웹 포털에서 이미지에 액세스할 수 있도록 웹 사이트를 구성합니다.
보안을 위해 브라우저가 스크립트에서 시작된 원본 간 HTTP 요청을 제한하기 때문에 이미지가 표시되지 않을 수 있습니다. 즉, 해당 API를 사용하는 웹 애플리케이션은 애플리케이션이 로드된 동일한 원본의 리소스만 요청할 수 있습니다. 다른 원본의 이미지가 올바르게 표시되도록 하려면 다른 원본의 응답에 올바른 CORS 헤더가 포함되어야 합니다.
CORS는 브라우저와 서버가 상호 작용하여 원본 간 요청을 허용하는 것이 안전한지 여부를 확인하는 방식을 정의하는 http 헤더 기반 메커니즘입니다. 특정 유형의 도메인 간 요청을 수행할 때 CORS를 지원하는 브라우저는 원본 간 리소스를 호스팅하는 서버에 대해 추가 "실행 전" 요청을 시작하여 작업을 수행할 수 있는 사용 권한이 있는지 여부를 판단합니다. 브라우저는 HTTP 메서드를 나타내는 헤더와 실제 요청에 사용되는 헤더를 전송합니다.
응답으로 서버는 리소스가 모든(*) 원본에서 액세스할 수 있음을 의미하는 Access-Control-Allow-Origin: *를 사용하여 Access-Control-Allow-Origin 헤더를 다시 전송합니다. 이미지 리소스를 검색하기 위해 GET HTTP 요청이 사용되고 서버가 GET HTTP 요청을 통해 리소스에 액세스할 수 있음을 의미하는 Access-Control-Allow-Method: GET을 사용하여 Access-Control-Allow-Method 헤더를 다시 전송합니다.
웹 포털에서 이미지를 올바르게 표시하려면 웹 사이트에서 다음과 같은 CORS 실행 전 요청 헤더를 정의합니다.
Access-Control-Allow-Origin: <YOUR-HUB-APP-URL> Access-Control-Allow-Method: GET
CORS 구성에 대한 자세한 내용은 원본 간 리소스 공유 웹 사이트를 참조하십시오.
