CORSを理解する

このトピックでは、ビデオ、画像、スクリプトなどのアセットのクロスオリジン参照に関して、Webに組み込まれているCORSと制約について学習します。

概要

クロスオリジンリソース共有 (CORS) は、Web ページが、ページが配信されたドメイン以外のドメインにリクエストを送信できるようにするメカニズムです。通常、クロスドメイン要求は、ウェブブラウザによって禁止されます。CORS は、クロスオリジン要求を許可するかどうかを決定するために、ドメインが対話する方法を定義します。

CORS とBrightcove

ブライトコーブのサービス/製品で CORS を使用する必要がある場合には、次の 3 つのインスタンスがあります。

動画のキャプション :動画のキャプションを含むファイルは、BrightCove 以外のドメインに保存できます。動画自体は Brightcove ドメインから配信されるため、クロスドメインの問題が発生します。
ブライトコーブのプレイヤーとHLS :ブライトコーブプレーヤーの HLS プラグインは、AJAX リクエストを使用して HLS ビデオのマニフェストと個々のセグメントを取得します。これらの HLS リソースはインターネットにアクセスできる任意のドメインに保存できるため、これらのリソースは、Player に提供した Brightcove ドメインとは異なるサーバー（通常は CDN ドメイン）から提供される可能性があります。これにより、再びクロスドメインの問題が発生します。
動画の静止画とサムネイル画像：Studio でビデオの静止画とサムネイル画像をキャプチャするには、ビデオレンディションに CORS ヘッダー（ほとんどのブライトコーブで有効にする必要があります）ハウスCDN（デフォルト）。カスタムCDNがある場合、またはまだ更新していないCDNがある場合、画像キャプチャは機能しません

ソリューション

Brightcove が現時点で使用しているソリューションには、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 :これは、指定されたドメインからのコンテンツを許可するためのアクセス制御ヘッダー自体です。

ApacheでCORSを有効にする

Apache サーバーの設定でヘッダーを設定して CORS を有効にすることができます。.conf次のファイルを適切なファイルに配置します。

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

上記の例では、アスタリスクはワイルドカードとして機能し、すべてのドメインへのアクセスを許可します。ワイルドカードは、 1つの特定のドメインで置き換えることもできます。多くの場合、アセットは複数のドメインに存在するため、一般的に Brightcove プレーヤーでは機能しません。他のソリューションを実装して、許容可能なドメインの特定のホワイトリストへのアクセスを制限できます。

BYO CDN

BYO CDN をお持ちのお客様で、クロスドメインの問題がある場合は、アカウントの CORS の設定について、CDN に問い合わせてください。推奨される設定は次のとおりです。

アクセス制御-許可ヘッダー: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:%{HTTP:ORIGIN}]
  </FilesMatch>

以下の点は、以前のソリューションとの違いについて詳しく説明します。

ディレクティブは、Originヘッダーの存在について着信リクエストを照会し、そのヘッダーが存在する場合 (通常はそうである)、その値を変数に設定します。ORIGINSetEnvIfNoCase ORIGIN (.*) ORIGIN=$1
Access-Control-Allow-Originレスポンスヘッダー値は、ORIGIN作成した変数の値に設定されます。Header set Access-Control-Allow-Origin "%{ORIGIN}e"
これが環境変数であることを示すには、が必要です。e
Access-Control-Allow-Credentialstrueヘッダーは以下に設定する必要があります。Header set Access-Control-Allow-Credentials "true"

HLSとCORS

一部の環境（Amazon S3 など）では、HLS の CORS 設定を指定できます。次に、HLS 再生を許可するように CORS を設定します。

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

Amazon S3 固有の詳細については、「クロスオリジンリソース共有の有効化」を参照してください。

CORS とは接線的ですが、トークン認定 HLS コンテンツ配信が正しく機能するためには、クライアントブラウザーがすべてのセッション Cookie を受け入れる必要があります。Google Chrome や Mozilla Firefox などの一部のクライアントブラウザでは、デフォルトでセッション Cookie を受け付けますが、Internet Explorer などの他のブラウザでは、このオプションを有効にする必要があります。