Inspiration

I came across an article on Wired a couple weeks ago about the FBI discovering Moscow communicated with a ring of alleged spies in America by encoding instructions in otherwise innocent-looking images on public websites. They used steganography to send a hidden map of an airport without being detected. I'd heard about steganography before, but this story piqued my interest enough that I wanted to make a website where you can encode your own secret messages into your photos.

What it does

The website lets the user encode a secret message into a photo they upload, and then allows them to download the encoded photo. The user can also reupload their encoded photo to decode the secret message inside. You can share the photos between friends, and they can see what secret message lies within by uploading it to the site.

How I built it

I used ES6 modules to organize and compartmentalize my code very neatly. I used the HTML5 Canvas element to do manipulations on the pixels, allowing me to encode whatever message the user wants. I'm using GitHub Pages to host the site.

Challenges I ran into

First, I made a proof of concept, to see if this task was even possible in JavaScript with the given APIs. This amounted to a bunch of spaghetti code that I had to break up and refactor into a maintainable project. Doing so caused me to run into some errors when translating between the two programs. It's very difficult to debug code that makes heavy use of bitwise operators and large data structures.

Accomplishments that I'm proud of

I was able to learn the ES6 module syntax, and I learned how to host a local server with the npm package serve. I was also able to navigate using branches in git, which is something I'm still somewhat of a novice doing.

What I learned

I learned that you never have enough time you think you do. There's no natural resting periods. You have to go hard or go home if you wanna finish a large project during a hackathon.

What's next for Steganography

I want to add features for encoding images or other smaller files in photos as well in the future. I think that would be really cool, inception!

Built With

Share this project:
×

Updates