Skip to main content

JSONP Demo

JSONP (JSON with padding) represents a traditional method used to retrieve JSON data across different domains. This technique enables web applications to circumvent the Same-Origin Policy (SOP), facilitating interaction with APIs located on external domains. This is especially useful for building secure widgets and integrating with third-party services. It leverages the inherent trust browsers place in script elements from trusted sources. It's important to recognize that CORS (Cross-Origin Resource Sharing) also serves as a well-established alternative to JSONP.

How JSONP works?​

  1. The client-side script generates a unique callback function name.
  2. The JavaScript on the web page creates a new script element with a source URL pointing to the target API endpoint on another domain. This URL includes the callback function name as a query parameter.
  3. The browser fetches the script element from the external domain.
  4. The API server receives the request and returns JSON data wrapped with the callback function name. This essentially "tricks" the browser into treating the data as part of the JavaScript itself.
  5. When the JavaScript is loaded, the browser executes the received code, which essentially becomes the callback function with the JSON data as an argument.

JSONP helps overcome the following limitations imposed by the Same-Origin Policy:

  • Limited data access: Developers cannot directly access data from APIs hosted on different domains using standard AJAX techniques. JSONP allows them to fetch and utilize this data indirectly through callback functions.
  • Integration with external services: Many web applications rely on external services for functionalities like weather data, social media feeds, and payment processing. JSONP enables seamless integration with these services, regardless of their domain.
  • Dynamic content loading: JSONP allows for dynamic loading of content and data from external sources, enhancing the interactivity and functionality of web pages.

Example Data and Use Case​

Imagine you're building a weather widget that displays real-time temperature data. You need to fetch this data from a third-party API located on another domain. However, due to the Same-Origin Policy, your application cannot directly access the API.

Here's the sample code to understand JSONP.

JSONP Endpoint in Beeceptor

With Beeceptor, it is easy to build mock endpoints for various API protocols, including JSONP. You can follow the steps below to build a dynamic mock to emit JSONP script in the HTTP response.

  1. Create a new endpoint on Beeceptor.
  2. On the endpoint page, click on Mocking Rules.
  3. In the rules management dialog box, click on Create rule.
  4. Enter the following in the Response Body text box. 
    {{queryParam 'callback'}}({
    "temperature": 22.5,
    "unit": "°C"
    })
  5. Click on Enable dynamic mock responses and ensure it is checked. Here, you can see that we are building a dynamic mock, where a parameter's value from query-string will be picked and sent in the response.
  6. Click on the Save Rule.
  7. Copy the endpoint URL and use in the following script.js code.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weather Widget</title>
</head>
<body>
    <div id="weather-widget"></div>
    <script src="script.js"></script>
</body>
</html>

Javascript (script.js)

function getWeatherData(callback) {
  const script = document.createElement('script');
  script.src = `https://jsonp-example-demo.free.beeceptor.com/jsonp-sample-endpoint?callback=${callback}`;
  document.head.appendChild(script);    // Push the script tag in the DOM.
}

function handleWeatherData(data) {
  // Update the weather widget with the received data
  const weatherWidget = document.getElementById('weather-widget');
  weatherWidget.innerHTML = `Temperature: ${data.temperature}°C`;
}
getWeatherData('handleWeatherData');

This code demonstrates the following:

  1. The getWeatherData() function takes a callback function name as a parameter.
  2. A script element is dynamically created with the source URL pointing to the mock JSONP endpoint. A callback function name is appended to the URL as a query parameter.
  3. The script element is added to the document head (HTML DOM).
  4. When the script loads, the mock API server responds with JSON data wrapped with the callback function name. Such data is called JSON With Padding.
  5. The callback handleWeatherData(...) function is invoked by the browser with the received data as an argument.
  6. The callback function updates the weather widget with the temperature value.

Refer to this Codepen sandbox to try this code.

JSONP Concerns & Limitations​

Implementation and usage of JSONP comes with some limitations. You need to pick this for a use-case where

  • Security vulnerabilities: Since JSONP relies on dynamically executing script elements, it can be susceptible to XSS (Cross-Site Scripting) attacks if proper validation and security measures are not implemented.
  • Limited data types: JSONP can only handle simple data types like strings, objects, and arrays. More complex data structures require additional processing or alternative solutions.
  • GET request limitation: JSONP only supports GET requests, which can be restrictive for certain scenarios requiring other HTTP methods.

CORS As An Alternative​

It's important to note, the CORS (Cross-Origin Resource Sharing) is a modern alternative. CORS offers several advantages over the JSONP pattern:

  • Improved Security: A notable drawback of JSONP is its vulnerability to cross-site scripting (XSS) attacks, especially if the external data source is compromised. CORS addresses this security concern by allowing web developers to manually parse responses/data, and not give away execution control.
  • Versatile HTTP Request Methods: Unlike JSONP, which is limited to GET requests, CORS supports a variety of HTTP request methods.
  • Enhanced Error Handling with XMLHttpRequest: CORS enables the use of XMLHttpRequest, a standard web programming tool. The XMLHttpRequest provides more sophisticated error handling capabilities, which is missing in JSONP.