ApsaraVideo VOD:オリジン間リソース共有の設定

オリジン間リソース共有 (CORS) とは

オリジン間リソース共有 (CORS) は、Web ページが異なるオリジンからリソースを読み込んでアクセスできるようにする標準的な HTML5 ソリューションです。これにより、安全なクロスオリジンデータ伝送が可能になります。詳細については、「オリジン間リソース共有」をご参照ください。

オリジン間リソース共有を設定する理由

セキュリティ上の理由から、ブラウザは同一オリジンポリシーに従います。このポリシーは、異なるドメイン、サブドメイン、プロトコル、またはポートからのリソースの読み込みとアクセスを制限します。たとえば、example.com は example.org 上のリソースにアクセスできません。CORS を設定することで、CDN サーバーでレスポンスヘッダーを設定できます。リクエストに許可されたルールに一致するリクエストヘッダーが含まれている場合、サーバーは対応する HTTP レスポンスヘッダーを返します。これにより、クロスオリジンリソースの読み込みとアクセスが可能になります。

データインタラクション図

CORS が無効な場合

CORS が有効な場合

オリジン間リソース共有の有効化

1. ApsaraVideo VOD コンソールにログインします。

2. 左側のナビゲーションウィンドウで、設定管理 > CDN 設定 > ドメイン名 を選択します。

3. ドメイン名 ページで、管理するドメイン名を見つけて [設定] をクリックします。

4. ドメイン名の左側のナビゲーションウィンドウで、キャッシュ設定 をクリックします。

5. カスタム HTTP レスポンスヘッダー タブをクリックします。

6. 追加 をクリックして、カスタム HTTP レスポンスヘッダーを設定します。

7. 次の表の説明に従ってパラメーターを設定し、クロスオリジンリクエストで許可されるオリジンを指定します。その後、OK をクリックして設定を保存します。

   

   パラメーター	例
   実行内容	追加
   応答ヘッダー	Access-Control-Allow-Origin
   応答ヘッダー値	* 説明 レスポンスヘッダーの値を `*` に設定して、任意のオリジンを示すことができます。 レスポンスヘッダーの値が `*` でない場合は、1 つ以上の IP アドレス、ドメイン名、またはその両方の組み合わせを指定できます。コンマ (,) で区切ります。 レスポンスヘッダーの値が `*` でない場合は、プロトコル `http://` または `https://` を含める必要があります。 レスポンスヘッダーの値にはポート番号を含めることができます。 レスポンスヘッダーの値はワイルドカードドメイン名をサポートしています。
   重複の許可	いいえ 説明 はい：重複を許可します。オリジンサーバーからのヘッダーは保持され、同じ名前の別のヘッダーが追加されます。 いいえ：重複を許可しません。オリジンサーバーからのヘッダーは、同じ名前の新しいヘッダーによって上書きされます。 このトピックでは、重複を防ぐ例を示します。具体的な設定は、実際の環境によって異なります。 重要 [重複を許可] と [CORS 検証] の設定は相互に排他的です。[重複を許可] を [はい] に設定すると、CORS 検証は無効になります。
   CORS	有効 説明 [CORS 検証] は、[レスポンスヘッダー操作] が [追加] に設定され、[カスタムレスポンスヘッダーパラメーター] が `Access-Control-Allow-Origin` に設定されている場合にのみ設定できます。 [CORS 検証] は [無効] または [有効] に設定できます。デフォルト値は [無効] です。 無効：CDN POP はユーザーリクエストの Origin ヘッダーを検証しません。設定された `Access-Control-Allow-Origin` の値を返すだけです。 有効：CDN POP は、次のルールに基づいてクロスオリジンリクエストを検証し、検証結果に基づいて `Access-Control-Allow-Origin` の値を返します。検証ルールは次のとおりです： ワイルドカード一致：[カスタムレスポンスヘッダーパラメーター] `Access-Control-Allow-Origin` の値が `*` に設定されている場合、POP はユーザーリクエストに `Origin` パラメーターが含まれているかどうか、またその値が何であるかに関係なく、常に `Access-Control-Allow-Origin:*` を返します。 完全一致：[カスタムレスポンスヘッダーパラメーター] `Access-Control-Allow-Origin` の値は、コンマ (,) で区切られた 1 つ以上の値に設定されます。 ユーザーリクエストの `Origin` パラメーターの値が、設定された値のいずれかと完全に一致する場合、対応するクロスドメインヘッダーが返されます。 完全一致が見つからない場合、クロスドメインヘッダーは返されません。 ワイルドカードドメイン一致：[カスタムレスポンスヘッダーパラメーター] `Access-Control-Allow-Origin` の値がワイルドカードドメイン名に設定されている場合、POP はリクエストヘッダーの `Origin` の値がワイルドカードドメイン名と一致するかどうかをチェックします。 [CORS 検証] が [有効] の場合、[レスポンスヘッダー値] のドメイン名にハイフン (-) が含まれている場合は、設定する前にハイフンをエスケープする必要があります。ハイフン (-) は %- としてエスケープします。例： 元のレスポンスヘッダー値：http://doc.aliyun-example.com。 エスケープ後のレスポンスヘッダー値：http://doc.aliyun%-example.com。

