Bart Simons

Bart Simons


Thoughts, stories and ideas.

Bart Simons
Author

Share


Tags


.net .net core Apache C# CentOS LAMP NET Framework Pretty URLs Windows Server WireGuard WireGuard.io access log add analysis android api at the same time authentication authorization automate automation azure azurerm backup bash basics batch bootstrap build capture cheat sheet chromium chroot class cli click to close code snippet command line commands compile compiling compression containers control controller controlling convert cpu usage create credentials csv csvparser curl data dd deployment desktop detect devices disable diskpart dism distributed diy docker dom changes dotnet core drivers ease of access encryption example export file transfer files fix folders generalize getting started ghost ghost.org gui guide gunicorn gzip html html tables icewarp igd imagex import inotify install installation interactive ios iphone itunes java javascript jquery json kiosk kotlin linux live load data loading screen lock screen loopback audio lxc lxd lxml macos manage manually message messages minio mirrored mod_rewrite monitor monitoring mutationobserver mysql nexmo nginx no oobe node node.js nodejs not installing notification notifications object storage on desktop one command openssl owncloud parallels parallels tools parse perfect philips hue play port forwarding portainer.io powershell processing ps-spotify python quick raspberry pi record rip ripping rsync rtmp save save data sbapplication scraping script scripting scriptingbridge scripts security send server service sharedpreferences sms songs sonos spotify spotify api spotlight ssh stack streaming streamlink studio sudo swarm swift sync sysprep system audio systemd tables terminal tracking tutorial twilio ubiquiti ubuntu ubuntu 18.04 ui code unifi unlock unsplash source upnp uptime usb tethering wallpapers wasapi website websites webview windows windows 10 without itunes without oobe workaround xaml

Interactive website tracking with NodeJS - Proof of Concept

Interactive website tracking is the future! Why do you want to aggregate static data if you can make your data dynamic? This mindset motivated me to make a small interesting proof of concept to show off the capabilities of dynamic tracking.

The development stack

I decided to make my small app in JavaScript, both for the server and client. Data transfer had to be effective, modern and bandwidth-effective, so I chose websockets over legacy AJAX technology.

I used this bootstrap form as an example:

<form>
	<div class="form-group">
		<label for="exampleInputEmail1">Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
	</div>
	<div class="form-group">
		<label for="exampleInputPassword1">Password</label>
		<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
	</div>
	<div class="form-group">
		<label for="exampleInputFile">File input</label>
		<input type="file" id="exampleInputFile">
		<p class="help-block">Example block-level help text here.</p>
	</div>
	<div class="checkbox">
		<label>
		<input type="checkbox"> Check me out
		</label>
	</div>
	<button type="submit" class="btn btn-default">Submit</button>
</form>

And the page has this client-side code:

$(document).ready(function()
{
	new Fingerprint2().get(function(result, components)
	{
		var sessionidentifier = "ID"+Date.now().toString()

		const socket = new WebSocket("ws://formstream:8080")

		var interval = 750

		var eventarray = []

		setInterval(function()
		{
			if (eventarray.length != 0)
			{
				socket.send(JSON.stringify(eventarray))
				eventarray = []
			}
		}, interval)

		$('form').on("click textInput", function(e)
		{
			var eventroot = {}
			eventroot['session'] = sessionidentifier
			eventroot['event'] = e.type
			eventroot['id'] = e.target.id
			eventroot['value'] = e.target.value
			eventroot['timestamp'] = Date.now()
			eventarray.push(eventroot)
		})
	})
})

As shown in the code sample above, I used fingerprintjs2 to create a unique browser identifier. This identifier can not be used as a personal identifier, but rather a unique anonymous identifier that matches your 'specific browser'. After a fingerprint has been generated, the script continues to run a continuous loop defined as an interval, which can be set to your desired value in a variable.

A UNIX epoch timestamp is generated for every event taking place, linked to that is every bit of event information that matters:

All this information is stored inside a JSON object. Once an event takes place, the JSON object gets pushed to the eventarray array.

Once the script reaches the end of an interval, the JSON objects stored in the eventarray get stringified and pushed to the websocket server but only in the case where there are more than 0 JSON objects available in the array, just to prevent the script from sending empty data on every interval.

The server application
var ws = require('nodejs-websocket')

var server = ws.createServer(function (conn)
{
        console.log("NEW CONNECTION!")
        conn.on("text", function (str)
        {
                console.log(str)
        })
        conn.on("close", function (code, reason)
        {
                console.log("CONNECTION CLOSED.")
        })
}).listen(8080)

The server application is quite simple, it runs on NodeJS and only requires the nodejs-websocket dependency. No big deal, as it only functions as a console application that prints the received data from the client.

Server-sided console output

Remember that this is just a proof-of-concept that just captures form events. In reality you could capture any possible event and put it in a server side database. I hope that this article was informative enough for you, stay tuned for more 👍🏽

Bart Simons
Author

Bart Simons

View Comments