What Is JSONP? (And Why You Probably Shouldn't Use It)

Short answer

JSONP (JSON with Padding) is a 2005-era hack to load JSON data across different origins by abusing the fact that <script> tags can load resources from anywhere. The server wraps its JSON response in a function call, the browser executes the script, and your callback fires with the data. Don't use it for new code — modern CORS does the same job safely.

How it worked

Browser-side, you'd add a <script> tag pointing at the API:

<script src="https://api.example.com/data?callback=myFunc"></script>

The server returns:

myFunc({"name": "Alice", "age": 30});

Because the browser executes any script tag's content, your myFunc gets called with the data as the argument. Bypasses the same-origin policy entirely.

Why it's deprecated

• Security risk: the API is executing arbitrary JavaScript in your page. A compromised or malicious API endpoint can replace the callback with anything — full XSS via your trusted import.
• GET-only: JSONP can only do GET requests. No POST, PUT, DELETE.
• Hard to error-handle: a failed JSONP call doesn't trigger script onerror consistently. Timeout-based detection is the only option.
• Caching nightmare: the callback parameter is part of the URL, so each unique callback is a separate cache entry.

What replaced it: CORS

Modern browsers support Cross-Origin Resource Sharing — a server-side opt-in that says "JavaScript on origin X may read my responses." See the CORS glossary entry. CORS gives you all HTTP methods, proper error handling, security boundaries, and clean caching. Every modern API should support CORS.

Where you might still see JSONP

• Legacy financial / government APIs that haven't been updated
• Older WordPress / blog widgets
• Some YouTube / Vimeo metadata endpoints (gradually being removed)
• Third-party "embed this on your site" snippets from older services

Migration path

If you're maintaining a JSONP-based integration:

1. Check if the API supports CORS (fetch with no-cors will fail; with proper CORS it succeeds)
2. If yes — switch to fetch(). Done.
3. If no — proxy the call through your own backend, which fetches server-to-server (no CORS), then exposes a CORS-enabled endpoint to your frontend.

Related tools

Inspect a JSONP response (after stripping the callback wrapper): JSON formatter. Encode callback names with special characters in URL parameters: URL encoder/decoder.