Cross-Origin リクエスト 問題の一般的な回避手法

「プログラミング」及び「開発」関連用語集

カテゴリー: Web標準知識  閲覧数:357 配信日:2017-09-29 08:20


ポイント


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