8. 次の表の説明に従ってパラメーターを設定し、許可されるクロスオリジンリクエストメソッドを指定します。その後、OK をクリックして設定を保存します。

   

   パラメーター	例
   実行内容	追加
   応答ヘッダー	Access-Control-Allow-Methods
   応答ヘッダー値	GET, POST, PUT 説明 GET、POST、PUT を同時に追加するには、コンマ (,) で区切ります。
   重複の許可	いいえ 説明 許可: オリジンサーバーからのヘッダーを保持し、同じ名前の新しいヘッダーを追加します。 いいえ：重複を許可しません。オリジンサーバーからのヘッダーは、同じ名前の新しいヘッダーによって上書きされます。 このトピックでは、重複を防ぐ方法の例を示します。実際の設定は、ご利用の環境によって異なります。

設定例

例 1

CORS レスポンスヘッダーは、コンマ (,) で区切られた 1 つ以上の値に設定できます。

• リクエストの `Origin` ヘッダーの値が、設定された値のいずれかと完全に一致する場合、対応するクロスドメインヘッダーが返されます。

• 完全一致が見つからない場合、クロスドメインヘッダーは返されません。

たとえば、ApsaraVideo VOD コンソールで、Access-Control-Allow-Origin を `http://example.com,https://aliyundoc.com` に設定したとします。

• ユーザーリクエストに Origin: http://example.com ヘッダーが含まれている場合、CDN POP は Access-Control-Allow-Origin: http://example.com を返します。

• ユーザーリクエストに Origin: https://aliyundoc.com ヘッダーが含まれている場合、CDN POP は Access-Control-Allow-Origin: https://aliyundoc.com を返します。

• ユーザーリクエストに Origin: http://aliyundoc.com ヘッダーが含まれている場合、プロトコルが一致しないため、CDN POP は `Access-Control-Allow-Origin` ヘッダーを返しません。ユーザーリクエストは HTTP を使用していますが、CDN の設定は HTTPS 用です。

• ユーザーリクエストに Origin: http://aliyun.com ヘッダーが含まれている場合、ドメインが一致しないため、CDN POP は `Access-Control-Allow-Origin` ヘッダーを返しません。

例 2

CORS レスポンスヘッダーをワイルドカードドメイン名に設定した場合、システムはリクエストヘッダーの Origin の値が Access-Control-Allow-Origin に指定されたワイルドカードドメイン名と一致するかどうかをチェックします。

たとえば、ApsaraVideo VOD コンソールで、Access-Control-Allow-Origin を `http://*.aliyundoc.com` に設定したとします。

• ユーザーリクエストに Origin: http://demo.aliyundoc.com ヘッダーが含まれている場合、CDN POP は Access-Control-Allow-Origin: http://demo.aliyundoc.com を返します。

• ユーザーリクエストに Origin: http://demo.example.com ヘッダーが含まれている場合、ドメインが一致しないため、CDN POP は `Access-Control-Allow-Origin` ヘッダーを返しません。

• ユーザーリクエストに Origin: https://demo.aliyundoc.com ヘッダーが含まれている場合、プロトコルが一致しないため、CDN POP は `Access-Control-Allow-Origin` ヘッダーを返しません。ユーザーリクエストは HTTPS を使用していますが、CDN の設定は HTTP 用です。