I only have to support new browsers.

I have to rely on an external service to provide JSONP data, I do not own that service and it does not allow CORS.

I feel very uneasy having to trust JSONP requests from the external server, since they can run arbitrary code on my end, which would allow them to track my users, and even steal their information.

I was wondering if there was any way to create a JSONP request that is also secure?

(Related: How to reliably secure public JSONP requests? but not with the new browser relaxation)

NOTE: I asked/answered it Q&A style, but I'm very open to other ideas.

I only have to support new browsers.

I have to rely on an external service to provide JSONP data, I do not own that service and it does not allow CORS.

I feel very uneasy having to trust JSONP requests from the external server, since they can run arbitrary code on my end, which would allow them to track my users, and even steal their information.

I was wondering if there was any way to create a JSONP request that is also secure?

(Related: How to reliably secure public JSONP requests? but not with the new browser relaxation)

NOTE: I asked/answered it Q&A style, but I'm very open to other ideas.

• javascript
• jsonp

1 Answer 1

Yes!

It is possible. One way to do it would be to use WebWorkers. Code running in WebWorkers has no access to the DOM or other JavaScript code your page is running.

You can create a WebWorker and execute the JSONP request with it, then terminate it when you're done.

The process is something like this:

• Create a WebWorker from a blob with the URL to request

• Use importScripts to load the JSONP request with a local callback

• When that callback executes, post a message back to the script, which in turn will execute the actual callback message with the data.

That way, an attacker would have no information about the DOM.

Here is a sample implementation:

//   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);
};

Here is sample usage that works in JSFiddle:

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

This implementation does not deal with some other issues but it prevents all access to the DOM or the current JavaScript on the page, one can create a safe WebWorker environment.

This should work on IE10+, Chrome, Firefox and Safari as well as mobile browsers.