Tweet

CDNのCORS対応

CORSとは？

CORSとはCross Origin Resource Sharingの略であり、一般的には”シーオーアールエス”もしくは”コルス”と読みます。

• 規格書
  • https://www.w3.org/TR/cors/
• 目的
  • ブラウザで実行されるスクリプト（Javascriptなど）に、他サイトのリソース(API、ファイル）へのアクセスを許可する。
• 注意点
  • スクリプト実行において他サイトへのアクセスを許すと、情報漏えいなどのセキュリティ侵害が発生する可能性があります。
• もともとの制限事項（Same-Origin Policy）
  • 規格 (RFC Standard)
    •  RFC 6454 The Web Origin Concept
  • 概要
    • ブラウザに以下の制限を実装する
      • スクリプト（Javascriptなど）は、そのスクリプトが存在するサイトのリソースにしかアクセスを許さない
• プロトコルサンプル
  • https://example.jp/hello.jsがhttps://api.example.com/apiにアクセスする場合
    • hello.jsに含まれるapi.example.comへのアクセス
      • HTTP リクエスト送信
        • GET /api HTTP/1.1
        • Origin: https://example.jp
      • HTTPレスポンス
        • HTTP/1.1 200 OK
        • Access-Control-Allow-Origin: https://example.jp
    • 補足
      • ブラウザはAccess-Control-Allow-Originを見てCORS動作を許すか決定する

ユースケース

javascriptなどを使った各種アプリケーションでは、jsファイルの読み込み元とapiサーバが異なる場合に使われます。

• 動画配信
  • video.jsなどから配信サーバ上のTSファイルを読み込む
• アクセス解析
  • 解析タグからトラッキングサーバへアクセスする

CDNにおけるCORS対応

CDNにおけるCORS設定とは、CDNサーバにAccess-Control-Allow-Originヘッダを送信させることに相当します。これには以下の2種類の方法があります：

• オリジンサーバでAccess-Control-Allow-Originを付与する
  • CDNサーバはこのヘッダをキャッシュしてブラウザに送信します
• CDNのカスタムHTTPヘッダ追加機能を使用する
  • オリジンサーバの設定に関わらず、CDNサーバにAccess-Control-Allow-Originを送信させます

Tweet