Understanding JSON, JSONP, CORS and bypassing CORS with JSONP

August 30, 2019

JavaScript Object Notation or JSON is one of the most popular standards when it comes to requesting APIs for data. It is a widely used practice when interacting with APIs.
A sample JSON response would look like
{
    name: 'Kunal',
    age: 25
}
Do you know there is also a different version of JSON named JSONP (JSON with padding)
Wondering what is the JSONP and how is it different from JSON?
To understand the difference we will start with the introduction of CORS.

What is CORS?

CORS is an acronym for Cross-Origin Resource Sharing.
Consider you have a website named abc.com and you want to make a request to your another website named xyz.com. In JSON, you won’t be allowed to do so and you will end up with a CORS message as in the image below.

A request made from a script on the website on one domain (say abc.com)to a website on a different domain (say xyz.comis referred to as a Cross-Origin Request.
For security reasons, a Cross-Origin request is blocked by the browsers to prevent hackers from getting access to your data. As a result, we get the Cross-Origin Request Blocked message as shown in the image above.

JSONP

JSONP is an acronym for JSON with Padding. JSONP is an approach that allows requesting different domains for getting data.
Consider an endpoint xyz.com. Sending an HTTP GET request to this URL returns the following data.
url: xyz.com
HTTP GETJSON Response:
{
    name: 'Kunal',
    age: 25
}
But if we try to request the endpoint from a script on abc.com, we will get the CORS error.
However, there is an approach to overcome this problem.
Consider the Url xyz.com takes an optional parameter and returns the following code in return
url: xyz.com?wrap=myFunc
HTTP GETResponse:myFunc({
    name: 'Kunal',
    age: 25
})
The response is wrapped by a function when requested to the URL with an optional queryString parameter myFunc.
This is JSONP as the response gets wrapped in a function which can be executed directly on the HTML page.

JSONP and CORS

In an HTML page, a <script> tag does not check for cross-origin requests and that's where JSONP comes into action when requesting APIs over different origin.
Consider the above endpoint xyz.com?wrap=myFunc that returns a JSONP response. If we embed the request in a script tag, we can get the data from different origin
<head>
    
    <script>
        var myFunc = function(data) {
            console.log(data);
        }
    </script>
    <script src="xyz.com?wrap=myFunc"></script>
    
...
JSONP response will be executed directly without any parsing.
In this HTML code, we have a myFunc defined in the <script> tag and the JSONP response we get will be executed directly. As a result, we have the cross-origin request successfully made from a different domain.

Limitations of JSONP

JSONP, when executed over CORS, has the following limitations:
  • A JSONP request must be an HTTP GET request as we need to embed it in the <script> tag.
  • The response that we receive cannot be parsed and will be executed as-is by the browser.
  • There is no possible way to get the HTTP error codes when requesting JSONP data over cross-origin.


You Might Also Like

0 comments

Follow by Email