CORS 이해

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

개요

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

CORS 및 브라이트코브

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

동영상 캡션 : 비디오에 대한 캡션이 포함된 파일은 BrightCove가 아닌 도메인에 저장할 수 있습니다. 비디오 자체는 브라이트코브 도메인에서 제공되므로 도메인 간 문제가 발생할 수 있습니다.
브라이트코브 플레이어 및 HLS : Brightcove Player's HLS 플러그인은 AJAX 요청을 사용하여 HLS 비디오의 매니페스트와 개별 세그먼트를 검색합니다. 이러한 HLS 리소스는 인터넷에 액세스할 수 있는 모든 도메인에 저장될 수 있으므로 이러한 리소스는 플레이어를 제공한 브라이트코브 도메인과는 다른 서버 (일반적으로 CDN 도메인) 에서 제공될 수 있습니다. 이렇게 하면 도메인 간 문제가 다시 발생합니다.
비디오 스틸 및 썸네일 이미지 : 을 위한 Studio에서 비디오 스틸 및 썸네일 이미지 캡처 , 비디오 변환은 CORS 헤더와 함께 제공되어야 합니다(대부분의 Brightcove 하우스 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: https://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: https://admin.brightcove.com : 표시된 도메인의 콘텐츠를 허용하는 액세스 제어 헤더 자체입니다.

아파치에서 CORS 활성화

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

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

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

바이오 CDN

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

액세스 제어 허용 헤더: X-요청
액세스 제어 허용 출처: *
파일 형식: m3u8 m3u ts xml dfxp vtt mpd m4f mp4 jpg png

토큰 인증 요구 사항

토큰 승인이 필요한 경우 위의 솔루션을 변경해야합니다. 토큰 권한 부여의 경우 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:%{https: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 콘텐츠 전달을 위해 모든 세션 쿠키를 허용해야 제대로 작동합니다. 구글 크롬과 모질라 파이어 폭스와 같은 일부 클라이언트 브라우저는 기본적으로 세션 쿠키를 허용하지만 인터넷 익스플로러와 같은 다른 브라우저는 사용자가 이 옵션을 사용하도록 설정해야 합니다.