CORS機能の利用

[更新: 2024年07月10日]

ウェブアクセラレータのCORS機能の利用方法に関するページです。

注意

利用上の注意事項
CORS(オリジン間リソース共有)機能は許可するオリジンによって情報漏えいなどのセキュリティ侵害が発生する可能性がありますので前提条件及び設定内容をご理解の上でご利用ください。

注意

オブジェクトストレージで利用する場合の注意事項
オリジン種別「オブジェクトストレージ」で、CORSに対応した配信を行う場合は、 オブジェクトストレージ側の「CORS設定」 ではルール設定を行わず、本機能で設定してご利用ください。

概要(CORS機能とは)

ウェブアクセラレータの登録サイトのリソース(画像などのファイル)を別のウェブサイトに共有する(※1)場合、特定のアクセス方法(※2)については、通常、同一オリジンポリシーによりアクセスが制限されます。 CORS(オリジン間リソース共有)機能を利用すると、ウェブアクセラレータに登録したサイトの配信時に、CORS設定内容に基づいて、アクセス拒否/許可を制御することができます。

許可オリジンの設定は、全オリジン許可、または個別での許可オリジンが指定できます。個別での許可オリジンの場合、最大4つまで指定できます。

※1 ウェブアクセラレータの登録サイトのリソース(画像などのファイル)を別のウェブサイトに共有する例:
 公開ドメイン img.example.jp (ウェブアクセラレータの登録サイト)のリソース(画像などのファイル)を、別のウェブサイト https://www.example.jp (CORS設定の許可オリジン)に共有する。

※2 JavaScriptやAJAXリクエストによるアクセス、Canvasでの画像取得など

前提条件

  • ウェブアクセラレータが適切に設定(DNSの設定及びステータス有効化)がされている必要があります。
  • CORS設定で指定できる許可オリジンは最大4つまでとなります。
  • GET, HEADのシンプルリクエストのみ対応しています。

設定手順

ウェブアクセラレータのCORS機能を有効にします。

1. 対象サイトの「設定」ボタンをクリックします。

画像ファイル

2. CORS(クロスオリジンリソース共有)設定 項目のチェックボックスの有効をクリックします。

画像ファイル

3. 表示されたテキストボックス(許可オリジン)にCORSを許可するオリジンを入力します。(最大4つまで追加できます)

画像ファイル

全てのオリジンに許可する場合は全オリジン許可のチェックボックスの有効をクリックします。
(この場合、個別での許可オリジンの設定はできません。)

画像ファイル

注意

許可オリジンについて
スクリプト実行等において設定したオリジンからのアクセスを許可することで、情報漏えいなどのセキュリティ侵害が発生する可能性がありますので前提条件及び設定内容をご理解の上でご利用ください。

4. 「保存」ボタンをクリックします。

画像ファイル

5. サイトの設定を変更しますか?の画面が開きますので、問題なければ「保存」ボタンをクリックします。

画像ファイル

※ 変更した内容は、「保存」ボタンをクリックした時点で反映されます。

6. 保存が正常に完了すると、以下のような画面が表示されます

画像ファイル

<ホーム画面での表示>
(個別で許可オリジンを設定している場合)

画像ファイル

(全オリジン許可が有効の場合)

画像ファイル