DEV Community: Parth Patil

Understanding modern cryptography

Parth Patil — Sun, 03 Oct 2021 09:00:53 +0000

Humans have always been concerned when it comes to trusting others. One of the most troubling trust concern for humans is the secure and uninterrupted passing of messages from one person to another. "What if my message was intercepted and read by someone", "What if my message was intercepted and modified by someone" are just a couple of questions that come to mind.

We have been coming up with ways to secure our messages from ancient times and we have finally achieved a high standard of security for sending messages. This high standard of security doesn't seem hackable in the near future. And thus this article focuses on explaining this standard which we call Modern cryptography or Public key cryptography

In most of the examples you will come across while studying cryptography, you will find these 2 names "Alice" and "Bob". Alice and Bob are fictional characters who are often used as placeholders for real people in discussions and examples about cryptography. Alice and Bob are 2 people trying to securely communicate with each other, while let's say another person "Darth" is trying to intercept and read/modify their communication. We will be using these 3 characters, Alice, Bob and Darth for the examples in this article as well.

What is cryptography?

Cryptography is the study of techniques for secure communication. These techniques are based on mathematical theorems and proof, but don't worry you don't need to have a background in maths at all for this article and nor am I going to be explaining those boring theorems.

In cryptography, a key is a piece of information (a number or a string) used for scrambling data so that it appears random

Modern cryptography tries to solve 2 problems:

Making sure that the message isn't read by someone in the middle. Let's call this "someone", the middleman
Making sure that the message isn't modified by a middleman.

Basic cryptography, a brief introduction

The most basic and one of the oldest forms of cryptography was the Caesar Cipher, named due to being used by the Roman ruler, Julius Caesar to communicate confidential messages to his generals.

It is a type of substitution cipher (think of a cipher as a crypto algorithm) in which each letter in the plaintext is 'shifted' a certain number of places down the alphabet. This certain number is known as the key. For example, with a key of 1, A would be replaced by B, B would become C, M would become N, Z would become A and so on.

If the key is 1, the message abc would be encrypted to bcd

For the message retreat and for the key 1, the encrypted message would be sfusfbu.

For the key 2 the encrypted message for retreat would be tgvtgcv and so on.

You can play around with the Caesar cipher at this link.

Obviously, this method of cryptography is not the most secure way of communication.

Cons of the Caesar Cipher

You will need to share the key between your "generals" securely without anyone else knowing about that key because anyone with that key and an understanding of the cipher can easily decrypt the message.
A key can only be a number from 1 to 25 since there are only 26 letters in the alphabet. If you think about it a key of 27 is nothing but a key of 1, a key of 28 is actually a key of 2 and so on. Thus a hacker can easily decrypt the message with a combination of guessing, luck and trial and error.

Below is an image of the Caesar cipher in action, with a key of 2

The Caesar cipher is a form of symmetric key cryptography.

In symmetric key cryptography, the same key is used to encrypt and decrypt a message. This key is kept a secret. By using symmetric key cryptography algorithms, data is converted to a form that cannot be understood by anyone who does not possess the secret key to decrypt it.

New methods of symmetric encryption have been discovered which are far more secure than the Caesar cipher but the problem of safeguarding the common key still remains.

