The ECB penguin demo

Nothing you drop here leaves your browser. The picture is read and encrypted in this page only.

The ECB penguin shows why AES in ECB mode is a mistake. The same cipher, with the same kind of key, either hides a picture completely or leaves its outline plain as day, depending only on the mode. Load any image and compare the two results side by side. Everything is done in your browser.

What the three pictures are

All three are the same data. The left one is the original. The middle one has been encrypted with AES-128 in ECB mode and the right one with AES-128 in CBC mode, each time with a fresh random key that's thrown away. If AES worked on the whole picture at once, both would look like television static. In the ECB picture you can still see the shapes, and that's the point.

AES encrypts 16 bytes at a time. ECB ("electronic codebook") is the obvious way to handle longer data, which is to cut it into 16-byte blocks and encrypt each one separately with the same key. Encryption is deterministic, so equal blocks encrypt to equal blocks. A picture with flat areas of color has huge numbers of identical blocks (a stretch of background is the same four pixels repeated), and they all become the same scrambled block. The outline of every shape survives as a boundary between two different scrambled colors. The status line under the pictures counts it. The sample picture is 9,216 blocks of 16 bytes and only 498 of them differ, ECB produces exactly 498 different ciphertext blocks, and CBC makes all 9,216 different.

CBC ("cipher block chaining") XORs each plaintext block with the previous ciphertext block before encrypting, starting from a random initial value. Identical blocks no longer give identical ciphertext, and the result is noise, which is what encryption is supposed to look like.

It isn't really about pictures

• Any structured data leaks in ECB. Repeated records, repeated headers, runs of zeros and repeated passwords all show. An attacker sees which blocks match without needing the key.
• Blocks can be cut and pasted. Each block stands alone, so an attacker can rearrange or duplicate ciphertext blocks, and the receiver decrypts the rearranged message without complaint.
• Real systems have made this mistake. In the 2013 Adobe password breach, millions of passwords had been encrypted with 3DES in ECB mode. Users with the same password had the same ciphertext, and their hints made many of them guessable.

The fix is a mode that gives different output for equal blocks. That means CBC with a random IV, CTR, or best of all an authenticated mode such as AES-GCM, which cipher.ink uses. The article on OFB, CBC and friends compares them. To try the modes on text use the AES playground, and to see inside a single block use the round explorer.

How the demo works

The page draws or reads your picture, scales it to at most 192 pixels, and takes its raw pixel bytes, four per pixel (red, green, blue, alpha). It encrypts those bytes twice with the AES implementation in lib-aes.js, once in ECB and once in CBC, each with a random key, and shows the encrypted bytes as new pixels. Alpha is set back to fully opaque so the scrambled colors show. This is our own teaching AES, checked against the FIPS 197 test vectors and Node's OpenSSL. We wrote it because the browser's Web Crypto has no ECB mode at all, for exactly this reason.

Common questions