読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

JavaScriptでブラウザ上クロスドメイン通信のための手段

javascript

JavaScriptでブラウザ上で「クロスドメイン通信」をしたい。

いくつか方法がある。

クロスドメイン通信の方法

  • JSONP : scriptタグのSRCの動的書き換えで,外部サーバを指定。
  • iframeやwindowにHTML5のWeb Messaging APIでpostMessageで通信する

上記の2つがメジャー。

ほかにも

  • iframeタグのsrcを動的に変更。
  • xhr2で通信。
  • document.domainの動的な変更。

などがある。

解説資料

javascriptでクロスドメイン対応する場合の覚書 | ミラボ
http://log.miraoto.com/2013/03/750/

  • JSONPを利用した対応(<script>タグを利用) これが一番簡単な対応かもしれない。以下の例だとjavascriptでscriptタグに後からURLを追加している


なぜJSONPだとクロスドメイン制約を超えられるのか? - 射撃しつつ前転
http://d.hatena.ne.jp/tkng/20100918/1...

  • クロスドメイン制約が重要なのは、悪意あるJavaScriptがあなたのブラウザ上で実行され、銀行などのサーバーにアクセスして機密情報を盗み出す事を防ぐためである。
  • ここでポイントになるのが、JSONPはクロスドメイン制約を回避して通信するためにわざわざサーバー側で対応が必要になるという点である。後述するが、JSONPでまともに機密情報を扱うことは不可能に近い。つまり、JSONPのAPIをわざわざ用意するということは、そこで提供される情報は機密情報ではないはずである。


PostMessageを使ったクロスドメイン通信によるメッセージの送受信とは? | Web.fla
http://the-zombis.sakura.ne.jp/wp/?p=...

  • Web Messagingの流れと解説 さて、ここからが本題ですが、メッセージを送信・受信するにはhtml5のjavascript apiを利用します。 windowオブジェクトに用意されている「postMessage」というメソッドで送信して、windowオブジェクトの「onmessage」イベントが発生して受信する流れ


ブラウザでのクロス・ドメイン通信のセキュリティ保護 − @IT
http://www.atmarkit.co.jp/fdotnet/arc...

  • 別の例としては、iframe.src プロパティがあります。iframe の外部のコードでは、iframe の src URL プロパティを読み取ることはできませんが、iframe の src URL に書き込むことはできます。したがって、iframe の外部のコードは、iframe の URL を介して iframe にデータを送信できます。


JavaScriptのクロスドメイン問題対応方法 : アシアルブログ
http://blog.asial.co.jp/897

  • JavaScriptにてクロスドメイン間の通信をする場合には、JSONPを利用して行う方法もございますが、今回はHTML5より利用できるようになった、postMessageにてクロスドメイン間のデータの通信方法についてご紹介


XMLHttpRequest Level2でクロスドメイン通信を行う(GET) - ネコとウサギとオブジェクト
https://sites.google.com/site/nekousa...

  • クロスドメインでGETを行う為にレスポンスヘッダに Access-Control-Allow-Origin を指定


galife: クロスドメイン制約 を document.domain の 変更 で 回避
http://garafu.blogspot.jp/2013/09/doc...

  • document.domain は、上位ドメインへの変更は可能ですが、他のドメインへ変更はできません。