This is my ELI5 (explain me like I'm 5) attempt for those that need it.

Say we want to use on ourweb.com some JSON data (or any raw data really) hosted at anotherweb.com. If we were to use GET request (think XMLHttpRequest, or fetch call, $.ajax, etc.), our browser would tell us it's not allowed with this ugly error:

If only we could make plain text somehow runnable, we could grab it on runtime. We need anotherweb.com to send it as it if were code, so when it's downloaded the browser will run it. We just need two things: 1) to get the data in a way that it can be run, and 2) write some code in the client so that when the data runs, our function is called and we get to use the data.

This is a very ELI5 ("explain me like I'm 5") attempt for those that need it.

Say we are building a new website, ourweb.com, and would love to show there some JSON data (or any raw data really) that's hosted at anotherweb.com. If we were to use GET request (think XMLHttpRequest, or fetch call, $.ajax, etc.), our browser would tell us it's not allowed with this ugly error:

We're getting closer, we can pull the data but not manipulate/use it. If only we could make that plain text somehow runnable, we could grab it on runtime. We need anotherweb.com to send it as it if were code, so when it's downloaded on our visitor's browser will run it. We just need two things: 1) to get the data in a way that it can be run, and 2) write some code in the client so that when the data runs, our function is called and we get to use the data.

The trick works by using a <script> tag to load a JSON (e.g.: { "city":"Barcelona" }) from somewhere else, but wrapped in a function, the actual JSONP ("JSON with Padding"):

Receiving it in this way enables us to use the data within our tourismJSONP function. JSONP is a bad practice and not needed anymore, don't use it (read below).

This is a Content Security Policy restriction, it's designed to protect users from certain attacks. You should just configure it properly (see below).

How does the JSONP trick help us here? Well, <script> tags are not subjected to this whole server (origin¹) restriction! That's why we can load a library like jQuery or Google Maps from any server.

Here's the important point: if you think about it, those libraries are actual, runnable JS code (usually a massive function with all the logic inside). But raw data? JSON data is not code. There's nothing to run; it's just plain text.

Therefore, there's no way to handle or manipulate our precious data. The browser will download the data pointed at by our <script> tag and when processing it'll rightfully complain:

wtf is this {"city":"Barcelona"} crap we loaded? It's not code. I can't compute, syntax error!

The JSONP hack

The old/hacky way to utilize that data? If only we could make plain text somehow runnable, we could grab it on runtime. So we need anotherweb.com to send it with some logic, so when it's loaded, your code in the browser will be able to use said data. We need two things: 1) to get the data in a way that it can be run, and 2) write some code in the client so that when the data runs, this code is called and we get to use the data.

For 1) we ask the foreign server to send us the JSON data inside a JS function. The data itself is set up as that function's input. It looks like this:

tourismJSONP({"city":"Barcelona"})

which makes it JS code our browser will parse and run without complaining! Exactly like it does with the jQuery library. To receive the data like that, the client "asks" the JSONP-friendly server for it, usually done like this:

As per 2), since our browser will receive the JSONP with that function name, we need a function with the same name in our code, like this:

1. origin is defined by 3 things: protocol, port, and host. So, for example, https://web.com is a different origin than http://web.com (different protocol) and https://web.com:8081 (different port) and obviously https://thatotherweb.net (different host)

The trick works by using a <script> tag to load a JSON (e.g.: { "city":"Barcelona" }) from somewhere else, that will send us the data wrapped in a function, the actual JSONP ("JSON with Padding"):

Receiving it in this way enables us to use the data within our tourismJSONP function. JSONP is a bad practice and not needed anymore, don't use it (read at the end).

This is a Content Security Policy restriction error, it's designed to protect users from certain attacks. You should just configure it properly (see at the end).

How would the JSONP trick help us here? Well, <script> tags are not subjected to this whole server (origin¹) restriction! That's why we can load a library like jQuery or Google Maps from any server.

