Forem: Karthik Raja

How HTTPS is secure?

Karthik Raja — Sun, 03 Apr 2022 16:26:24 +0000

We saw what is HTTP in another post. So now we will see
how HTTPS works.

What is HTTPS?

HTTPS means Hyper Text Transfer Protocol Secure.

Why do we need HTTPS?

To transfer data to a server securely.

Let's say you are sending some money to Alice. You are entering Alice's account number and amount in the bank website's form and clicking submit button. But what if someone who is connected to your network intercepts your request and changes Alice's account number to their account number.
Well, you will lose money if the bank's website does not have HTTPS protocol.

This type of attack is called a middle man attack. In order to prevent this type of attack, we should encrypt our data and send it to the server. The server will then decrypt data and then use it.
This encryption, decryption, and protection integrity of your data is handled by HTTPS.

How does HTTPS protect your data?

HTTPS uses Transport Layer Security (TLS) protocol to send data securely to the server.

Factoid: Transport Layer Security is the successor protocol to SSL (Secure Sockets Layer).
SSL is now obsolete and TLS is the new name for SSL protocol. Almost all websites that use
HTTPS uses TLS but everyone knows/says it is SSL.

Initially, the browser sends a handshake message to the server which contains data like the TLS version the browser supports, which cryptographic algorithm and a secret message called "client random".

Upon receiving the handshake server will send back an acknowledgment along with a digital certificate and random secret called "server random". This digital certificate contains a public key, which can be used to encrypt the messages sent to the server.

Once the client receives the digital certificate containing the public key, it will then send a secret key(premaster_secret) which is encrypted using the public key from digital certificate. Then server uses its private key to decrypt the message and will retrieve the secret. By using this client random, server random, and premaster_secret both server and client can create a secret called master secret. With this Handshake is complete. Now we have a secure secret key.

Now the form data which is sent to the server is encrypted using the master key. This master key is only known to the browser and the server. So middle man cannot decrypt your data without the secret.

What is HTTP?

Karthik Raja — Sat, 29 May 2021 17:04:02 +0000

What is HTTP?

HTTP stands for Hyper Text Transfer Protocol. Lets break it down word by word

Hyper Text - They are text which can contain link to other information. For ex: HTML pages
Transfer - to move from one place to another
Protocol - set of instructions/rules

So basically HTTP is a set of rules to transfer hyper text between web server and client.

HTTP is an application layer protocol. The application layer is the one with which users can interact. HTTP specs only define the structure of the data to be transferred and how it is actually transferred is taken care of by lower-level protocols.

HTTP uses TCP/UDP to transfer data between server and client. TCP and UDP are transport layer protocols that are responsible for transferring between devices (We will see how data is actually transferred in my next post). HTTP clients and servers communicate using requests and responses.

HTTP is a stateless protocol. It means each request is independent of another request. In other words, if a user makes multiple request servers, then it does not know that there are 4 requests made by the user, at least not according to HTTP protocol. It can be tracked by other means such as sessions, cookies, etc..,

HTTP Request Structure

A HTTP request consists of

Request line
Headers
Body (Can be optional)

Request Line

Request line consists of HTTP Version and request type.

Common request types are

GET - Used to get a resource.
POST - Used to create a resource. Most people will use this type for updating also but the convention is to use POST only for creation.
PUT - Used to update a resource.
PATCH - Used to update a resource partially.
HEAD - Used to get only headers of resources. This can be useful if we want to know the content length or accepted data format without requesting for whole data
OPTIONS - Used to see which headers are supported.
DELETE - Used to delete a resource.

Headers

These are useful if server/client wants to send additional information.

For ex: User Agent, Time etc.., can be sent in headers

Body

These are data to be transferred along with request. GET request do not have body.

Example for request is

GET / HTTP/2
Host: www.google.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br

HTTP Response Structure

A HTTP response consists of

Status Line
Headers
Body

Status Line

This contains HTTP status code that indicates the status of the request. You can see the list of status codes here

Header

This consists of additional information about the response. For ex: Content length, Content type, etc.,

Body

This contains the response body. This can be HTML page or XML or JSON etc..,

Example for HTTP response

HTTP/2 200 OK
date: Sat, 29 May 2021 16:30:20 GMT
content-type: text/html; charset=UTF-8
content-length: 35706

<!doctype html><html>.......</html>

Observer Pattern

Karthik Raja — Sun, 23 May 2021 17:21:02 +0000

Last week we learned about Strategy pattern, today we are going to see about Observer pattern.

