javascript - クロスサイト AJAX リクエスト

Question

Web サイトから別のドメインでホストされている REST Web サービスに AJAX 要求を行う必要があります。

これは Internet Explorer では問題なく動作しますが、Mozilla や Google Chrome などの他のブラウザーでは、クロスサイト AJAX 要求を禁止する、はるかに厳しいセキュリティ制限が課されます。

問題は、サイトがホストされているドメインや Web サーバーを制御できないことです。これは、REST Web サービスを別の場所で実行する必要があり、リダイレクトメカニズムを配置できないことを意味します。

非同期呼び出しを行う JavaScript コードは次のとおりです。

var serviceUrl = "http://myservicedomain";
var payload = "<myRequest><content>Some content</content></myRequest>";
var request = new XMLHttpRequest();
request.open("POST", serviceUrl, true); // <-- This fails in Mozilla Firefox amongst other browsers
request.setRequestHeader("Content-type", "text/xml");
request.send(payload);

Internet Explorer 以外の他のブラウザーでこれを機能させるにはどうすればよいですか?

score 14 · Accepted Answer

おそらくJSONPが役立つでしょう。

NB xml の代わりに json を使用するようにメッセージを変更する必要があります

編集

flickr やtwitterなどの主要なサイトは、コールバックなどで jsonp をサポートしています

score 5 · Accepted Answer

回答としてマークされた投稿は誤りです: iframes ドキュメントは親にアクセスできません。同じオリジンポリシーは、両方の方法で機能します。

実際のところ、xmlhttprequest を使用して REST ベースの Web サービスを使用することは、まったく不可能です。別のドメインから (フレームワークなしで) データをロードする唯一の方法は、JSONP を使用することです。他のソリューションでは、独自のドメインに配置されたサーバー側のプロキシ、またはリモートドメインに配置されたクライアント側のプロキシと、ドキュメント間で通信するためのある種のクロスサイト通信 ( easyXDM など) が必要です。

score 3 · Accepted Answer

あまり明確ではない (しかし機能する) 回避策は、別のサイトへのリクエストのコンテナーとして iframe を使用することです。問題は、親が iframe のコンテンツにアクセスできず、iframe の「src」属性のみをナビゲートできることです。ただし、iframe コンテンツは親のコンテンツにアクセスできます。

そのため、iframe のコンテンツが認識している場合、親ページで JavaScript コンテンツを呼び出したり、親の DOM に直接アクセスしたりできます。

編集: サンプル:

function ajaxWorkaroung() {
    var frm = gewtElementById("myIFrame")
    frm.src = "http://some_other_domain"
}
function ajaxCallback(parameter){
    // this function will be called from myIFrame's content
}

score 3 · Accepted Answer

これが IE で機能するという事実は、機能ではなく、IE のセキュリティ上の問題です。

残念ながら、クロスサイトスクリプティングは禁止されており、受け入れられている回避策は、独自のドメインを介してリクエストをプロキシすることです。サーバー側のコードを追加または変更する能力が本当にないのでしょうか?

さらに、スクリプトタグを介したデータの取得を含む二次的な回避策は、SOAPサービスでハッキングできるGETリクエストのみをサポートしますが、RESTfulサービスへのPOSTリクエストではそれほどサポートしません.

AJAX ソリューションが存在するかどうかはよくわかりません。<form> ソリューションに戻る可能性があります。

score 2 · Accepted Answer

サービスドメインがクロスオリジンリソースシェアリング (CORS) を受け入れるようにします。

典型的なシナリオ: ほとんどの CORS 準拠のブラウザーは、最初に OPTIONS ヘッダーを送信します。これに対して、サーバーは、受け入れられるヘッダーに関する情報を返す必要があります。ヘッダーが、提供されたリクエストに対するサービスの要件 (許可されているメソッドは GET と POST、Allowed-Origin * など) を満たしている場合、ブラウザーは適切なメソッド (GET、POST など) を使用してリクエストを再送信します。

ここから先はすべて、IE を使用している場合と同じです。つまり、同じドメインに投稿している場合です。

Caviots: 一部のサービス開発 SDK (特に WCF) はリクエストを処理しようとします。その場合、OPTIONS メソッドを前処理してリクエストに応答し、サーバーでメソッドが 2 回呼び出されるのを避ける必要があります。

要するに、問題はサーバー側にあります。

編集CORSが完全に実装されていないという点で、IE 9以下には1つの問題があります。幸いなことに、この問題は、サーバー側のコードからサービスへの呼び出しを行い、サーバーを介して返されるようにすることで解決できます (例: mypage.aspx?service=blah&method=blahblah&p0=firstParam=something)。ここから、サーバー側コードはリクエスト/レスポンスストリームモデルを実装する必要があります。

score 1 · Accepted Answer

元のドメインでサーバー側のプロキシを使用するだけです。例を次に示します: http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html

score 0 · Accepted Answer

もう 1 つのオプションは、独自のドメインに CNAME レコードをセットアップして、リモートドメインのホスト名を「マスク」することです。

score 0 · Accepted Answer

これは、正しい引数で curl を呼び出し、curl 出力を返す Web サーバーセットアップローカルを使用して行うこともできます。

app.rb

require 'sinatra'
require 'curb'

set :views,lambda {"views/"+self.name.to_s.downcase.sub("controller","")}
set :haml, :layout => :'../layout', :format => :html5, :escape_html=>true
disable :raise_errors

get '/data/:brand' do
  data_link =  "https://externalsite.com/#{params[:brand]}"
  c = Curl::Easy.perform(data_link)
  c.body_str
end

ajax リクエストを localhost:4567/data/something に送信すると、externalsite.com/something から結果が返されます。

javascript - クロスサイト AJAX リクエスト

8 に答える 8

Related

Reference