Advantages
- Worked across browsers when CORS was rare.
- No XML parsing layer; payload becomes a JavaScript value.
JSONP (JSON with Padding)
What you’ll learn
JSONP was a historical pattern for loading data from another origin before CORS was widely deployed. The browser treats the response as a script, so the same‑origin policy does not block it the way it blocks fetch of JSON.
You will see the request flow, a minimal client and server sketch, trade‑offs, and why new code should usually prefer CORS + JSON instead.
What is JSONP?
JSONP stands for JSON with Padding. The client asks the server to wrap JSON inside a global function call, for example handleData({...}). The browser loads that URL with a dynamic <script> element, executes the returned JavaScript, and your callback receives the parsed object.
This sidesteps the classic same‑origin restriction on reading cross‑origin JSON via XHR, because scripts are allowed to load cross‑origin (with important security caveats below).
How JSONP works
Three steps happen in order; the callback name is usually passed as a query parameter such as callback or jsonp.
Request flow
1
Client builds a script URL
Create a <script> element, set src to the provider endpoint, and append a query parameter naming your callback (for example ?callback=handleData).
Browser
2
Server returns JavaScript
The response body is not raw JSON; it is a small script that calls your function with the serialised data as its argument. The Content-Type is often application/javascript or legacy text/javascript.
Server
3
Callback runs with the payload
The engine executes the script in your page’s context, so handleData receives the object. Remove the script node afterwards if you create many requests.
Execute
Why teams used JSONP
- Cross‑domain reads — Third‑party APIs could expose JSONP before CORS headers were common.
- No preflight for the script tag — The pattern predates widespread
OPTIONSCORS preflight design people use withfetch. - Simple wiring — For read‑only public data, a single script tag could be enough.
1
Minimal client and server sketch
Below, the client and server agree on the callback name handleData (the reference mixed in handleResponse in prose; the code uses handleData consistently here).
Client (HTML page)
HTML
<script>
function handleData(data) {
document.getElementById('result').innerText = data.message;
}
const script = document.createElement('script');
script.src = 'https://api.example.com/jsonp-data?callback=handleData';
document.body.appendChild(script);
</script>Server (Node / Express style)
JavaScript
app.get('/jsonp-data', (req, res) => {
const callback = req.query.callback;
const data = { message: 'Hello from your server!' };
res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
res.send(`${callback}(${JSON.stringify(data)})`);
});Security warning
JSONP is remote code execution with your user’s session in scope. If an attacker controls the response, they control your page. Prefer authenticated CORS APIs, CSP, and subresource integrity for scripts you actually trust.
Pros and cons
Limitations
- GET only; no standard body or headers for writes.
- Weak error handling compared to
fetch. - Major XSS class risk if the provider is not fully trusted.
JSONP vs CORS
CORS lets the server opt in to cross‑origin reads (and other methods) using HTTP headers such as Access-Control-Allow-Origin. The browser still enforces policy, but you exchange JSON over ordinary requests instead of executing remote JavaScript.
JSONP
Script execution channel. Trust model equals “run this vendor’s code.” Good for legacy read‑only feeds you still maintain.
CORS + fetch
HTTP channel with explicit verbs, headers, and status codes. Preferred default for new APIs and SPAs.
Key takeaways
1
JSONP delivers data by returning a function call executed as a cross‑origin script.
2
Treat it as trusted code, not passive JSON; misuse enables XSS.
3
For new work, use CORS with fetch or XHR and normal JSON bodies.
Frequently asked questions
Not directly.
fetch expects a HTTP response body you parse as JSON or text. JSONP specifically relies on a <script> tag (or equivalent) executing JavaScript.No. Script tags cannot set custom headers the way
fetch can. Secrets in query strings leak via logs and Referer; avoid that pattern.JSON is a data format. JSONP is a transport hack that wraps JSON inside executable JavaScript for cross‑origin loading.
Expose JSON over HTTPS, enable CORS for trusted origins, use cookies or tokens per your threat model, and call the API with
fetch or your HTTP client of choice.Back to JSON Introduction
Review the JSON series hub and pick the next topic for your stack.
Did you know?
With JSONP the browser runs whatever JavaScript the remote server returns inside your page’s origin. That is equivalent to a full script trust relationship—only use endpoints you control or explicitly audit, and prefer CORS with JSON for new APIs.
About the author
10 people found this page helpful