Local Node.js & JavaScript Keyboard Logger Server & Data Visualization

GitHub Repo: https://github.com/emilyplusplus/js-keylogger-data-viz

 

I wanted to come up with an interesting data analytics blog post and I started looking for data cause well… garbage in, garbage out. I wanted to start with a good solid base of semi-interesting data so I could make some cool visualizations and play with some JavaScript based charting libraries (specifically Chart.js). I wanted to do the whole thing on my local machine so that it was easily replicated and modified: no offense to the Cloud, but it adds complexity and cost that may alienate casual readers and keep them from following along. This spurred the idea in my head of using locally generated data and my mind immediately went to the plethora of available data sources just living on the computer in front of me: disk space usage, user habits, keyboard/mouse, camera, audio, etc. I landed on a simple key logger as I thought it’d meet all my criteria while being simple to build and genuinely interesting to analyze.

So I set off looking for a Node.js library to notify of key presses and found iohook (https://www.npmjs.com/package/iohook). I downloaded it, setup a simple npm/node project, and was console log printing key presses in no time. I of course also pushed code to GitHub, see link at top of article for full code base.

I had a problem though: the key codes I was getting made no sense and didn’t follow standard JS codes I was expecting. After some searching I figured out the library uses linux key codes, a side effect of how it is able to actually register key events at system level, even when not focused. See http://www.comptechdoc.org/os/linux/howlinuxworks/linux_hlkeycodes.html for more on linux key codes and a full chart. I did some copy/paste -> excel -> csv -> json magic to get the entire table into a JSON object/dictionary with minimal effort. The JSON object is defined at the top of `main.js` under the web client javascript directory: https://github.com/emilyplusplus/js-keylogger-data-viz/blob/master/web_client/js/main.js

Now I was able to log the actual key being pressed!

At first, the key logger simply recorded how many times each key had been pressed, but that only gives one measure and one dimension so I added another metric: time. I logged how long each key was pressed for in an aggregate manner so that I could calculate averages and other interesting stats. I used the time metric to calculate last press, taps, and holds to liven up the data available for visualization as well. I sprinkled in some other global data such as total server runtime etc. to figure out how much time keys are actually depressed for as a percentage.

I had to add Express.js, which is a simple web framework to create basic web applications and REST API endpoints, to the codebase as well to return the data object that retained information from the actual key logger on how many times each key had been pressed. Don’t forget to setup CORS (Cross-Origin Resource Sharing) too to allow localhost to access the aforementioned Express.js API endpoint. For more about CORS, see the following: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Next, I setup a simple web client (again trying to do everything local), to prove out the visualization using Chart.js, Vue.js, and Materialize CSS. These libraries function to allow simple charts to be made, allow two way data binding between HTML DOM and backend controller javascript, and allow easy and pre-defined styling of a web page; respectively. I simply setup a web page, added some code; most of it was boiler plate from the respective projects pages. I then added a bit of custom CSS to arrange things in a pleasing manner and out came the following, after a few iterations of course 😛

 

I am rather pleased with the result and while there is certainly room for improvement: I hope to expand UX in the future to support multiple data ingest channels (CPU, etc.) and support for richer visualizations etc. it serves as a good launching point and shows how quickly you can get some basic data ingest and visualization done using Node.js and javascript in general 🙂


Originally published at emilyplusplus.wordpress.com on March 29, 2018.

Leave a Reply

Your email address will not be published. Required fields are marked *