クロスオリジンリソース共有

クロスオリジン リソース共有( CORS ) は、同一オリジン ポリシーを安全にバイパスするメカニズムです。つまり、Web ページが、その Web ページを提供しているドメインとは異なるドメインのサーバーから制限されたリソースにアクセスできるようにします。

ウェブページには、クロスオリジンの画像、スタイルシート、スクリプト、iframe、ビデオを自由に埋め込むことができます。特定の「クロスドメイン」リクエスト、特にAjaxリクエストは、同一オリジン セキュリティ ポリシーによってデフォルトで禁止されています。CORS は、ブラウザとサーバーが対話して、クロスオリジン リクエストを許可しても安全かどうかを判断する方法を定義します。^[1]これにより、純粋に同一オリジン リクエストよりも自由度と機能性が向上しますが、すべてのクロスオリジン リクエストを単に許可するよりも安全です。

CORSの仕様は、WHATWGのFetch Living Standardの一部として含まれています。^[2]この仕様では、CORSが現在ブラウザでどのように実装されているかを説明しています。 ^{[3]以前の仕様は}W3C勧告として公開されました。^[4]

JavaScript から作成された HTTP リクエストのうち、別のドメインを指す <form> タグやセーフリストに含まれていないヘッダーを使用して作成できないものについては、仕様では、ブラウザがリクエストを「プリフライト」し、HTTP OPTIONS リクエスト メソッドを使用してサーバーからサポートされているメソッドを要求し、サーバーから「承認」されたら、実際の HTTP リクエスト メソッドを使用して実際のリクエストを送信することが義務付けられています。サーバーは、リクエストとともに「資格情報」 (Cookie や HTTP 認証データを含む) を送信するかどうかをクライアントに通知することもできます。^[5]

ユーザーが http://www.example.com にアクセスし、ページが http://service.example.com からデータを取得するためにクロスオリジン リクエストを試行するとします。CORS 対応ブラウザは、次のように service.example.com へのクロスオリジン リクエストを試行します。

1. ブラウザは、親ページを提供したドメインを含む service.example.com に、追加のOrigin HTTP ヘッダーを含む GET リクエストを送信します。

   出典: http://www.example.com

2. service.example.com のサーバーは、次の 3 つの応答のいずれかを送信します。
   • 要求されたデータと、Access-Control-Allow-Originその応答内の (ACAO) ヘッダーは、オリジンからの要求が許可されていることを示します。たとえば、この場合は次のようになります。

     アクセス制御許可元: http://www.example.com

   • 要求されたデータと、Access-Control-Allow-Originすべてのドメインからの要求が許可されていることを示すワイルドカードを含む (ACAO) ヘッダー:

     アクセス制御許可元: *

   • サーバーがクロスオリジンリクエストを許可していない場合のエラーページ^[6]

ワイルドカードの同一オリジン ポリシーは、ページまたは API 応答が任意のサイトの任意のコードからアクセスできるようにする場合に適しています。Google Fontsなどのパブリック ホスティング サービスで無料で利用できるWeb フォントがその一例です。

「*」の値は、資格情報を提供する要求を許可しないという点で特別です。つまり、クロスドメイン要求でHTTP認証、クライアント側SSL証明書、またはCookieを送信することを許可しません。^[7]

CORS アーキテクチャでは、 Access-Control-Allow-Origin ヘッダーは、元の Web アプリケーション サーバー ( www.example.com ) ではなく、外部 Web サービス ( service.example.com ) によって設定されていることに注意してください。ここで、service.example.com はCORS を使用して、ブラウザーがwww.example.comを承認し、 service.example.comにリクエストを送信できるようにします。

サイトがヘッダー「Access-Control-Allow-Credentials:true」を指定している場合、サードパーティのサイトが特権アクションを実行し、機密情報を取得できる可能性があります。

特定の種類のクロスドメイン Ajax リクエストを実行する場合、CORS をサポートする最新のブラウザは、アクションを実行する権限があるかどうかを判断するために追加の「プリフライト」リクエストを開始します。クロスオリジン リクエストは、ユーザー データに影響を与える可能性があるため、このようにプリフライトされます。

