Cross-Origin Resource Sharing

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

ポイント

何れの方法も「呼ばれる側の承諾」が必要である (= サーバー側がそのように作られていなければ利用できない) 
・ 例えば「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 ファイルの中で答えを返すようにコードを記述する

リクエスト処理の流れ

Originを越えるアクセス
・ブラウザからサーバに送られるHTTPリクエストヘッダに、Originというフィールドが含まれる

「Origin内容が信頼できるWebサイト」からのリクエストのみ許可する場合には？
・HTTPレスポンスヘッダに、下記内容を追加

何れのWebサイトからも、Originを越えるアクセスを許可する場合には？
・ワイルドカードで指定することが可能(サブドメイン等の部分指定は不可)

.htaccess ファイル使用例

「http://www.yahoo.co.jp:8080」からのみ、Resource Sharing を許可
　
「http://www.yahoo.co.jp」と「http://www.google.co.jp」からのみ、Resource Sharing を許可
　
すべてのサイトから、リソースシェアリングを許可

PHP使用例

すべてのサイトから、リソースシェアリングを許可

<?php

	header("Access-Control-Allow-Origin: *");

?>

LINK

W3C 仕様書
・Cross-Origin Resource Sharing

MDN
・オリジン間リソース共有 (CORS)
・Cross-Origin Resource Sharing (CORS)