The Observer pattern is a behavioral design pattern in which an object can have multiple dependents(can be called observers) which will get notified when the state of the object changes.

Some of the terms we need to know are

Observer - Dependents which should get notified
Observable - Object which will notify its observers

A real-world example of this pattern is magazine company subscription service. Let's say we are subscribing to a magazine. Here the magazine company is the object they will have the list of dependents (people who are subscribed to their magazine). Whenever a new magazine is published, it will be sent to all the subscribers.

Some of the technical examples of Observer pattern are

Model View Controller Pattern (Here View represents Observer and Model represents Observable)
LiveData in Android
In Social media platforms like Facebook/Twitter, a person can post or update his status and their followers will get a notification.

Lets see how we can implement this pattern in Python

class Subject(object):
    def __init__(self):
        self.observers = []

    def subscribe(self, observer):
        self.observers.append(observer)

    def unsubscribe(self, observer):
        self.observers.remove(observer)

    def notify(self, *args, **kwargs):
        for observer in self.observers:
            observer.notify(*args, **kwargs)

class EmailSender(Subject):
    pass

In the above code, we have a Subject which has methods for subscribing/unsubscribing observers. Also, we have a method called notify, whenever the user wants to send emails to his subscribers he can call this method.

Note that we have written the common code for observer pattern in a separate class called Subject . This is for reusability and for cleaner code.

class EmailObserver(object):
    def __init__(self, email):
        self.to_address = email

    def notify(self):
        self.send_email()

    def send_email(self):
        print(f"Sending email to {self.to_address}")

if __name__ == '__main__':
    email_sender = EmailSender()
    subscriber1 = EmailObserver("abc@gmail.com")
    subscriber2 = EmailObserver("efg@gmail.com")

    email_sender.subscribe(subscriber1)
    email_sender.subscribe(subscriber2)
    email_sender.notify()

    print("Unsubscribing subscriber1")
    email_sender.unsubscribe(subscriber1)
    email_sender.notify()

In the above code we have defined Observer and subscribed it to EmailSender

The above code will output the following

Sending email to abc@gmail.com
Sending email to efg@gmail.com
Unsubscribing subscriber1
Sending email to efg@gmail.com

Strategy Pattern - Design Patterns

Karthik Raja — Sun, 16 May 2021 06:33:00 +0000

In this post, I am going to talk about one of the popular design patterns - Strategy pattern. Before learning it let me give you a small introduction about what is a design pattern.

What are design patterns?

Design patterns are solutions for commonly occurring problems in software design. They heavily depend on object-oriented principles and are introduced by a group of programmers known as Gang of Four. There are totally 24 design patterns divided among categories such as

Creational patterns
Structural patterns
Behavioral patterns

Without further ado, let's see the strategy pattern.

According to Wikipedia, Strategy pattern helps in the selection of algorithm at runtime. This pattern lets the algorithm vary independently from clients that use it.

To explain the above, let me describe a most common problem and how it is handled using a strategy pattern

Problem

Let's say we are building an eCommerce application and we have multiple payment options such as credit card, debit card, PayPal, etc.., Another thing to note is we may get new payment options in the future.

For the above problem, We can create separate strategy classes for each payment option, and then finally we can create a class that would accept a payment algorithm and then let that algorithm decide how the user pays. Payment algorithm can be credit card, debit card, etc..,

The advantage in using the above approach is Whenever a new payment option comes, we can write a new payment algorithm class and then use that strategy.

Advantages

Follows clean code and Open-Closed principle
It is easy to switch between different algorithms/strategies in runtime.

Basic Implementation

Let's consider we have a list of elements which we need to sort. It should support any sorting algorithm.

from abc import ABC, abstractmethod
from typing import List

class Strategy(ABC):
    @abstractmethod
    def sort(self, elements):
        pass

class BubbleSortStrategy(Strategy):
    def sort(self, elements):
        # Sorting Logic
        print("Using Bubble Sort")
        return sorted(elements)

class InsertionSortStrategy(Strategy):
    def sort(self, elements):
        # Sorting Logic
        print("Using Insertion Sort")
        return sorted(elements)

In the above code, we created a base class Strategy that has abstract method sort . Now, whichever sorting algorithm we require should extend this class and implement the sort method. For the sake of simplicity, I have just printed which sorted algorithm we are using instead of actually sorting with that algorithm.