Note that Caesar Cipher can only use numbers as keys but modern symmetric cryptographic techniques can use any string of characters as a key. This immediately makes it more secure than the Caesar Cipher since we can chose a key from an infinite range of keys, instead of just 26 numbers. (Infinite because a key doesn't have to be of a fixed length)

The following can be used as keys

dhdfhf
djf776f
5757
cxjd^&

A simple analogy of symmetric cryptography

Imagine a trunk with a lock that Bob and Alice, use to ship documents back and forth. A typical lock has only two states: locked and unlocked. Anyone with a copy of the key can unlock the trunk if it's locked, and vice versa. When Bob locks the trunk and sends it to Alice, he knows that Alice can use her copy of the key to unlock the trunk. This is essentially how what's known as symmetric cryptography works: one secret key is used for both encrypting and decrypting, and both sides of a conversation use the same key.

Example taken from: https://www.cloudflare.com/en-gb/learning/ssl/how-does-public-key-encryption-work/

You can play around with modern symmetric key cryptography using this link.

Here's how a conversation between Alice and Bob would work with symmetric key cryptography

Alice and Bob decide upon a key beforehand. Let's say the key is test123. They keep this key to themselves
Alice wants to send a message Hi to Bob
Alice encrypts the message Hi with the key test123 which gives an output of my+looOXzJkrnYs/RCK9nA==
Alice send the encrypted message my+looOXzJkrnYs/RCK9nA== to Bob.
Bob uses the key test123 to decrypt the encrypted message my+looOXzJkrnYs/RCK9nA==
The decryption gives an output of Hi

This way we make sure that the conversation between Alice and Bob is mildly private.

Why mildly:

If Alice and Bob can't meet physically they would have to share the key test123 to each other, over the internet, which again can be intercepted by a middleman.
This makes symmetric key cryptography not really helpful for private conversations.

Modern cryptography solves this problem by using asymmetric encryption/decryption

Asymmetric key cryptography or Public Key Cryptography

In asymmetric key cryptography, one key is used to encrypt a message while a different key is used to decrypt that message. How that works: You will have to look at something called the Extended Euclidian Algorithm, which I won't be covering in this article.

In asymmetric key cryptography, each participant in the conversation has a pair of keys: public key and a private key.

And as they sound a public key is something which you share with others freely without fear of your conversation being hacked. While a private key is something you keep to yourself. You can compare public key/private key to username/password.

A public key and private key are 2 really large numbers (about a 100 digits) mathematically related to each other. But it's really really hard to derive the private key from the public key and vice-versa.

It will take hundreds of years to derive a private key from a public key even with many supercomputers. But it's not hard to create a pair of public and private keys and that's the beauty of it.

Here's a sample table of the pair of keys (public and private) which Bob and Alice have

According to the above table, Alice's public key is public_key1 which we will abbreviate to PB1 and her private key is private_key1 which we will abbreviate to PV1

Whereas Bob's public key is public_key2 which we will abbreviate to PB2 and his private key is private_key2 which we will abbreviate to PV2

A message encrypted with a public key can only be decrypted with the corresponding private key and vice versa.

Example: only Bob's private key can decrypt a message encrypted with Bob's public key. Only Alice's private key can decrypt a message encrypted with Alice's public key.

This opens up a whole new world in software. Let's see how.

Here's how a conversation between Alice and Bob would go with asymmetric key cryptography

Alice and Bob share their respective public keys, PB1 and PB2 with each other. This is usually done with a common database.
Alice wants to send a message Hi to Bob.
Alice encrypts the message Hi with Bob's public key PB2
Alice sends the encrypted message to Bob
Since only Bob's private key PV2 can decrypt the encrypted message as specified earlier, Alice can be sure that no one but Bob can read the message
Bob receives the encrypted message
He decrypts it with his private key PV2 and reads it.

Great! So one problem solved. But a middleman can still intercept the message, write a new one on top of it, encrypt the new message with Bob's public key PB2 and pass it on to Bob. This reminds us of the other problem we are supposed to solve. How does Bob know that the message is really from Alice.

Now remember, A message encrypted with a public key can only be decrypted with the corresponding private key and vice versa.

Here's what Alice can do now so that Bob can know if a message is really from Alice:

Alice can encrypt the message with her private key. PV1
So the message can only be decrypted by using Alice's public key PB1.
Alice sends the encrypted message to Bob
Bob tries to decrypt the message with Alice's public key PB1
If the message is successfully decrypted, then Bob knows the message was encrypted by Alice's private key which implies that the message was really sent by Alice since only Alice knows her private key.
If the message can't be successfully decrypted then Bob knows that the message is not from Alice

But we are faced with the first problem again. Since Alice's public key is known to everyone, anyone can decrypt the message and see the content inside. So it's a loop of problems. We either make sure that the message isn't read by anyone or we make sure that the message isn't altered by anyone.

Fortunately there is a work around for this

Alice can first encrypt a message with Bob's public key PB2
Alice can then encrypt the encrypted message with her private key. PV1. This step is known as signing the message.
This way even if anyone tries to decrypt the message with Alice's public key, all they will see is another encrypted message which only Bob can decrypt using his private key.
Alice then sends the message to Bob
Bob will first decrypt the encrypted message with Alice's public key PB1which will return another encrypted message
Bob will then decrypt this "another' encrypted message with his private key PV2 and read the message

This way we can be sure that no one can listen in on the conversation and no one can alter the conversation. Note that this is only applicable when the private key is kept secret by the person it belongs to.

This is how modern cryptography works and this is the core which powers the revolutionary tech like blockchain and cryptocurrency. I hope this article was helpful to you. Stay tuned for more articles in the Blockchain for the average web developer series.

Manage dynamic and custom subdomains in React

Parth Patil — Mon, 23 Aug 2021 15:43:03 +0000

How do websites such as hashnode.com, give a separate and custom domain for every user? for example https://parth2412.hashnode.dev. This question has always dazzled me. The way they do it seems like magic. Or at least that's what I thought. This article guides you through managing dynamic and custom subdomains in a react app.

In this article we will build a simple and minimalistic react app in which each user would have a custom subdomain based on their username and going to that subdomain would show the profile of the user, which will include the user's age, name and hobbies. And going to the main domain will show the links to all the user's subdomains.

For example, if a user has a username of john , age 15 and hobbies of Football and Cricket, then going to the url john.domain.com will show the name ("john"), age (15) and hobbies (Football and Cricket) of the user "john", where domain.com is assumed to be the primary domain of our app.

The data for the users would be dummy data and not from the database.

What is a subdomain?

A subdomain is an add-on to your primary domain name. Essentially, a subdomain is a separate part of your website that operates under the same primary domain name.

Your primary domain name could be “bestwebdesigner.com,” while you could add a subdomain to that domain called “blog.bestwebdesigner.com.”

Subdomains give you the freedom of creating an entirely new website, while still using the same domain name. Plus, you can usually create an unlimited number of subdomains for every domain you own.

Source : https://www.hostgator.com/blog/whats-a-subdomain/

Go here for more information.

Prerequisites

React Basics (Hooks and Functional Components)
Javascript basics (window object and array functions)
Basic knowledge about domains and subdomains

Getting started...

Start by creating a react app.

npx create-react-app dynamic-subdomains

cd dynamic-subdomains

npm start

You can name your app whatever you want.

How would you use subdomains on localhost?

I thought using subdomains on localhost would require quite a bit of configuration. But I couldn't be more wrong. For example, if your react app is running on localhost:3000 , then going to the url john.localhost:3000 or jane.localhost:3000 or any other subdomain will still show your react app. No configuration needed.

How can you show different content based on the subdomain in react?

The following code is how we access the subdomain from the full domain using pure javascript

Let's see what's happening here

We get the full domain of the app using window.location.host (Only the domain not the full url).
Suppose the url is https://javascript.plainenglish.io/dear-developer-this-is-how-you-center-a-div-e526e7cfcc9d then the host will be javascript.plainenglish.io
We split the domain into an array wherever we find a . . The resulting array would be ["javascript", "plainenglish" , "io"]
If the primary domain is not localhost, we remove the last 2 elements of the obtained array. The last element is the suffix of the domain such as .org, .com, .net, .io, etc. The 2nd last element of the obtained array would be the main (primary) domain of the app.
In the example, the last element of the array is the suffix io. The second last element is the primary domain plainenglish. Thus we are left with the array ["javascript"]
If the array has 0 elements then there is no subdomain. If not, the subdomain is the first element of the array. Thus the subdomain is javascript

Another example for development where the primary domain is localhost

Suppose the host (full domain) is sub.localhost:3000
After splitting the domain wherever we find a ., we get the array ["sub", "localhost:3000"] .
Since the primary domain is localhost, it means that the domain doesn't have a suffix such as .com or .org . So instead of 2 we just remove 1 element from the end of the array. Thus we are left with the array ["sub"]
If the array has 0 elements then there is no subdomain. If not, the subdomain is the first element of the array. Thus the subdomain is sub

Note

Subdomains can be nested under many levels too i.e there can be multiple subdomains such as a.b.c.d.example.com . But this article will only focus on handling one level of subdomain.

Getting back to our react app, we will now see how the above code should be written in the react format.

The same thing's happening here but instead of storing the subdomain in a variable we are storing the subdomain in React state, also we are extracting the subdomain in the useEffect callback.

Let's add the dummy data for the users.

Here we have an array of users.

Each user has a unique username , an age and a list of hobbies.

So when we go to the url john.localhost:3000 , it will show the name, age and hobbies of the user "john".

Thus the url jane.localhost:3000 will show the name, age and hobbies of the user "jane".

Thus in this app, each user will be assigned a subdomain (which will be equal to their username) and going to that subdomain will show the user's name, age and hobbies

The next and last part is really easy. We just have to use the subdomain value stored in the state to display the appropriate content.

As simple as that.

We get the subdomain and use that to find the user whose username is the same as the subdomain and store the user in the requestedUser variable.

If there is no user whose username is the same as the subdomain, then we display a text of Not Found . Else we display the name, age and hobbies of the user.

Here's how it looks. P.S I am using the port 3001 since port 3000 is already being used

Here's how the website looks when the requestedUser is not found

Let's take it up a notch higher and make it such that there is no subdomain , i.e the when the user who is looking at the website, is on our main domain, then we display a link to all of the user's subdomains.

Here's whats happening:

We check whether there is a subdomain or not.
If yes, then the requestedUser's data is shown
If no, then a list of the links to all the user's subdomains is shown

Here's how it looks on the main domain.

Coming Next

How to handle dynamic subdomains in a NextJS app

Configuring subdomains for production

Most hosting providers allow to configure dynamic subdomains. And usually dynamic subdomains come free when buying a domain.

Vercel : https://vercel.com/blog/wildcard-domains
Netlify : https://docs.netlify.com/domains-https/custom-domains/multiple-domains/#branch-subdomains
Google cloud : https://cloud.google.com/appengine/docs/flexible/go/mapping-custom-domains#wildcards

Github repo : https://github.com/Parth-2412/Dynamic-Subdomains

Introduction to Generators in JavaScript

Parth Patil — Thu, 05 Aug 2021 08:37:56 +0000

Generators are an advanced concept in javascript but are quite easy to understand. Generators are special functions in javascript which can return multiple values on demand unlike regular functions which can only return one value.

Unlike normal functions, the execution of a generator function can be stopped midway and can be resumed.

How to create a generator function

There is a special syntax for creating a generation function which is not much different from the normal function syntax.

function* generatorFunction(){

}

The * after the function keyword is what makes this function a generator function.

How to use the generator function created above

Another keyword yield is introduced here. You can think of yield as the return keyword but for generator functions. Let's take an example here

function* generatorFunction(){
        console.log("Start")
        yield 7;
        console.log("Midway")
        yield 8;
        console.log("Stop")
}

const gen = generatorFunction();

let result = gen.next();
console.log(result.value) // logs 7
result = gen.next();
console.log(result.value) // logs 8

Let's see what's happening here:

We define a generator function which first yields (returns) the number 7 and then next yields the number 8. We also added a couple of console logs.
We call the generatorFunction here and store the return value in the variable gen
Normally when using normal functions you will expect the gen variable to hold the value 7.
But that's not the case for generators. The gen variable doesn't store the value yielded by the generator, instead it stores a Generator object returned by generatorFunction
The gen object has a method next()
The first call of the gen.next() method starts the execution of the generator function and when it reaches a yield, it stops the function there and returns an object which has 2 properties value and done. Value is the yielded value and done is a boolean which tells us whether the generator function is done completely executing or not
So in the above example, when gen.next() is called for the first time, the generator function starts executing. "Start" is logged to the console and then the generator yields a value of 7. That's when it stops the function and returns an object, which (in this case) will be { value : 7 , done : false }. value is the yielded value which is 7. done is false because the generator is not completely executed yet; there are still some lines of code in the function yet to be executed. "7" is logged to the console.
The next (second) call of the gen.next() method resumes the generator function from the point it stopped at before. Thus, "Midway" is logged to the console and then the generator yields a value of 8. It stops the function there and returns { value: 8, done: false} since the yielded value is 8 and the function is still not done executing. "8" is logged to the console.
"Stop" is never logged to the console since we never call gen.next() again

Notes

In the above example, if we call gen.next() for a third time, "Stop" will be logged on the console and the object returned would be {value : undefined, done : true}. Notice how this time the done property is true? That's because all the code of the generator is done executing. Whereas the value property is undefined? That's because no value has been yielded by the generator. If you keep calling gen.next() after this, the result will always be {value : undefined, done : true}
A generator object cannot be restarted. Once it's done completely executing, you cannot restart it. If you want to run a generator function again make a new Generator object by calling generatorFunction and store it in a new variable. Then you can work with that variable.
- Example :
```
const newGen = generatorFunction();

const newResult = newGen.next():

console.log(newResult).value) // logs 7
```