In this article, we will look at what is JSONP, its drawbacks, and some alternatives to JSONP.

Maybe you have encountered situations where you make API calls from one origin to another. For example, we have a page served from localhost:3000 which is calling an API from localhost:8000.

Note: We will refer to localhost:3000 as our client server. We will refer to localhost:8000 as our API server.

But we see this intimidating error.

It is the same basic policy that protects us. This policy restricts how resources from one origin interact with resources from another origin. This is an important security mechanism in browsers. But there are instances where we want to make cross-origin requests to trusted resources.

JSONP (JSON with Padding) provides an alternative solution to this same-origin policy problem. Let’s see how JSONP was created.

technical dive
We can run JavaScript code inside our HTML file with <script> tag.

We can move our JavaScript code to a separate JavaScript file and reference it with our script tag. Our webpage now makes an external network call to the JavaScript file. But functionally, everything works the same.

Javascript file should not have js extension.

Most servers allow you to set the content type. In Express, you would:

Your <script> tag may refer to a URL that does not have a js extension.

Script tags are not limited by the same-origin policy. There are other tags too, such as <img>; and &lt;video> tags, which are not limited by the same-origin policy. So our JavaScript can live on a different origin.

Code inside a JavaScript file has access to everything that is in scope. You can use previously defined functions in your HTML file.

You can pass arguments to normal function calls.

In the above example, we have passed a hard-coded string. But we can also pass the data coming from the database. Our API server can build a JavaScript file with this dynamic information.

That’s what JSONP is for. Instead of using fetch or XMLHttpRequest to make API calls to retrieve data, we used <script> tags. Since we used a &lt;script> tag, we were able to bypass the same-origin policy.

As I mentioned above, JSONP stands for JSON with Padding. What does padding mean? Normal API responses return JSON. In JSONP responses, we return the JSON response surrounded (or padded) with a JavaScript function.

Most servers allow you to specify the name of your padding function.

The server takes your padding function name as a query. It invokes your padding function with the JSON data as arguments.

You are not limited to passing a function name as your callback. You can pass inline JavaScript to your query.

I haven’t thought of any reason to do so.

Alternatives to using JSONP

There is no official specification for JSONP. I think JSONP is more of a hack.

<script> tags can only make GET requests. So JSONP can only do GET requests.

Cross-Origin Resource Sharing has an official specification, and it is the preferred way to get around the same-origin policy.

You can enable cross-origin resource sharing by adding a header to our response.

This means that all originators can access this resource without fear of the same-origin policy.

Though sometimes, you don’t have control over the server-code. You will not be able to include the Access-Control-Allow-Origin header. An alternative solution is to have your own proxy server do the cross-origin request for you. The same origin policy only applies to browsers. Servers are free to make cross-origin requests.

Leave a Reply

Your email address will not be published. Required fields are marked *