Cross-Origin Resource Sharing とは？
状態:-
閲覧数:1,534
投稿日:2011-05-18
更新日:2018-01-31
略称
・「Cross-Origin Resource Sharing」の頭文字を取って、「CORS」と呼ばれる
日本語表記
・クロスオリジンリソース共有
・オリジン間リソース共有
ブラウザが「オリジン(HTMLを読み込んだサーバ)以外のサーバ」から、データを取得する仕組み
・データのアクセスを許可できるWebサイトに対してOriginを越えたアクセスを可能にする
追加の HTTP ヘッダを使用して、ユーザーエージェントが現在のサイトとは別のオリジン（ドメイン）のサーバーから選択されたリソースにアクセスする権限を得られるようにする仕組み
・ユーザーエージェントは、現在の文書のオリジンとは異なるドメイン、プロトコル、ポート番号からリソースをリクエストするとき、オリジン間 HTTP リクエストを発行する
サーバー側にて、アクセスコントロール情報を付加する
・サーバー側にて、Access-Control-Allow-Origin ヘッダを使用
→ 別オリジンのコンテンツから、自身のサーバのリソース読取を許可することになる
・「Cross-Origin Resource Sharing」の頭文字を取って、「CORS」と呼ばれる
日本語表記
・クロスオリジンリソース共有
・オリジン間リソース共有
ブラウザが「オリジン(HTMLを読み込んだサーバ)以外のサーバ」から、データを取得する仕組み
・データのアクセスを許可できるWebサイトに対してOriginを越えたアクセスを可能にする
追加の HTTP ヘッダを使用して、ユーザーエージェントが現在のサイトとは別のオリジン（ドメイン）のサーバーから選択されたリソースにアクセスする権限を得られるようにする仕組み
・ユーザーエージェントは、現在の文書のオリジンとは異なるドメイン、プロトコル、ポート番号からリソースをリクエストするとき、オリジン間 HTTP リクエストを発行する
Resource Sharing を許可するには？
サーバー側にて、アクセスコントロール情報を付加する
・サーバー側にて、Access-Control-Allow-Origin ヘッダを使用
→ 別オリジンのコンテンツから、自身のサーバのリソース読取を許可することになる
Cross-Origin リクエスト の問題
Cross-Origin リクエスト の問題とは？
Web ブラウザの制約
・ドメインをまたいだ API を実行するような JavaScript を、Web ブラウザは許可しない
・ブラウザーはセキュリティの都合で、複数のドメインからデータを引き出すことができない
あるドメイン からロードされたページ (HTML) 上から、別のドメイン上 のサービスへ接続すると、Web ブラウザーがエラーや警告を表示して接続をブロックする
・あるドメイン (例えば、programming-term.w4c.work) からロードされたページ (HTML) 上から、JavaScript などの Web ブラウザー上のプログラミング コンポーネントを使用して、別のドメイン上 (例えば、www.yahoo.co.jp) のサービスへ接続すると、Web ブラウザーがエラーや警告を表示して接続をブロックする
ドメインが二つ以上にまたがっている状態
・Webページを読み込んだ以外の『ドメイン』と通信すること
・Webページを表示したときに、複数の場所（ドメイン）からデータを持ってくるようになっている状態のこと
・Aサーバーから既に読み込んだWebページ上より、 異なるドメインのサーバー（Bサーバー）に Ajax（XMLHttpRequest）を用いてデータアクセスを行なうこと
Same-originの制約が存在している理由
セキュリティー上の弱点から守るため
・Same-origin policy
Cross-Origin リクエスト 問題の一般的な回避手法
ポイント
何れの方法も「呼ばれる側の承諾」が必要である (= サーバー側がそのように作られていなければ利用できない)
・ 例えば「programming-term.w4c.work」の ページ (HTML) 上から、JavaScript などを使用して別のドメイン上 (例えば、www.yahoo.co.jp) のサービスへ接続するには、「www.yahoo.co.jp」側での予めの処理が必要
A. XDM (Cross Document Messaging)
iframe と (HTML 5 の) postMessage を使った Cross Document Messaging による解決方法
・1.ドメイン A からロードされたページ上に、ドメイン B の ifarme を hidden で挿入
・2.親ページ (ドメイン A のページ) の JavaScript と iframe 上 (ドメイン B のページ上) の JavaScript を postMessage を使って相互通信
・3.iframe 上の JavaScript から、ドメイン B 上のサービスを呼び出す。(この場合、同じドメイン同士なので、クロス ドメイン呼び出しではない)
・4.上記の 2 と 3 の組み合わせによって、親ページ (ドメイン A のページ) の JavaScript と、ドメイン B のサービスを連携させる
B. CORS (Cross-Origin Resource Sharing)
HTML 5 の仕様を使った Cross-Origin Resource Sharing (CORS)
・「呼ばれるサーバ側」で「他のドメインからの AJAX 実行を許可する」という設定をしておけば回避可能
処理の流れ
・1.ブラウザーとサーバー間で、約束された Request / Response を使用して、そのドメインからのクロス ドメインの呼び出しを許可するか確認を行う
・2.もしサーバーが許可していれば XMLHttpRequest を使用したクロス ドメインの呼び出しを行う
C. JSONP(Json with Padding)
「HTML におけるスクリプト (script) のソース (src) は、異なるドメイン上に配置されていても参照できる」点を利用
・この仕組みを使用して、<script> タグを JavaScript などで動的に追加し、参照する .js ファイルの中で答えを返すようにコードを記述する
CORS処理の流れ
リクエスト処理の流れ
Originを越えるアクセス
・ブラウザからサーバに送られるHTTPリクエストヘッダに、Originというフィールドが含まれる
GET /status/89 HTTP/1.1
Origin: http://www.yahoo.co.jp
Origin: http://www.yahoo.co.jp
「Origin内容が信頼できるWebサイト」からのリクエストのみ許可する場合には？
・HTTPレスポンスヘッダに、下記内容を追加
HTTP/1.1 200 OK
Access-Control-Allow-Origin: www.yahoo.co.jp
Access-Control-Allow-Origin: www.yahoo.co.jp
何れのWebサイトからも、Originを越えるアクセスを許可する場合には？
・ワイルドカードで指定することが可能(サブドメイン等の部分指定は不可)
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: *
.htaccess ファイル使用例
「http://www.yahoo.co.jp:8080」からのみ、Resource Sharing を許可
Header append Access-Control-Allow-Origin: "http://www.yahoo.co.jp:8080"
「http://www.yahoo.co.jp」と「http://www.google.co.jp」からのみ、Resource Sharing を許可
Header append Access-Control-Allow-Origin: "http://yahoo.co.jp http://www.google.co.jp"
すべてのサイトから、リソースシェアリングを許可
Header append Access-Control-Allow-Origin: "*"
PHP使用例
すべてのサイトから、リソースシェアリングを許可
<?php
header("Access-Control-Allow-Origin: *");
?>
LINK
W3C 仕様書
・Cross-Origin Resource Sharing
MDN
・オリジン間リソース共有 (CORS)
・Cross-Origin Resource Sharing (CORS)