class Sorter(object):
    def __init__(self, elements: List):
        self.elements = elements
        self._strategy = BubbleSortStrategy()

    def set_strategy(self, strategy: Strategy):
        self._strategy = strategy

    def sort(self):
        self.elements = self._strategy.sort(self.elements)
        print(self.elements)

if __name__=='__main__':
    a = Sorter([1, 6, 3, 2, 4, 8, 5, 7])
    a.sort()  # By default this uses bubble sorting algorithm
    a.set_strategy(InsertionSortStrategy())
    a.sort()

As you see in the above code, we created a class called Sorter which has the elements to be sorted, and also it has a method set_strategy we can provide an instance of SortingStrategy as input to that during runtime. It will use the provided strategy to sort the elements.

Conclusion

This pattern helps in choosing a specific algorithm from multiple algorithms. Passport js uses this pattern to select which authentication mechanism to use when a user logs in to a web app.

What is Virtual Dom? And Why is it faster?

Karthik Raja — Sat, 16 May 2020 11:02:24 +0000

According to React docs virtual DOM is

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM

Before diving into virtual DOM, a quick intro to DOM

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web

So basically DOM is a tree structured representation of documents such as XML and HTML. We can use the DOM to add, remove or update elements in those documents.

What is virtual DOM?

Virtual DOM is a representation of the DOM. The creation of real dom will be handled by browsers. Modern frameworks like react, vue, etc.., will create a tree of elements similar to real dom in memory this is called virtual DOM.

For example:

<ul class="fruits">
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>

The above code can be represented in the virtual DOM as below.

// Virtual DOM representation
{
  type: "ul",
  props: {
    "class": "fruits"
  },
  children: [
    {
      type: "li",
      props: null,
      children: [
        "Apple"
      ]
    },
    {
      type: "li",
      props: null,
      children: [
        "Orange"
      ]
    },
    {
      type: "li",
      props: null,
      children: [
        "Banana"
      ]
    }
  ]
}

Why do we need virtual DOM?

In earlier days when SPA wasn't much popular, rendering was done on the server-side. So for every user interaction/request, the server will send a new page to render.

In the case of SPA, there will only one document and in that same document, all DOM manipulations will be done. So for complex projects, many unoptimized DOM operations might be used.

For example: Let's say we want to render list from an array. we can do it like below.

function generateList(fruits) {
    let ul = document.createElement('ul');
    document.getElementByClassName('.fruits').appendChild(ul);

    fruits.forEach(function (item) {
        let li = document.createElement('li');
        ul.appendChild(li);
        li.innerHTML += item;
    });

    return ul
}

let fruits = ['Apple', 'Orange', 'Banana']
document.getElementById('#list').innerHtml = generateList(fruits)

Now if the list changes, above method can be called again to generate list.

fruits = ['Pineapple', 'Orange', 'Banana']
document.getElementById('#list').innerHtml = generateList(fruits)

In the above code, a new list is generated and it is set in the document. The problem with this approach is only the text of single fruit is changed but a new list is generated and updated to DOM. This operation is slow in DOM. We can change the unoptimised code like below. This will reduce the number of operations in DOM.

document.querySelector('li').innerText = fruits[0]

The final result of both unoptimized and optimized code is same but the cost of unoptimized DOM operation is performance. If the size of list large then you can see the difference. This was the problem we had in older frameworks like backbone js.

So answer to our big question Why do we need virtual DOM? is to solve the above problem.

What modern frameworks like react does is whenever something is changed in the state/props, a new virtual DOM representation will be created and it will be compared with the previous one. In our example, the only change will be "Apple" to "Pineapple". Since only text is changed instead of replacing whole list react will update the DOM by the following code.

document.querySelector('li').innerText = "Pineapple"

How virtual DOM is faster than real DOM?

No, virtual DOM is not faster than the real DOM. Under the hood virtual DOM also uses real DOM to render the page or content. So there is no way that virtual DOM is faster than real dom.

Then why everyone says virtual DOM is faster? It is not that virtual DOM is faster. By using virtual DOM, we can find out what is changed and with that, we can apply only those changes to real DOM instead of replacing entire DOM.

Is Virtual DOM the only way to reduce costly DOM operations?

Not necessarily, other frameworks like ember js, angular, and svelte uses different approaches to solve the very same problem.

Conclusion

Virtual DOM is a representation of real DOM. Whenever states are changed new virtual DOM will be created and will be compared with previous virtual DOM. And then DOM operations will be applied for those specific changes. The cost of virtual DOM is calculating diff with another virtual DOM. For a big project with lots of components, diff calculation will take time. You can read more about how that is handled here.