Acronyms, Hacking, and more Acronyms (AHA!).

Let’s briefly discuss how to use the JSONP datatype to make an AJAX request to an API that does not support CORS!

Same-origin policy is a critical security measure that prohibits a website’s scripts from accessing data across domain boundaries (i.e., data on another webpage) if they are of different origins. This protects clients from malicious scripts by restricting access to potentially sensitive data through the document object model (DOM).

Developers often need workaround techniques (read: hacks) in order to implement cross-domain requests such as Asynchronous JavaScript & XML (AJAX), which allows for dynamic and responsive single-page web applications. One of the most common workarounds is Cross-Origin Resource Sharing (CORS), which provides a standardized mechanism for performing secure data requests and transfers across different domains. While CORS is generally the standard, some APIs do not support CORS, and other methods must be used.

In the example below, we will use JavaScript Object Notation with Padding (JSONP) to work around the same-origin policy in our AJAX request to an API that does not support CORS. This is a simple one-page application that allows users to enter the name of a star, then displays an image of that star. I am an earth-scientist by education and a physics geek for life so anything astronomy-related gets me very excited! #HailSagan!

First we set up our .js by writing the document ready function and event handler for this application.

$(document).ready(function() {
  $('#search').on('submit', function() {
    var name = $('#search-name').val();

If we then make our standard AJAX request (as below) and console.log a star name entry…

$.ajax({
      url: 'http://www.strudel.org.uk/lookUP/json/?name='+name,
    })
    .done(function(data) {
      console.log(data);
    })
    .fail(function() {
      alert('error');
    })

…we receive an error message warning us that the XMLHttp request cannot load and that there is no Access-Control-Allow-Origin header is present. Cross-domain access is prohibited, therefore we need to work around the same-origin security policy.

Lets say we already know that this particular API does not support CORS. We can still work around our problem by making our AJAX request using JSONP. To do this we need to tell jQuery that we are expecting JSONP datatype, and then specify the JSONP callback function name.

$.ajax({
      url: 'http://www.strudel.org.uk/lookUP/json/?name='+name,
      dataType: "jsonp",
      jsonpCallback: "logResults"
    })
    .done(function(data) {
      console.log(data);
    })
    .fail(function() {
      alert('error');
    })

Now if we console.log the output we have the object and can navigate to the image! In this instance, the navigation path is image.src, so we complete our script with a function (outside of the document ready function) using jQuery to add the image to the preview ID, and make an if else to provide an error message if there is no result for the entry.

function logResults(json){   
  console.log(json)
  if (json.image) {
    $('#preview').html('<img src="' + json.image.src + '">')
  } else {
    $('#preview').html(json.message)
  }
}

Et voilá! We have lift-off! Carl Sagan would shed a happy tear at this most worth-while us of JSONP hacking!