Here's the important point: if you think about it, those libraries are actual, runnable JS code (usually a massive function with all the logic inside). But raw data is not code. There's nothing to run; it's just plain text.

Hence, the browser will download the data pointed at by our <script> tag and when processing it'll rightfully complain:

wtf is this {"city":"Barcelona"} crap we loaded? It's not code. I can't compute!

The old JSONP hack

If only we could make plain text somehow runnable, we could grab it on runtime. We need anotherweb.com to send it as it if were code, so when it's downloaded the browser will run it. We just need two things: 1) to get the data in a way that it can be run, and 2) write some code in the client so that when the data runs, our function is called and we get to use the data.

For 1) if the foreign server is JSONP friendly we'll ask for the data like this:

So we'll receive it like this:

tourismJSONP({"city":"Barcelona"})

which now makes it JS code that we could interact with.

As per 2), we need to write a function with the same name in our code, like this:

1. origin is defined by 3 things: protocol, port, and host. So, https://web.com is a different origin than http://web.com (different protocol), also https://web.com:8081 (different port) and obviously https://thatotherweb.net (different host)

If the answers here seem confusing, maybe this will help.

JSONP is an old trick invented to bypass the security restriction that forbids us to get JSON data that is in a different website (a different origin¹) than the one we are currently browsing.

The trick works by using a <script> tag that asks for the JSON from that place, e.g.: { "user":"Smith" }, but wrapped in a function, the actual JSONP ("JSON with Padding"):

peopleDataJSONP({"user":"Smith"})

Receiving it in this form enables us to use the data within our peopleDataJSONP function. JSONP is a bad practice and not needed anymore, don't use it (read below).

How to get the data we want? Well, <script> tags are not subjected to this whole server (origin¹) restriction! That's why we can load a library like jQuery or Google Maps from any server, such as a CDN, without any errors.

wtf is this {"user":"Smith"} crap we loaded? It's not code. I can't compute, syntax error!

The old/hacky way to utilize that data? If we could make plain text somehow runnable, we could grab it on runtime. So we need anotherweb.com to send it with some logic, so when it's loaded, your code in the browser will be able to use said data. We need two things: 1) to get the data in a way that it can be run, and 2) write some code in the client so that when the data runs, this code is called and we get to use the data.

peopleDataJSONP({"user":"Smith"})

<script src="https://anotherweb.com/api/data-from-people.json?myCallback=peopleDataJSONP"></script>

function peopleDataJSONP(data){
  alert(data.user); // "Smith"
}

This is my ELI5 (explain me like I'm 5) attempt for those that need it.

JSONP is an old trick invented to bypass the security restriction in web browsers that forbids us to get data that is in a different website/server (called different origin¹) than our own.

The trick works by using a <script> tag to load a JSON (e.g.: { "city":"Barcelona" }) from somewhere else, but wrapped in a function, the actual JSONP ("JSON with Padding"):

tourismJSONP({"city":"Barcelona"})

Receiving it in this way enables us to use the data within our tourismJSONP function. JSONP is a bad practice and not needed anymore, don't use it (read below).

This is a Content Security Policy restriction, it's designed to protect users from certain attacks. You should just configure it properly (see below).

How does the JSONP trick help us here? Well, <script> tags are not subjected to this whole server (origin¹) restriction! That's why we can load a library like jQuery or Google Maps from any server.

wtf is this {"city":"Barcelona"} crap we loaded? It's not code. I can't compute, syntax error!

The old/hacky way to utilize that data? If only we could make plain text somehow runnable, we could grab it on runtime. So we need anotherweb.com to send it with some logic, so when it's loaded, your code in the browser will be able to use said data. We need two things: 1) to get the data in a way that it can be run, and 2) write some code in the client so that when the data runs, this code is called and we get to use the data.

tourismJSONP({"city":"Barcelona"})

<script src="https://anotherweb.com/api/tourism-data.json?myCallback=tourismJSONP"></script>

function tourismJSONP(data){
  alert(data.city); // "Barcelona"
}