Cross-Origin Resource Sharing

ネットワークHTTP

Cross-Origin Resource Sharing とは?

 状態:-  閲覧数:1,287  投稿日:2011-05-18  更新日:2018-01-31  
略称
・「Cross-Origin Resource Sharing」の頭文字を取って、「CORS」と呼ばれる

日本語表記
・クロスオリジンリソース共有
・オリジン間リソース共有

ブラウザが「オリジン(HTMLを読み込んだサーバ)以外のサーバ」から、データを取得する仕組み
・データのアクセスを許可できるWebサイトに対してOriginを越えたアクセスを可能にする

追加の HTTP ヘッダを使用して、ユーザーエージェントが現在のサイトとは別のオリジン(ドメイン)のサーバーから選択されたリソースにアクセスする権限を得られるようにする仕組み
・ユーザーエージェントは、現在の文書のオリジンとは異なるドメイン、プロトコル、ポート番号からリソースをリクエストするとき、オリジン間 HTTP リクエストを発行する

Resource Sharing を許可するには?


サーバー側にて、アクセスコントロール情報を付加する
・サーバー側にて、Access-Control-Allow-Origin ヘッダを使用
→ 別オリジンのコンテンツから、自身のサーバのリソース読取を許可することになる

Cross-Origin リクエスト の問題

 閲覧数:247 投稿日:2017-09-29 更新日:2018-01-31 

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 リクエスト 問題の一般的な回避手法

 閲覧数:274 投稿日:2017-09-29 更新日:2018-01-31 

ポイント


何れの方法も「呼ばれる側の承諾」が必要である (= サーバー側がそのように作られていなければ利用できない) 
・ 例えば「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処理の流れ

 閲覧数:257 投稿日:2018-01-31 更新日:2018-01-31 

リクエスト処理の流れ


Originを越えるアクセス
・ブラウザからサーバに送られるHTTPリクエストヘッダに、Originというフィールドが含まれる
GET /status/89 HTTP/1.1
Origin: http://www.yahoo.co.jp

「Origin内容が信頼できるWebサイト」からのリクエストのみ許可する場合には?
・HTTPレスポンスヘッダに、下記内容を追加
HTTP/1.1 200 OK
Access-Control-Allow-Origin: www.yahoo.co.jp

何れのWebサイトからも、Originを越えるアクセスを許可する場合には?
・ワイルドカードで指定することが可能(サブドメイン等の部分指定は不可)
HTTP/1.1 200 OK
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)

Twitter検索結果。「Cross-Origin Resource Sharing」に関する最新ツイート


Same-origin policy

コメント投稿(ログインが必要)