2013-05-21 9 views
6

私はnew browsersをサポートする必要があります。安全なJSONPリクエストを作成することはできますか?

私はJSONPデータを提供するために外部サービスに頼る必要があります。私はそのサービスを所有しておらず、CORSを許可していません。

外部サーバーからJSONPリクエストを信頼する必要があるのは非常に気になりません。ユーザーが自分のユーザーを追跡して情報を盗むことができるようにするためです。

セキュアなJSONPリクエストを作成する方法があるのだろうかと思っていましたか?

(関連:新しいブラウザ緩和とHow to reliably secure public JSONP requests?ではなく)を

注:のI/Qは、&スタイルをそれに答え尋ね、私は他のアイデアに非常にオープンです。

答えて

11

はい!

可能です。それを行う1つの方法はWebWorkersを使用することです。 WebWorkersで実行されているコードには、ページが実行しているDOMやその他のJavaScriptコードへのアクセス権がありません。

WebWorkerを作成してJSONPリクエストを実行し、完了したら終了することができます。

  • は、ローカルコールバック

  • でJSONPリクエストをロードするために

  • 使用importScriptsを要求するURLを持つブロブからWebWorkerを作成します。

    プロセスは、このようなものですそのコールバックが実行されると、メッセージをスクリプトにポストバックし、実際のコールバックメッセージをデータとともに実行します。

こうして、攻撃者はDOMに関する情報を持たなくなります。ここで

sample implementation:この実装は、いくつかの他の問題に対処していないが、それはへのすべてのアクセスを防ぐ

jsonp("http://jsfiddle.net/echo/jsonp", { 
    "hello": "world" 
}, function (response) { 
    alert(response.hello); 
}); 

:ここ

// Creates a secure JSONP request using web workers. 
// url - the url to send the request to 
// data - the url parameters to send via querystring 
// callback - a function to execute when done 
function jsonp(url, data, callback) { 
    //support two parameters 
    if (typeof callback === "undefined") { 
     callback = data; 
     data = {}; 
    } 
    var getParams = ""; // serialize the GET parameters 
    for (var i in data) { 
     getParams += "&" + i + "=" + data[i]; 
    } 
    //Create a new web worker, the worker posts a message back when the JSONP is done 
    var blob = new Blob([ 
     "var cb=function(val){postMessage(val)};" + 
     "importScripts('" + url + "?callback=cb" + getParams + "');"],{ type: "text/javascript" }); 
    var blobURL = window.URL.createObjectURL(blob); 
    var worker = new Worker(blobURL); 

    // When you get a message, execute the callback and stop the WebWorker 
    worker.onmessage = function (e) { 
     callback(e.data); 
     worker.terminate(); 
     }; 
    worker.postMessage(getParams); // Send the request 
    setTimeout(function(){ 
     worker.terminate();//terminate after 10 seconds in any case. 
    },10000); 
}; 

はJSFiddleで動作サンプルの使用でありますDOMまたは現在のJavaScriptを使用している場合、safe WebWorker environmentを作成できます。

これはIE10 +、Chrome、Firefox、Safari、モバイルブラウザで有効です。

関連する問題