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
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!