Demystifying the WhatsApp Web/Desktop QR Code Scanning Process

3 min readOct 13, 2023

Ever wondered about the intricate dance of data and security that occurs when you scan a QR code to access WhatsApp Web or the desktop application? Let’s dissect the mechanism behind this seamless connection that bridges your mobile device and computer.

The Prelude: Initiating the Connection

URL Opening:

To kickstart the process, users open the URL https://web.whatsapp.com/ on their browsers.

2. WebSocket in Action:

As the browser loads the page with JavaScript and CSS, a WebSocket (wss://w4.web.whatsapp.com/ws) is opened.
Every 20,000 milliseconds, the WebSocket experiences traffic, triggering a QR code refresh on your screen.
The WebSocket, in essence, acts as a communication channel between the server and your browser.

The QR Code Symphony: A Unique Association

At regular intervals, the server sends a WebSocket message prompting a QR code refresh.
With each QR code refresh, your browser performs a GET request to obtain the new QR code in BASE64 encoding.
Crucially, the WebSocket established between the server and your browser is uniquely associated with the QR code. This association ensures that the server can direct traffic specifically to the WebSocket linked to a particular QR code.

Authentication Dance: Phone Reading and Contacting Servers

To complete the authentication process, you grab your authenticated mobile device.
As your mobile device reads the QR code, it contacts the WhatsApp servers, sharing your phone number (XXXX), authentication credentials (YYYYY), and confirming that the WebSocket associated with the QR code can now receive your data.
The server now knows to direct traffic to the WebSocket associated with that QR code, initiating a bidirectional flow of data.

On the WebSocket, you witness a flow of data regarding your user profile, ongoing conversations, and instructions for fetching resources such as photo thumbnails.
Your browser, in response to WebSocket instructions, makes corresponding GET requests to obtain necessary resources like thumbnails and other media.

DOM Redrawing:

Simultaneously, the WebSocket listener triggers JavaScript calls on the received files, redrawing the page’s Document Object Model (DOM) to mimic the WhatsApp app interface.

Live Interface Updates:

The interface is now dynamically updated in real-time as data flows through the WebSocket, ensuring a seamless and synchronized user experience.

Behind the Scenes: A Symphony of Security

The entire process is underpinned by robust security measures:

End-to-End Encryption:
WhatsApp’s hallmark end-to-end encryption ensures that your messages remain private and secure throughout the interaction.
Secure WebSocket Associations:
The unique association between the WebSocket and QR code ensures a secure and authorized connection between your devices.

Developer’s Insight: Live Monitoring

Using Chrome and Developer Tools, developers can witness this orchestration live. From WebSocket communication to binary frames, every step is transparent and traceable.

For a hands-on tutorial and detailed source code, explore HERE.

In conclusion, the QR code scanning process for WhatsApp Web/Desktop is not merely a visual act; it’s a sophisticated symphony of technologies ensuring a secure and fluid connection between your phone and computer. The next time you scan that QR code, appreciate the intricate choreography unfolding behind the scenes.

Happy scanning, and may your WhatsApp conversations continue to seamlessly traverse the digital realm!