Invisible pixel: Spyxel

Context

After seeing this video, I couldn’t resist creating my own spy pixel system.

A Spy Pixel is a small transparent digital image (often 1x1 pixel) used on some websites and/or with emails to collect user information (IP, Location, date/time, etc…).

For this small project I decided to use ExpressJS, a backend framework enabling easy development of a NodeJS server.

Realization

You need to have NodeJS installed on your development environment

Baby Version 👶

First, you’ll initialize your project:

mkdir spy-pixel
cd spy-pixel
npm init -y
npm i expressjs

Then create or use an image pixel.png and put it in your root folder

Let’s create the file index.js in your root folder:

//INFO: Import dependencies
import { fileURLToPath } from 'url';
import path from 'path';
import express from 'express';
import fs from 'fs';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const pixelPath = path.join(__dirname, '/pixel.png');

//NOTE: init express app
const app = express();
const port = 8080;

//NOTE: Routes

//INFO: Route for the default and others pages
app.get(['/', '/:id'], (req, res) => {
  //INFO: Send pixel image to Route
  res.sendFile(pixelPath);
});

//INFO: Launch app to specified port
app.listen(port, () => {
  console.log(`Server listening on port : ${port}`);
});

Then run the command:

node --watch index.js

this first code will launch a server on port 8080

This first code will launch a server on port 8080 (http://localhost:8080) and display the image you have selected.

Create a utils folder in our root folder and create the IP.js file:

//INFO: Get IP from user
export function getIpFromRequest(req) {
  let ips = (
    req.headers['cf-connecting-ip'] ||
    req.headers['x-real-ip'] ||
    req.headers['x-forwarded-for'] ||
    req.connection.remoteAddress ||
    ''
  ).split(',');

  return ips[0].trim();
}

Import your IP.js file into your index.js:

import { getIpFromRequest } from './utils/IP.js';

HINT: Add to your package.json file:

"type": "module"

Finally, add the following line to index.js:

...
app.get(['/', '/:id'], (req, res) => {
  //INFO: Send pixel image to Route
  res.sendFile(pixelPath);

  console.log(`IP: ${getIpFromRequest(req)}`);
});
...

Now every time someone views your image via e-mail or a website, you’ll receive an IP: x.x.x.x message.

Hard version 💀

Well, our first version isn’t bad, but we can do a lot better than that.

INFO: take over your previous project

First we’ll retrieve our target’s location from its IP.

Let’s add the following function in our IP.js:

//INFO: Get IP address location with geolocation-db
export async function locateIpAddress(Address) {
  const APIurl = 'http://ip-api.com/json';
  const QueryString = new URLSearchParams({
    fields: 'status,message,country,regionName,city,zip,lat,lon'
  }).toString();
  const options = {
    method: 'GET',
    headers: new Headers({
      accept: 'application/json'
    })
  };

  let json = null;
  try {
    const response = await fetch(
      `${APIurl}/${Address}?${QueryString}`,
      options
    );
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    json = await response.json();
  } catch (err) {
    if (err) throw err;
  }

  return json;
}

This function will make an HTTP request to the http://ip-api.com service. This will tell us the location of our target(s).

Modify in index.js:

import { getIpFromRequest, locateIpAddress } from './utils/IP.js';

//INFO: Route for the default and others pages
app.get(['/', '/:id'], async (req, res) => {
  //INFO: Send pixel image to Route
  res.sendFile(pixelPath);

  const userIp = getIpFromRequest(req);
  const geoInfo = await locateIpAddress(userIp);

  console.log(`IP: ${userIp}, Localisation: ${geoInfo}`);
});

Now every time someone views your image via e-mail or a website, you’ll be able to retrieve their IP and Location.

Demo

Here’s a demonstration of my more advanced version of this project, available on my Github. This version retrieves the same data as above, but will also save them in a log.txt file.

Conclusion

As a conclusion to this project, you can see how simple it is to create this kind of tool, and as we’ve seen, it would be easy to adapt our tool for use on a site or other.

WARN: Finally, I’d like to remind you that this project is intended for educational purposes only, I am in no way responsible for any illicit use of this tool.