DEV Community

Cover image for Send data using JSONP
Srecko Kostic
Srecko Kostic

Posted on • Updated on • Originally published at faun.pub

Send data using JSONP

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>
Enter fullscreen mode Exit fullscreen mode

A server with a route:

const app = require('express')();
app.get('/jsonp-static', (req, res) => {
  res.send(`jsonp({ data: 'data' })`);
});
Enter fullscreen mode Exit fullscreen mode

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();
  `);
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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'));
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

Links

More experiments in my GitHub repository

Top comments (4)

Collapse
 
srele96 profile image
Srecko Kostic

That's so cool! I had no idea, gonna try it out. Thanks!

Collapse
 
bias profile image
Tobias Nickel

you can also configure your CORS rules. just set some headers, then you do not need jsonp anymore.

Collapse
 
srele96 profile image
Srecko Kostic

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?

Collapse
 
srele96 profile image
Srecko Kostic

PS. I did it because it looked interesting :)