JSONP complete source code using NodeJS, Express, and JavaScript. JSONP and a server whose response is a function call. Quote from w3schools "JSONP is a method for sending JSON data without worrying about cross-domain issues.". Here is the reference https://www.w3schools.com/js/js_json_jsonp.asp.
That made me curious, and I wanted to do it using JavaScript.
JSONP
We will need:
A client with a script:
<script src="/jsonp-static"></script>
A server with a route:
const app = require('express')();
app.get('/jsonp-static', (req, res) => {
res.send(`jsonp({ data: 'data' })`);
});
What happens?
A script targeting a request that returns a string that is a function call tries to call that function on the client.
If that function doesn't exist on the client, we get the reference error.
It appears that we "call" the client function from the server. That call happens when a script points to a request that returns a string-like function call.
Return JavaScript code from the server
The code is only text. We can transfer it however we wish. Once the script receives the code, it tries to run it.
app.get('/js-code', (req, res) => {
res.send(`
console.log(
'Hi there! A script <script src="js-code"></script> will run me'
);
function iCanDoAnything() {
// i can add an element
const body = document.getElementsByTagName('body')[0];
const h1 = document.createElement('h1');
h1.innerText = 'Daayum! I really can do anything.';
body.appendChild(h1);
}
iCanDoAnything();
`);
});
Complete source code
JSONP complete source code using NodeJS, Express, JavaScript.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JSONP Client</title>
</head>
<body>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- NOTE! -->
<!-- TO RUN THE EXAMPLE, PLACE THIS FILE IN 'public' DIRECTORY!!! -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- The definition of a function that our server calls. -->
<script>
// Try commenting out the function
// The script with src="jsonp-static" throws ReferenceError jsonp
function jsonp(data) {
console.log(data);
}
</script>
<!-- Request a server to call our function with the data. -->
<script src="jsonp-static"></script>
<!-- Inspect the server response. -->
<script>
// SyntaxError
// JSON.parse: unexpected character at line 1 column 1 of the JSON data
fetch('jsonp-static')
.then((res) => res.json())
.then(console.log)
.catch(console.error);
// Read raw response from the stream because res.json() throws an error
fetch('jsonp-static')
.then((res) => res.body.getReader())
.then((reader) => {
let res = '';
let decoder = new TextDecoder();
// Parse data from the stream
return reader.read().then(function readStream({ value, done }) {
res += decoder.decode(value);
// Keep reading data until we are done, then return data
if (done) return res;
else return reader.read().then(readStream);
});
})
.then(console.log)
.catch(console.error);
</script>
<!-- The code received from the server should run. -->
<script src="js-code"></script>
</body>
</html>
server.js
const express = require('express');
const { join } = require('path');
const app = express();
// NOTE!!!
// This is a gist, we can't use directories here.
// Make sure to place index.html in the 'public' directory.
app.use(express.static('public'));
app.get('/jsonp-static', (req, res) => {
res.send(`jsonp({ foo: 'foo' })`);
});
app.get('/js-code', (req, res) => {
res.send(`
console.log(
'Hi there! A script <script src="js-code"></script> will run me'
);
function iCanDoAnything() {
// i can add an element
const body = document.getElementsByTagName('body')[0];
const h1 = document.createElement('h1');
h1.innerText = 'Daayum! I really can do anything.';
body.appendChild(h1);
}
iCanDoAnything();
`);
});
app.listen(3000, () => console.log('server: http://localhost:3000'));
package.json
{
"version": "0.1.0",
"name": "jsonp",
"description": "Send data using html script tags",
"author": "Kostic Srecko",
"repository": {
"type": "git",
"url": "git+https://github.com/srele96/sk-experiments.git"
},
"bugs": {
"url": "https://github.com/srele96/sk-experiments/issues"
},
"scripts": {
"start": "nodemon server"
},
"dependencies": {
"express": "^4.18.1"
},
"devDependencies": {
"nodemon": "^2.0.18"
}
}
Links
- https://gist.github.com/srele96/a512f155218cf7e9482ad7d3cc673b63
- https://gist.github.com/srele96/40505f053bdd9ce45701cfe1dd74e9e7
- https://gist.github.com/srele96/3441d42c1380ea0f161d54fa730bb2a8
- https://gist.github.com/srele96/c5fd139d87960b4f7a884e046aebe994
More experiments in my GitHub repository
Top comments (4)
That's so cool! I had no idea, gonna try it out. Thanks!
you can also configure your CORS rules. just set some headers, then you do not need jsonp anymore.
I'm familiar with that method. JSONP avoids cross-domain problems for old browsers that don't support cross-domain (I've read so at least).
Do you have any resources about the topic?
PS. I did it because it looked interesting :)