Tldr

Today we are discussing the most known problem of E2EE or simply End-to-End Encryption. The basic problem is the server should not store the customer data.
But if the server is storing encrypted data, wouldn't that be expensive to do encryption and decryption on every read / write?
We are discussing 2 cases here:
- WhatsApp E2EE (using Signal Protocol)
- Excalidraw E2EE (in browser) -> this is very simple and subtle

Excalidraw (E2EE)

Reference: https://plus.excalidraw.com/blog/end-to-end-encryption

Excalidraw doesn't send anything you draw to the servers. It sits in your local storage in browser. But what if you want to share that drawing of complex system design to your peer? Then you might need a way to share that drawing, right? Or you could simply export a jpeg and let the other guy import in Excalidraw. Cumbersome, isn't it?
So if I want to send data over internet, obviously I would have to store it. This means that if Excalidraw just stored the drawing based on the user and created a sharable url which the other guy can open and collaborate on, it works right? Yes, and also it's easy and what 99% others would do. But not Excalidraw.
The reason why we love excalidraw is that you don't have to sign in to create anything. You go to excalidraw.com and start drawing. That's fucking good. But if you want to share something now, then you would have to login and do stuff. Boring.
Also what if the drawing you are sharing contains design about Bin-Laden son's hideout??? You don't want it to be seen by Software Interns at Excalidraw, right?

So that's why Excalidraw needed a system, a way to encrypt every drawing you share or save. Also because they wanted to achieve SOC2, that's why they decided to do this, else nobody cares.

There are 2 things here this feature really helps with. When you are on premium, you can save your drawing, but for poor people like us we can only create one drawing per browser but we can share it.
Another thing you need to remember is any url you see which has a # in it, everything after that hashtag is not sent to the servers. It is only present at the browser level.

https://excalidraw.com/#json=5649116445016064,yOfExolZoMhtGnysT3-LWA

Here 5649116445016064,yOfExolZoMhtGnysT3-LWA is not sent to server. We'll come back to this later.

How this thing works?

You created a drawing on Excalidraw and now you want to share it with Riya, your imaginary girlfriend.
You click on SHARE and create an exportable link.
- Behind the scenes Excalidraw submits a /post request along with encrypted drawing data and sends it to server. The server returns back an ID, possibly uploadId.
- The key thing here is server is storing an encrypted blob with respect to this ID: foXPgj33unYz8UhQnbBe9

{
  data: "https://json.excalidraw.com/api/v2/foXPgj33unYz8UhQnbBe9",
  id: "foXPgj33unYz8UhQnbBe9"
}

How the drawing is mapped to encrypted blob is very simple. It is using browser crypto API to encrypt data by a pre-generated key.

const encrypted = await window.crypto.subtle.encrypt(
  { name: "AES-GCM", iv: new Uint8Array(12) /* don't reuse key! */ },
  key, // pre-generated key
  new TextEncoder().encode(JSON.stringify(content)), // encoding content
);

After that you will get an exportable link. Your link will look like this:

https://excalidraw.com/#json=foXPgj33unYz8UhQnbBe9,QzgNPUkvQOE_uHE9SacADg

Note this foXPgj33unYz8UhQnbBe9,QzgNPUkvQOE_uHE9SacADg. Here foXPgj33unYz8UhQnbBe9 is the upload id and QzgNPUkvQOE_uHE9SacADg is basically the base64 encoded key.

But now you will say if the server is aware of this key it can easily decrypt the blob / content, right? Yes, but server is not aware of it. It is stored after the #.

Now you can send your friend this link:

https://excalidraw.com/#json=foXPgj33unYz8UhQnbBe9,QzgNPUkvQOE_uHE9SacADg

What happens on the receiver end?

Your friend got the key and opened it in the browser. The upload id is taken from the url and a request to fetch content is made to the Excalidraw servers based on upload id: foXPgj33unYz8UhQnbBe9
After the data is fetched and downloaded in the UI, it will be decrypted based on that key which is shared with the request: QzgNPUkvQOE_uHE9SacADg

Conclusion

Although this is not the most secure way of sharing data, this was cute and effective lol.

Whatsapp (E2EE)

Let's get to some serious stuffs