CORS 이해

이 항목에서는 비디오, 이미지 및 스크립트와 같은 자산의 교차 출처 참조와 관련하여 웹에 내장된 CORS 및 제약 조건에 대해 학습합니다.

개요

CORS (교차 원본 리소스 공유) 는 웹 페이지에서 페이지가 제공된 도메인이 아닌 다른 도메인에 요청을 할 수 있도록 하는 메커니즘입니다. 일반적으로 도메인 간 요청은 웹 브라우저에서 금지됩니다. CORS는 도메인이 상호 작용하여 출처 간 요청을 허용할지 여부를 결정하는 방법을 정의합니다.

CORS 및 브라이트코브

CORS를 브라이트코브 서비스/제품과 함께 사용해야 하는 경우는 다음과 같은 세 가지가 있습니다.

동영상 자막 : 비디오에 대한 캡션이 포함된 파일은 BrightCove가 아닌 도메인에 저장할 수 있습니다. 비디오 자체는 브라이트코브 도메인에서 제공되므로 도메인 간 문제가 발생할 수 있습니다.
브라이트코브 플레이어 및 HLS : Brightcove Player's HLS 플러그인은 AJAX 요청을 사용하여 HLS 비디오의 매니페스트 및 개별 세그먼트를 검색합니다. 이러한 HLS 리소스는 인터넷에 액세스할 수 있는 모든 도메인에 저장될 수 있으므로 이러한 리소스는 플레이어를 제공한 브라이트코브 도메인과는 다른 서버 (일반적으로 CDN 도메인) 에서 제공될 수 있습니다. 이렇게 하면 도메인 간 문제가 다시 발생합니다.
비디오 스틸 및 썸네일 이미지 : Studio에서 비디오 정지 및 축소판 이미지를 캡처하려면 CORS 헤더 (기본적으로 대부분의 브라이트코브의 집 CDN에서 활성화되어야 함) 와 함께 비디오 변환을 제공해야 합니다. 사용자 지정 CDN 또는아직 업데이트되지 않았습니다. 이미지 캡처가 작동하지 않습니다.

솔루션

현재 브라이트코브가 사용하는 솔루션은 CDN 오리진 서버의 구성 파일에Access-Control-Allow-Origin헤더를 구성하는 것입니다. 여러 CDN 파트너는 서로 다른 서버 솔루션을 사용하여 콘텐츠를 전달하기 때문에 아래의 헤더 정보가 드롭 인 코드 조각이 아닌 예제로 제공된다는 점에 유의해야 합니다.

브라이트코브는 사내 CDN 서버의 속성에 대한 다음과 같은 헤더 지시문을 성공적으로 수행했습니다.

<FilesMatch ".(vtt|xml)$">
              Header set Access-Control-Allow-Headers: X-Requested-With
              Header add Access-Control-Allow-Origin: http://admin.brightcove.com
          </FilesMatch>

다음은 지시어에 대한 간략한 설명을 제공합니다.

<FilesMatch ".(vtt|xml)$"> : 이 조건은 vtt 또는 xml 파일에서만Access-Control-Allow-Origin헤더를 설정합니다. 테스트 결과 이 헤더가 이미지 또는 다른 http로 전달된 콘텐츠와 함께 전송되지 않는 것으로 확인되었습니다.
Header set Access-Control-Allow-Headers: X-Requested-With : 플레이어가하는 요청이 XMLHttpRequest이기 때문에이Access-Control-Allow-Origin헤더는 헤더가 작동하는 데 필요합니다.
Header add Access-Control-Allow-Origin: http://admin.brightcove.com : 표시된 도메인의 콘텐츠를 허용하는 액세스 제어 헤더 자체입니다.

아파치에서 CORS 활성화

Apache 서버 구성에서 헤더를 설정하여 CORS를 사용하도록 설정할 수 있습니다. 적절한.conf파일에 다음을 배치합니다.

Header set Access-Control-Allow-Origin "*"

위의 예에서 별표는 와일드카드 역할을 하며 모든 도메인에 대한 액세스를 허용합니다. 와일드카드는하나의특정 도메인으로 대체될 수도 있습니다. 대부분의 경우 에셋이 여러 도메인에 상주하기 때문에 브라이트코브 플레이어에게는 일반적으로 효과가 없습니다. 허용 가능한 도메인의 특정 허용 목록에 대한 액세스를 제한하는 다른 솔루션을 구현할 수 있습니다.

바이오 CDN

BYO CDN을 사용하고 있고 도메인 간 문제가 있는 고객인 경우 CDN에 문의하여 계정에 대한 CORS를 구성해야 합니다. 권장하는 설정은 다음과 같습니다.

액세스 제어 허용 헤더: X-요청
액세스 제어 허용 출처: *
파일 형식: m3u8 파일 파일 형식:

토큰 인증 요구 사항

토큰 승인이 필요한 경우 위의 솔루션을 변경해야합니다. 토큰 인증의 경우 CORS 보안 모델은 특히*문자를 값으로Access-Control-Allow-Origin응답 헤더. 또한Access-Control-Allow-Credentials응답 헤더가 필요하며 true로 설정해야 합니다.

토큰 인증에 대한 업데이트 된 헤더 지시문은 다음과 같습니다.

<FilesMatch ".(m3u8 | m3u | ts)$">
        # with AJAX withCredentials=true (cookies sent, SSL allowed...)
        SetEnvIfNoCase ORIGIN (.*) ORIGIN=$1
        Header set Access-Control-Allow-Origin "%{ORIGIN}e"
        Header set Access-Control-Allow-Credentials "true"
        RewriteEngine On
        RewriteCond %{REQUEST_METHOD} OPTIONS
        RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]
  </FilesMatch>

다음 사항은 이전 솔루션과의 차이점을 자세히 설명합니다.

지시문은 들어오는 요청에 Origin 헤더가 있는지 쿼리하고 해당 헤더가 있으면 (일반적으로) 값을ORIGIN다음과 같은 변수로 설정합니다. SetEnvIfNoCase ORIGIN (.*) ORIGIN=$1
Access-Control-Allow-Origin응답 헤더 값은 방금 만든ORIGIN변수의 값으로 설정됩니다. Header set Access-Control-Allow-Origin "%{ORIGIN}e"
이e변수가 환경 변수임을 나타내려면 이 (가) 필요합니다.
Access-Control-Allow-Credentials헤더를true다음과 같이 설정해야 합니다. Header set Access-Control-Allow-Credentials "true"

HLS 및 코스

일부 환경 (예: Amazon S3) 에서는 HLS에 대한 CORS 구성을 지정할 수 있습니다. 다음은 HLS 재생을 허용하도록 CORS를 구성합니다.

<CORSConfiguration>
      <CORSRule>
      <AllowedOrigin>*</AllowedOrigin>
      <AllowedMethod>GET</AllowedMethod>
      </CORSRule>
</CORSConfiguration>

Amazon S3에 대한 자세한 내용은출처 간 리소스 공유 활성화를참조하십시오.

CORS와 접하지만 클라이언트 브라우저는 토큰 공인 HLS 콘텐츠 전달을 위해 모든 세션 쿠키를 허용해야 제대로 작동합니다. 구글 크롬과 모질라 파이어 폭스와 같은 일부 클라이언트 브라우저는 기본적으로 세션 쿠키를 허용하지만 인터넷 익스플로러와 같은 다른 브라우저는 사용자가 이 옵션을 사용하도록 설정해야 합니다.