Hiding Text in Images Using Plain JavaScript

Steganography is the process of concealing information in an image or any other digital artifact. Steganography is used to conceal text from unauthorized parties. With JavaScript, we can easily use steganography.js to assist us in hiding/encoding data inside images and decoding/viewing the hidden message. Let's explore how we can achieve this.

Codesandbox

The final version of this project can be viewed on Codesandbox.

Github

Check out the complete source code in this GitHub Repository.

Pre-requisites

To follow along through this article you are required to have:

Basic knowledge of HTML
Knowledge of Javascript
Some knowledge of Bootstrap

Introduction

We will be using a JavaScript library by Peter Eigenschink steganography.js to build our project. You can download the library here. This library offers two great functions to decode and encode text in images and abstracts the code behind these functions.

encode takes a message as a String and an image as Image, HTMLImageElement, or String representing the data-URL of the cover image. Returns the data-URL of the image with the encoded message inside.
decode takes an image as Image, HTMLImageElement, or String representing the data-URL of the image and returns the message which was found in the image.

1git clone https://github.com/musebe/js-stagnography

Usage

After cloning you can open the index.html file in your browser. Make sure the steganography.min.js from the library downloaded is in your js folder. Now let's examine the scripts.js file.

Writing the handleFileSelect to handle uploaded image

1function handleFileSelect(evt) {
2    var original = document.getElementById("original"),
3        stego = document.getElementById("stego"),
4        img = document.getElementById("img"),
5        cover = document.getElementById("cover"),
6        message = document.getElementById("message");
7    if(!original || !stego) return;
8    var files = evt.target.files; 
9    for (var i = 0, f; f = files[i]; i++) {
10        if (!f.type.match('image.*')) {
11            continue;
12        }
13        var reader = new FileReader();
14        reader.onload = (function(theFile) {
15            return function(e) {
16                img.src = e.target.result;
17                img.title = escape(theFile.name);
18                stego.className = "half invisible";
19                cover.src = "";
20                message.innerHTML="";
21                message.parentNode.className="invisible";
22                updateCapacity();
23            };
24        })(f);
25        reader.readAsDataURL(f);
26    }
27}

handleFileSelect(evt){...}this function first returns the elements with their specific values required for our project and stores them in appropriate variables so they can be easily referenced in our function.

1var original = document.getElementById ("original"),
2    stego = document.getElementById("stego"),
3    img = document.getElementById("img"),
4    cover = document.getElementById("cover"),
5    message = document.getElementById("message");

if the value in original and stego is null it should return nothing.
1if(!original || !stego) return;

To access the list of files where type='file' using the target.files

1var files = evt.target.files;

We are going to loop the list of files and make sure that the files we are to process are of type image

1if (!f.type.match('image.*')) {
2      continue;
3  }

To read data from an image which is a Binary Large Object(BLOB) we need to create an object of type FileReader

1var reader = new FileReader();

load is one of the events triggered in process of reading the file. When the image loads we are going to capture the information on it and set some classes to some of our elements.

1reader.onload = (function(theFile) {
2    return function(e) {
3        img.src = e.target.result;
4        img.title = escape(theFile.name);
5        stego.className = "half invisible";
6        cover.src = "";
7        message.innerHTML="";
8        message.parentNode.className="invisible";
9        updateCapacity();
10    };
11})(f);

When the uploaded file loads we want to render the uploaded image to the left to make the encoded image and the message section invisible It also checks whether the tags with an id of img and text have values and computes the number of characters in the textarea field by invoking the updateCapacity() function as shown above.
1function updateCapacity() {
2 var img = document.getElementById('img'),
3 textarea = document.getElementById('text');
4 if(img && text)
5 document.getElementById('capacity').innerHTML='('+textarea.value.length + '/' + steg.getHidingCapacity(img) +' chars)';
6 }
The Image shows what the handleFileSelect() function achieves.

Writing the hide function to encode the text

1function hide() {
2    var stego = document.getElementById("stego"),
3        img = document.getElementById("img"),
4        cover = document.getElementById("cover"),
5        message = document.getElementById("message"),
6        textarea = document.getElementById("text"),
7        download = document.getElementById("download");
8    if(img && textarea) {
9        cover.src = steg.encode(textarea.value, img);
10        stego.className = "half";
11        message.innerHTML="";
12        message.parentNode.className="invisible";
13        download.href=cover.src.replace("image/png", "image/octet-stream");
14    }
15}

hide(){...} This function also returns the elements with their specific values using the document.getElementById
If both the img and textarea values are not null we are going to encode our text inside the uploaded image.
1cover.src = steg.encode(textarea.value, img);
steganography.js provides an object called steg which we can invoke the encode method and having the text as textarea.value and image as img as arguments to the method.

To download the encoded image using HTML5 we can add the download attribute to our download button link

1<a id="download" class="btn btn-success" download="cover.png" rel="nofollow">Download</a>

We will also need to change the type of our image to an octet-stream so that when you download it with a missing extension or unknown format your system will recognize it as an octet-file(binary file).

1download.href=cover.src.replace("image/png", "image/octet-stream");

Writing the read function to encode the text

1function read() {
2    var img = document.getElementById("img"),
3        cover = document.getElementById("cover"),
4        message = document.getElementById("message"),
5        textarea = document.getElementById("text");
6    if(img && textarea) {
7        message.innerHTML = steg.decode(img);
8        if(message.innerHTML !== "") {
9            message.parentNode.className="";
10            textarea.value = message.innerHTML;
11            updateCapacity();
12        }
13    }
14}

read()This function also returns the elements with their specific values using the document.getElementById used in our read function.
If the textarea and img field has values, decode the text inside the encoded image.
1```javascript
2message.innerHTML = steg.decode(img);
3```
decode function by steganography.js decodes the encoded image and retrieves the text encoded in the image.

If the message field has a value copy it to the textarea field and this time let's make the div visible unlike we did with the two functions above.

1if(message.innerHTML !== "") {
2   message.parentNode.className="";
3   textarea.value = message.innerHTML;
4   updateCapacity();
5}

The image below shows the effect of the read function.

Deploying your application to vercel

When you have pushed your project to github, go to Vercel and sign up with github. Go to the dashboard Click new project and import your github project. Click deploy to deploy your project on Vercel. Nice! we just deployed our application to vercel. Click this link to view the deployed project.

Conclusion

In conclusion, we saw how we could encode and decode text in images using steganography.js and JavaScript. We also learned how to deploy our application on Vercel