オプション /
ホスト: service.example.com
出典: http://www.example.com
アクセス制御要求メソッド: PUT

service.example.com がアクションを受け入れる場合、次のヘッダーで応答する可能性があります。

アクセス制御許可元: http://www.example.com
アクセス制御許可メソッド: PUT

その後、ブラウザは実際のリクエストを行います。service.example.com がこのオリジンからのクロスサイト リクエストを受け入れない場合、OPTIONS リクエストに対してエラーが応答され、ブラウザは実際のリクエストを行いません。

CORS に関連する HTTP ヘッダーは次のとおりです。

• Origin
• Access-Control-Request-Method
• Access-Control-Request-Headers

• Access-Control-Allow-Origin
• Access-Control-Allow-Credentials
• Access-Control-Expose-Headers
• Access-Control-Max-Age
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers

CORS は、次のレイアウト エンジンに基づくすべてのブラウザーでサポートされています。

• BlinkおよびChromiumベースのブラウザ（Chrome 28+、^{[8] [9]} Opera 15+、^[8] Amazon Silk、Android 4.4+ WebView、QtのWebEngine）
• Gecko 1.9.1（Firefox 3.5、^[10] SeaMonkey 2.0 ^[11]）以上。
• MSHTML/Trident 6.0 (Internet Explorer 10) はネイティブサポートされています。^[12] MSHTML/Trident 4.0 & 5.0 (Internet Explorer 8 & 9) はXDomainRequest オブジェクトを介して部分的なサポートを提供します。^[13]
• Prestoベースのブラウザ（Opera）は、 Opera 12.00 ^[14]およびOpera Mobile 12以降でCORSを実装していますが、Opera Miniでは実装されていません。^[15]
• WebKit（最初のリビジョンは不明、Safari 4以上、^[16] Google Chrome 3以上、おそらくそれ以前）。^[17]
• Microsoft Edgeの全バージョン。^[18]

クロスオリジンサポートは、もともと2004年3月にTellme NetworksのMatt Oshry、Brad Porter、Michael BodellによってVoiceXML 2.1 ^[19]に組み込むことが提案され、VoiceXMLブラウザによる安全なクロスオリジンデータリクエストを可能にしました。このメカニズムは本質的に一般的なものであり、VoiceXMLに固有のものではないと判断され、その後実装NOTEに分離されました。^[20] W3CのWebAppsワーキンググループは、主要なブラウザベンダーの参加を得て、NOTEをW3Cワーキングドラフトとして公式化し、正式なW3C勧告のステータスに向けて軌道に乗り始めました。

2006年5月に最初のW3Cワーキングドラフトが提出されました。^[21] 2009年3月にドラフトは「Cross-Origin Resource Sharing」に改名され、 ^[22] 2014年1月にW3C勧告として承認されました。^[23]

CORS は、 JSONPパターンの現代的な代替手段として使用できます。CORS の利点は次のとおりです。

• JSONP はリクエスト メソッドのみをサポートしますがGET、CORS は他の種類の HTTP リクエストもサポートします。
• CORS を使用すると、Web プログラマーは JSONP よりも優れたエラー処理をサポートする通常のXMLHttpRequestを使用できます。
• JSONPは外部サイトが侵害された場合にクロスサイトスクリプティング（XSS）の問題を引き起こす可能性がありますが、CORSを使用すると、Webサイトが応答を手動で解析してセキュリティを強化できます。 ^[1]

JSONPの主な利点は、CORSサポート以前のレガシーブラウザ（ Opera MiniおよびInternet Explorer 9以前）でも動作できることです。CORSは現在、ほとんどの最新のWebブラウザでサポートされています。 ^[24]

• コンテンツセキュリティポリシー
• ドキュメント間のメッセージング
• クロスサイトリーク

• Fetch Living Standard（CORS の現在の仕様）
• 正しいレスポンス ヘッダーを使用して Apache に CORS を設定し、すべてを通過させる^{[ permanent dead link ‍ ]}
• さまざまな（Web）サーバーで CORS サポートを有効にするための詳細な方法情報
• HTML5 Rocks が CORS の仕組みを詳しく説明します
• オンライン CORS 誤設定スキャナ 2020-08-10 にWayback Machineでアーカイブ