JavaScriptでのHTTP通信について

2012/01/17 22:26

このQ&Aのポイント

JavaScriptを使用して他のドメインからHTMLソースを取得する方法について調査しています。
XMLHttpRequestを使用する際に制限されるクロスドメイン通信の問題についても検討しています。
調査の結果、HTTP通信にはいくつかの方法がありますが、クロスドメイン通信に制限があることがわかりました。

javascriptでのhttp通信について

現在よく利用するサイトを見やすくしようという目的でjavascriptでのHTMLソースの取得に挑戦しています。ファイルの使用環境はデスクトップに以下のHTMLファイルを作成し、firefox9.0.1で開いています。 ↓ここからhtmlファイル ------------------------------------------------ <html> <head> <script> var HTTP={} function getSource(){ var request=new XMLHttpRequest(); request.open("GET","http://www.○○○",false); request.send(null); if(requset.status==200){ document.getElementById("source").value = request.responseText; } else{ alert("Error"); } } </script> </head> <body> <button onclick="getSource()">ソースを取得</button><br/> <textarea id="source" style="width: 100%;height: 300px;"></textarea> </body> </html> ------------------------------------------------ ↑ここまでこのようなファイルを実行し、firebugでエラーを表示したときの画像を添付します。ご覧のようにエラーコード0x80004005が出力されています。コレについて調べているうちにどうやらjavascriptでは他のドメインにあるソースを取得するクロスドメインが制限されているということでした。しかし、ロケーションプロパティを使用した以下のプログラムではしっかりとページを表示することが出来ました。 ↓ここからhtmlファイル ------------------------------------------------ <script> document.location="http://www.○○○" </script> ------------------------------------------------ ↑ここまでこれは確かではありませんが、どうやらこのlocationプロパティを使った場合もHTTP通信を行っているようです。これはクロスドメイン通信にならないのでしょうか？クロスドメインを回避する方法はいくつか紹介されていましたが、この点を理解せずに次に進む気がせず、またもしXMLHttpRequestを使用してクロスドメインを取得する方法があればご教授いただきたいと思い質問をさせていただきました。最後に質問のほうをまとめさせて頂くと 1.プログラムコードに誤りは無いか？ 2.locationプロパティは如何にして他のドメインのソースを取得しているのか？、またそれはXMLHttpRequestを使用した場合と違うのか？ 3.結局のところこの方法でページのソースは取得できるのか？、もし出来ないのなら他にどのような方法があるのか？となります。少し欲張りな感じにまとまってしまいましたｗｗどれか一つだけでもいいのでご回答よろしくお願いします。

ikasumiramen
お礼率82% (14/17)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

Gotthold
ベストアンサー率47% (396/832)

2012/01/17 23:15 回答No.1

> これは確かではありませんが、どうやらこのlocationプロパティを使った場合もHTTP通信を行っているようです。それはリンクをクリックしたら、リンク先のページを取得する為にHTTP通信するのと同じです。リンクをクリックしたのと同じくページが遷移するので、遷移前ページのJavaScriptではもう制御できませんよ？ > 2.locationプロパティは如何にして他のドメインのソースを取得しているのか？、上に書いたとおりページ遷移してしまうとその時点であなたのJavaScriptは動きませんから意味がないのでは？そもそも、クロスドメイン制約はXMLHttpRequestの制約ですから、 XMLHttpRequest以外の方法を使ったなら関係ない話です。例えば、動的なscript要素の挿入ではクロスドメイン制約はありません。（取得出来るのはJavaScriptに限りますが。）他にはiframeを使った方法もあったかと思います。

質問者

お礼 2012/01/20 12:50

今回はご回答ありがとうございました。捕捉で追加質問した件はまた後日自分の理解を深めた後に質問するかも知れません。今回の質問は多少リサーチ不足だったかも知れませんが、自分の勘違いや勉強分野の狭さに気づくきっかけになりました。また次回もよろしくお願いします。

質問者

補足 2012/01/18 00:57

お早い回答ありがとうございます。 >遷移前ページのJavaScriptではもう制御できませんよ？はい、そうですね。私もまず最初の段階としてlocationプロパティを使い、それではソースの編集が出来ないということを知り今の方法を試している次第です。 >上に書いたとおりページ遷移してしまうとその時点であなたのJavaScriptは動きませんから意味がないのでは？ >そもそも、クロスドメイン制約はXMLHttpRequestの制約ですから、 XMLHttpRequest以外の方法を使ったなら関係ない話です。都合のいい考え方ですが、もしかしたらXMLHttpRequestより低い階層での操作が存在し、それならクロスドメイン制約を回避できるのではと期待していたのですが、この回答を見る限りでは階層の違いではなく、方法そのものが違うようですね。前提となる仮説が間違っていたということでしょう。自分の中でＨＴＴＰ通信＝XMLHttpRequestという勘違いをしていたことに気づけました。実際はＨＴＴＰ通信⊃XMLHttpRequestといった感じなのですね。しかし、それではより一層locationプロパティを使ったHTTP通信の仕組みが気になりました、参考までにリンクをクリックした際のページ遷移の仕組みを教えて頂けないでしょうか？それともコレより下の階層の操作はjavascriptでは行えないのでしょうか？

その他の回答 (1)

Chaire
ベストアンサー率60% (79/130)

2012/01/19 01:56 回答No.2

スクリプトは、HTML 文書上で実行されます。スクリプトがデータを取得・設定できるのは、土台になっている HTML 文書と同じドメインのデータだけです。これを同一生成元ポリシー（Same Origin Policy）と呼びます。例えば、スクリプトが http://example.org/sample.html 上で実行されているなら、https://example.org/ のようにスキームが異なるもの、http://example.org:8118/ のようにポートの異なるもの、http://example2.org/ のようにホストの異なるもの、に属するデータを扱うことはできません。 document.location は window.location の（古い）ショートカットです。そして、window.location 自体は現在の HTML 文書に属するものですから、URI の設定は可能です。しかし、URI を設定した後のデータを、スクリプトから弄ることはできません（文書が入れ替わるので当然ですが）。 iframe を用いたときも同じです。iframe 内の location は変更可能ですが、iframe 内のデータが同一生成元でなければ、スクリプトから弄ることはできません。 --- 以上が原則論。以下、制限を緩和する方法として、・サーバ側が XMLHttpRequest Level 2 を許可しているなら、同一生成元でないデータを取得することができます。・Firefox なら netscape.security.PrivilegeManager などを使うことで、同一生成元でないデータを取得できる可能性があります。・一番手っ取り早いのは、ローカルに Web サーバを立てて CGI を経由させることです。いろいろ説明を端折りましたが、詳しくは上記のキーワードで調べてみて下さい。 --- なお、HTML の書き方に文法的誤りがあります。細かいことを抜きにすれば、 <!DOCTYPE html> <title></title> <script>...</script> だけで文法的に妥当な上、ブラウザモードの問題も生じません。省略できるものと省略できないものを書き分けて下さい。また、可能なら XHR を同期モードでなく非同期モードにした方が無難かと思います。

質問者