Introducing Cryptstagram

[This is the long version of a post I wrote for The Barbarian Group’s tumblr.  We also got written up in Wired’s design blog, Laughing Squid, and PSFK, my first time getting such large coverage!]

Periodically at The Barbarian Group, a small team of new employees and veterans with varying skill-sets are brought together to work on Project Popcorn, a side project that embodies the inventiveness, technical skills, and values of the agency.

Within my first week as a developer for the agency, I was assigned to Project Popcorn, along with a senior art director, a senior copywriter, a creative director, and a technical director.

Cryptstagram is the resultant product of our teamwork. Cryptstagram is a web site that lets you steganographically encrypt a hidden message into any image, unlockable only with a specific password, and then apply glitchy Instagram-like filters to that image.

The National Security Agency whistleblowing story had just broken, and as a result we quickly became fixated on doing something involving cryptography and, to fulfill our artistic ambitions, on doing something involving the glitch aesthetic.

Cryptstagram-5

The glitch aesthetic is popular amongst our creatives and developers because it requires technical knowledge of formats and methods underpinning systems in order to then manipulate, pixel-push, and distort those systems towards the artist’s ambitions.

As a team we spent a lot of time discussing what tone we wanted to convey with Cryptstagram. How secure should it be end-to-end to pay respect to citizens’ cryptographic requirements and expectations of privacy? Should Cryptstagram’s filters create aesthetically-pleasing images or should they reflect entropy of input and interaction from the user? To what degree did we want Cryptstagram to be a statement about the NSA and privacy in general or just a reaction to the state of our relationship with technology?

In the end we decided on a reflective tone for Cryptstagram, emphasizing a common public desire to share stylized parts of ourselves in public but other parts of ourselves in private or semi-private. We should empower ourselves with stealth and style.

Cryptstagram-2

Cryptstagram-4

The Project Popcorn team also wanted to keep Cryptstagram open-ended, taking advantage of the fact that JavaScript is pervasive in users’ browsers and that most computation, SHA-1 encryption and decryption, and glitching can now be done with open source libraries, entirely on the client’s side, and using HTML5 Canvas. A JavaScript stack (Node.js/Express, MongoDB, and good ol’ jQuery) cached and served up via cloud services allows for rapid app development and easy deployment for a small creative team.

So, easily, a citizen could choose to encrypt her image with a message and save it without it ever touching an external server, then send that image via private means to intended recipients with a password that could be distributed in any number of ways. Or the citizen could share the image on Cryptstagram’s wall for others to see and even try to decrypt!

A perk of this open-ended design is that we can extend its utility: we (or you, via jsfiddle sandbox!) can add seasonally- or topically- themed filters for specific clients, a celebrity can release images with a password known only to fans, or people can use the Cryptstagram wall to create puzzles or scavenger hunts or just post encrypted messages publicly without drawing suspicion.

At The Barbarian Group, we’re invested in making things that are gonna be awesome, and in order to do so, we need to be just as able to wade through the technical limitations of CORS and CSRF as to create something people love to use and share online.

So, what creative uses can you come up with for Cryptstagram?