CURRENTS ' 24

A Chat application with End-to-End Encryption

Agenda

Introduction

HTML, CSS
Javascript & DOM
NodeJS

Socket.io
Encryption and decryption

Project demonstration
What happens when you open google.com in your device
Your browser fetches the IP address for Google's servers
The browser sends an HTTP request to the server asking for the webpage
located at "google.com". This request includes information such as the type
of request being made, the browser type and version, and any cookies or
other data associated with the website.
The server recieves the request and returns the corresponding data.
This data could be HTML, CSS, JS, or JSON files.
Your browser can now render this data.
Now when you hit on search, you send a request from your device to
Google's back-end servers
These servers now process your query and send the appropriate
results back to your browser, and your browser renders it.
This is a example of a HTTP connection. You are sending a request to
another device (Google's server), the device is processing your
request and giving you an appropriate result which is rendered by
your browser.
In this case the connection made to the server is closed as soon as the
response is recieved. So no further communication can take place
between the server and the client.
 WEB SOCKET
A WebSocket is a protocol that allows for real-time, bi-directional
communication between a client and a server over a single, long-lived
connection.
In the previous case the connection between the server and the client is closed
after the response is sent. This would mean no further communication can
happen between the two devices.
But in a web-socket connection, the TCP connection is kept alive and data is
continuously shared using it.
Most modern websites use WebSockets in one way or another, but the most
prominent uses are mentioned below:
Chat apps - WhatsApp, Instagram, Twitter
Live streaming apps - Youtube, Twitch
Browser based games - slither.io, Lichess
Hyper Text Markup Language
(HTML)
HTML Introduction
 Html tags and attributes

Typical tag in html: <tagName> Content inside the tag </tagName>

Attributes:
Attributes provide additional information about elements
Attributes are always specified in the start tag and it comes in the form:

<TagName AttributeName="AttributeValue" > Content inside the Tag </TagName>

Example:
<a href="www.google.com">Take me to Google</a>

The <a> tag defines a hyperlink. The href attribute specifies the URL of the
page the link goes to.
Some Other Elements in HTML
 Classes and IDs
CLASS:
The HTML class attribute is used to specify a class for an HTML element.
Multiple HTML elements can share the same class.
 Classes and IDs
IDs:
The id attribute specifies a unique id for an HTML element. The value of the
id attribute must be unique within the HTML document.
First HTML website created-1993
Cascading Style Sheet (CSS)
CSS is the language we use to style a Web page

CSS describes how HTML elements are to be displayed on

screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web
pages all at once
CSS stands for Cascading style sheets
 The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.
Css Linking and Syntax
There are two ways of using CSS in HTML file.

1. Using <link> tag in header section of the file

1. Using <style> tag and writing the css

 Css Linking and Syntax
The selector is used to select the
elements from html and apply the css.
The name and value refers to the css
property and it's value respectively.

There can also be multiple selectors

seperated by comma.
 Types of Selectors
The classes and IDs that were used in HTML will be very useful in selecting a
group or particular element(s).
CSS Box Model
CSS Box Model

Explanation of the different parts:

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
Go to any website and right click on the screen and give inspect element.
You will see a window appearing which shows all the html, CSS and other
files of that website. Feel free to explore!!
Javascript
Introduction

Javascript is a programming language that adds interactivity to a

website.
It was invented by Brendan Eich in 1995.
Javascript is a high level, often just-in-time (JIT) compiled language.
It has dynamic typing, object-orientation, and first-class functions.
Console

In JavaScript, console.log() is a built-in function that allows you to log

messages, variables, or any other data to the browser's console.
It's commonly used for debugging purposes, as well as for general
logging and information display during development.
NodeJS

NodeJS is an open-source, cross-platform JavaScript runtime

environment that executes JavaScript code outside of a web browser.
NodeJS combined Google’s V8 JavaScript engine, an event loop, and
a low-level I/O API.
 Applications of NodeJS

NodeJS is suitable for various applications, including:

Real-time chats
Complex single-page applications
Real-time collaboration tools
Streaming apps
JSON APIs
 NodeJS Environment

NodeJS has a vibrant ecosystem with a plethora of libraries, frameworks,

and tools. These are the ones we will be using:
npm (Node Package Manager): npm is the default package manager
for Node.js. It allows developers to install, manage, and share
reusable code packages (called modules). You can find thousands of
open-source packages on the npm registry.
Socket.io: For real-time communication, Socket.io is a go-to library. It
enables bidirectional communication between the server and clients
using WebSockets or fallback mechanisms.
 Variables

There are four ways of declaring a variable in javascript which are-

Automatically
var
const
let
 Scope of Variables

These variables have boundaries beyond which they cannot be used

called scope.
Automatically declared and var variables have a global scope.
const and let variables have block scope.
Operators: Arithmetic Operators
Operators: Assignment Operators
Operators: Comparison Operators
Operators: Logical Operators
Operators: Bitwise Operators
 Data Types

Javascript has 8 data types which are-

String
Number
BigInt
Boolean
Undefined
Null
Symbol
Object
 Object Data Types

Object data type can contain-

Objects
Arrays
 Conditional Statements

There are two ways of writing conditional statements which are-

If ... else if ... else
switch case
 Iterative Statements

There are four ways for iterating through a loop which are-
for
for in
for of
while
Functions

Function is a block of code designed to perform a particular task.

It is executed when "something" invokes it (calls it).
A JavaScript function is defined with the function keyword, followed
by a name, followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar
signs (same rules as variables).
The parentheses may include parameter names separated by
commas: (parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly
brackets: {}
Document Object Model (DOM)
 Document Object Model (DOM)

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-
neutral interface that allows programs and scripts to dynamically access
and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
 HTML DOM

The HTML DOM is a standard object model and programming interface

for HTML. It defines:
The HTML elements as objects
The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add,
or delete HTML elements.
 HTML DOM Methods

A method is an action you can do (like add or deleting an HTML

element).
A property is a value that you can get or set (like changing the content
of an HTML element).
The getElementById() Method:
The most common way to access an HTML element is to use the id of the
element.
The innerHTML Property:
The easiest way to get the content of an element is by using the
innerHTML property.
HTML DOM Methods
 HTML DOM Methods

To change the style of an HTML element, use this syntax:

document.getElementById(id).style.property = new style
A JavaScript can be executed when an event occurs, like when a user
clicks on an HTML element.
To execute code when a user clicks on an element, add JavaScript code
to an HTML event attribute:
onclick=JavaScript
document.getElementById(id).onclick = Javascript;
HTML DOM Event Listeners

The addEventListener() method attaches an event handler to the

specified element.
Syntax- element.addEventListener(event, function, useCapture);
When using the addEventListener() method, the JavaScript is
separated from the HTML markup, for better readability and allows
you to add event listeners even when you do not control the HTML
markup.
You can easily remove an event listener by using the
removeEventListener() method.
 API

API stands for Application Programming Interface. There are four types of
API which are-
Web API
Browser API
Server API
Third party API
 Asynchronous Javascript

Promises-
"Producing code" is code that can take some time
"Consuming code" is code that must wait for the result
A Promise is an Object that links Producing code and Consuming code
The keyword async before a function makes the function return a
promise
The await keyword can only be used inside an async function. The
await keyword makes the function pause the execution and wait for a
resolved promise before it continues
 Encryption

Encryption is the process of converting plaintext into ciphertext to

protect it from unauthorized access.
It plays a crucial role in ensuring the security and privacy of sensitive
information in digital communication.
In an increasingly digital world, encryption is essential for
safeguarding personal data, financial transactions, and sensitive
communications.
Without encryption, data would be vulnerable to interception and
unauthorized access, leading to privacy breaches and security
threats.
WhatsApp’s E2E terms
 Working of a simple encryption

Encryption is the process of converting plaintext into ciphertext, which can only be read if
decrypted.

Encryption Process:

1. Plaintext: The original, unencrypted data that needs to be protected.

2. Encryption Algorithm: A mathematical function that converts plaintext into ciphertext
using a key.
3.Ciphertext: The encrypted form of the plaintext, which appears as a random sequence
of characters.
4.Decryption: The process of converting ciphertext back into plaintext using the
decryption key.
Output
 Symmetric encryption

Uses a single key for both encryption and decryption.

Examples include AES (Advanced Encryption Standard) and DES (Data Encryption
Standard).
Fast and efficient for encrypting large amounts of data.
Key distribution can be a challenge, as both parties need to have the same key.

The previous demo is an example of symmetric encryption

 Asymmetric encryption

Uses a pair of keys, a public key for encryption and a private key for decryption.
Examples include RSA (Rivest-Shamir-Adleman) and ECC (Elliptic Curve
Cryptography).
Provides a more secure method for key distribution, as the private key is never
shared.
Slower than symmetric encryption but more secure for exchanging keys and
securing communication.
 Using asymmetric encryption for E2E

Key Generation
When a new user joins a room, they are given a pair of public and private keys using the
jsencrypt library. These keys are used for encryption and decryption.

Sending Public Key

Upon joining, the new user sends their public key to all clients present in the room. This
allows other clients to encrypt messages intended for the new user.
 Symmetric Key Sharing
All clients except the new user have a symmetric key for encryption and decryption of
messages within the room. This symmetric key needs to be shared with the new user.

Encryption of Symmetric Key

The symmetric key is encrypted with the public key of the new user. This ensures that only the
new user can decrypt the symmetric key using their private key.
 Sharing Encrypted Symmetric Key
The encrypted symmetric key is then sent to all users in the room, including the new user.

Decryption of Symmetric Key

The new user receives the encrypted symmetric key and decrypts it using their private key.
This allows them to obtain the symmetric key for message encryption and decryption.

Generating Random Symmetric Key

If there are no users already present in the room, the new user can generate a random
symmetric key for encryption and decryption.
Socket.io
 What does Socket.io do?
It creates a persistent connection between client and the
server side, rather than creating and sending requests every
now and then
 How Websocket is DIfferent?

Traditional Fetch requests Creating a Websocket

 How Websocket is Different?

In a traditional fetch request, the client will be making

request to the server everytime it needs something
from it. But if we use Socket.io, we will be creating a
socket, which will be open throughout, and client will
be sending requests through it.
Setting up the Socket in the server side

Calling the function from the Socket Library port number

Creating a socket instance, and

establishing the connection
Setting up the Socket in the server side

In case we are not able to establish to connection due to

CORS policy, we can do the following

client address

We are mentioning the client address from where the

request will be coming from, in the form of an array
 Setting up Socket in the client side
We need to install the socket.io-client library firstly using the following command

We need to import the library into script.js

We need to create a individual socket, which connects to the server

server url
socket.on & socket.emit

on listens to events, and we can write our own

events. For example ‘connect’ here will be
running when we establish a connection.

event name parameters

emit sends events from client

side to the server side

We can call the event by its name from the

server side and call any function. Here we
printing the paramaters
Sending messages to the server using socket.emit

Client Side

Server Side
Sending messages to the server using socket.emit

Webpage Output
 Sending messages to the client from the server

Server side
sends the event, receive-message
to all the sockets including the one
which made the request

Client Side
DIsplaying the message from
the server
Sending messages to the client from the server

Server Side

socket.broadcast.emit doesn’t send the message

to the socket which made he request
 Runs in browser

Client Side JS Manipulating UI elements

Validates user inputs

Makes requests to server

 Runs in the server

Server Side JS Handles client requests

Makes Database calls

Other services
Thank you!