1

AJAX 呼び出しを使用して URL からデータを取得しています。それは私にjsonオブジェクトを与えています。

アプリケーションを実行すると、IE でページが制御されていない情報にアクセスしているというコンフォメーションで、ページは正常に動作しています。

これは、セキュリティ上のリスクをもたらします。続けたいですか？

ただし、Firefox、Chrome、Safari などの他のブラウザでは機能しません。

何が問題なのかわからない。なぜそれが発生しているのか、問題を解決する方法を教えてください。

私のコード:

<!DOCTYPE html>
<html>
<head>
    <title>Search Engine</title>
    <script src="JS/jquery-1.4.2.min.js"></script>
    <script>
    $(document).ready(function () {
        $.support.cors = true;
        // create a script tag element
        var script = document.createElement("script");
        // set the attribute, using the URL to pass data via query parameters
        script.setAttribute("src", "http://192.168.13.111:7090/?uname=bhagirathip&wt=json&fl=*,score");
        script.setAttribute("type", "text/javascript");
        // add the script tag to the document head, forcing an HTTP request
        document.getElementsByTagName("head")[0].appendChild(script);
    });
    function Search() {
        function callbackJsonHandler(data) {
             alert(data);  // This is the JSON data
        }
    }
</script>
</head>
<body>
    <form id="form">
        <div style="text-align: center">
        <input type="search" id="searchInput" autofocus />
        <input type="button" id="btnSearch" onclick="Search()" value="Search" />
    </div>
</form>
</body>
</html>
4

2 に答える 2

2

ドメイン間でクロスドメイン AJAX 呼び出しを行うことはできません。これは、悪意のある JavaScript コードが Web ページでレンダリングされたデータをスクレイピングし、それを別のドメインの不正な Web サイトに送信するのを防ぐための、Web ブラウザーのセキュリティ機能です。

AJAX 要求を同じドメインに制限することにより、ブラウザー ベンダーは、他のソースからインポートされた JavaScript が、HTML ページが提供されたサーバー以外のサーバーにデータを送信できないようにします。

Internet Explorer ではプロンプトが表示されますが、そのようなメッセージに遭遇した賢明なユーザーは、ノーと言う可能性があります。このような警告メッセージをユーザーに提示することは、良い設計手法ではなく、アプリケーションの正当性に対する信頼を刺激しません。

ドメイン間でデータを送信できる唯一の方法は、「スクリプト タグ リモーティング」と呼ばれるブラウザー ハック手法を使用することです。これには、基本的に、同じドメイン ポリシーによって制限されていない HTML 要素を使用することが含まれます。たとえば、scriptタグは任意のサーバーに対して HTTP GET リクエストを作成できます。

// create a script tag element
var script = document.createElement("script");

// set the attribute, using the URL to pass data via query parameters
script.setAttribute("src","http://192.168.9.11/userInput/?key="+userInput);
script.setAttribute("type","text/javascript");

// add the script tag to the document head, forcing an HTTP request
document.getElementsByTagName("head")[0].appendChild(script);

この方法を使用すると、リモート サーバーにデータを送信できます。JSON データを取得するには、JavaScript 関数でラップまたはパディングし、JavaScript コードでコールバックを定義して応答を処理する必要があることに注意してください。

function callbackJsonHandler(data) {
    alert(data);  // This is the JSON data
}

また、サーバー側のコードは、コンテンツのテキスト/JavaScript を返し、ハンドラーを呼び出し、JSON を引数として渡す必要があります。

callbackJsonHandler({"key":"value","key1":"value2"});

ブラウザーが JavaScript をブラウザーにダウンロードすると、JavaScript がすぐに実行され、応答内の JSON にアクセスするためのフックが提供されます。

jQueryを使用しているので、これらのリクエストからリモート サーバーへのコールバックを処理できるように、JavaScript レスポンスの生成に使用できるjQuery JSONPまたは JSON with Paddingも確認できます。上記の設定と同様に、これが正しく機能するためには、JSONP 要求を処理するようにサーバーを設定する必要があることに注意してください。

于 2012-10-16T07:55:56.657 に答える
0

exampleA.com からドメインが exampleB.com のサーバーに HTML ドキュメントが提供されているブラウザーからクロスドメイン リクエストを行う問題に対する別の解決策は、プロキシを使用することです。

作業している HTML ドキュメントが exampleA.com から提供されていると仮定しましょう。あなたは exampleA.com を所有しており、サーバー側とクライアント側のコードにアクセスできます。一方、exampleB.com は、他の誰かが所有または管理するリモート サーバーです。exampleB.com には、exampleA.com で使用したいデータがあります。

不正なアプリが人々のデータで悪いことをするのを防ぐために実施されている同一オリジン ポリシーにより、AJAX が機能しないことはわかっています。ただし、サーバーは同じドメイン ポリシーに制限されません。これは、アプリで次のことができることを意味します。

||exampleA.com/test.html|| ---> http req --> ||exampleA.com/getData|| --http req --> ||exampleB.com/getJSON||

サーバー側: (あなたのサーバーと同じように、exampleA.com):

つまり、HTML を提供するために使用しているサーバーで、サーバーからサードパーティ サーバーへの HTTP 要求を行うコードを記述します。

// JSON URL which should be requested
$json_url = 'http://www.exampleB.com/getJSON';

// Initializing curl
$ch = curl_init( $json_url );

// Configuring curl options
$options = array(
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => array('Content-type: application/json') 
);

// Setting curl options
curl_setopt_array( $ch, $options );

// Getting results
$result =  curl_exec($ch); // Getting JSON result string

詳細については、PHP Curlを使用した JSON データの取得を参照してください。各サーバー側プラットフォームには、サーバーへの HTTP 接続を確立する機能があります。

// now, send the data in the response
HttpResponse::status(200);
HttpResponse::setContentType('application/json');
HttpResponse::setData($result);
HttpResponse::send();

PHP HTTPResponseを参照してください。繰り返しになりますが、使用している言語が何であれ、文字列からデータを返す機能が必要です。

PHP を使用していると仮定して、上記のコードを「getJSON.php」というファイルに入れます。<?phpドキュメントの開始部分と開始部分の間に空白がないことを確認してください。そうしないと、ヘッダーを設定できません。この応答を送信するためのより良い方法がある可能性がありますが、プラットフォームが指定されていないため、読者の演習として残します。

クライアント側のコード:

    var searchURL = "/getJSON.php"; //From this URL json formatted data is present.
    $.ajax({
        url: searchURL,
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            try {
               alert(data);
            }
            catch (err) {
               alert(err);
            }
        }
    });

上記の JavaScript コードでは、同じドメインの AJAX リクエストをサーバー exampleA.comに送信し、次にサーバーがユーザーに代わって exampleB.com にリクエストを送信してデータを取得すると、 exampleA.com はデータを次の場所に返します。ブラウザへの応答。

于 2012-10-18T21:10:28.333 に答える