DEV Community: Tilak Madichetti

HTTPS , TLS, SSL, CA, Encryption & MITM attack !

Tilak Madichetti — Sat, 23 Jan 2021 15:22:45 +0000

None of the above words have to make sense to you just yet. Go and grab a 🍺, give a HUGE ❤️ and smash the 🔥 Follow 🔥 button as we dive right in to it!

Encryption is a way to convert data into special text (that is un-processable in itself) so that only the encryptor and the person intended to receive the data can convert it back a.k.a decrypt it to the original form.

This conversion happens with the help of a 🔑! which again is just a random string text. !


const key = UUID.random() // this is shared between the encryptor and the decryptor 

const encryptedMessage = functionThatEncrypts(plainMessage, key) 

const plainMessage = functionThatDecrypts(encryptedMessage, key)

Notice in the above example we used the same key to encrypt as well as decrypt the message. This type of encryption is called Symmetric encryption and when we have two separate keys it's Asymmetric encryption

A commonly followed process to do the same - Advanced Encryption Standard AES

Now think of a case where two computers that knew each other beforehand have to share some secret data over the internet . How can they do it ?

Decide on a common key while being offline to use, and not share it with any other computer.
Then use that key to encrypt and decrypt data while talking online

As a result no-one online or offline can possibly make out what they are talking ! This is a secure connection 🙌 powered by Symmetric encryption

But more often in real life two computers have to talk for the first time online . So if they decide on a common key they would have to first share the common key with each other in plain text online !

That's crazy because the internet is like an open connection and any person sniffing on the network can make out what your apparently secret key is ! 🔐

And then use it to imitate Computer A to Computer B and Computer B to Computer A whilst getting to see the entire chat 💭 that's going on. And worse, the attacker can manipulate packets coming from Computer A and send to Computer B for his benefit ! like asking for credit card details via supplying wrong HTML to legitimately requested webpages. 💥 ٩(๏_๏)۶ 💥

The above is called MITM - Man in the Middle attack

Solution for the above problem -

Send the secret key via a rocket to the other computer's location each time you wanna make a request !

But it's a little expensive !

So we use Asymmetric encryption to address the issue.

This involves 2 kinds of keys - One for encryption which is publicly available and the other for decryption which is private.

Important part is that any data which is encrypted using public key can only be decrypted using the private key 🔑


const { publicKey, privateKey } = AES.generateKeyPair()

const encryptedText = functionThatEncrypts(plainText, publicKey)

const plainText = functionThatDecrypts(encryptedText, privateKey)

Now we'll learn how we can use that functionality to send a common key that both the computers agree to, online, except that this time it will be encrypted ! This does not leave room for deciphering intercepted data.

Computer A initiates a connection to Computer B by sending a plain text hello ! 👋 This of course contains information like srcIP, srcPort, etc.
Computer B then sends its public key to Computer A as a response packet
Computer A now uses the public key to encrypt another key 🔑 of its own which will later work as the common key. This encrypted data is known an Premaster Secret and will be sent to Computer B


// On side of Computer A

const finalKey = UUID.random(128) // generated by Computer A
const publicKey = receiveFromComputerB() // Step 2

const premasterSecret = functionThatEncrypts(finalKey, publicKey)

sendToComputerB(premasterSecret)

Remember: Our goal is to share a common key without the fear of being deciphered on interception - so in this way we can get back to talking with Symmetric encryption

Computer B can decrypt it using its private key. And no other computer (even Computer A) at this point can decrypt the premaster secret.


// On side of Computer B

const premasterSecret = receiveFromComputerA()

const privateKey = .... // generated as a pair along with public key

const finalKey = functionThatDecrypts(premasterSecret, privateKey)

*Now both computers share a common key * finalKey !

The above 3 step process is called the Transport Layer Security Handshake. (TLS)

Buuuu......t we are not done yet because clearly in Step 2 the public key transfer to Computer A can be intercepted by a man in the middle who can totally represent himself falsely to Computer A.

Hence Computer A needs to be able to verify that the public key it receives is from Computer B.

Solution - SSL (Secure socket layer)

Yes ! Computer B needs to send the pubilcKey through a privately signed SSL certificate and not directly. The reason is Computer A on the receiving end can get the certificate verified through a Certificate Authority (CA) which is a 3rd party service that helps verify server profiles on the internet ! Details of which I will not dive into in this blog coz it's a noob's blog.

So now when SSL is used, the HTTP requests become secure by a million times and its called HTTPS.

That ends my blog. 🔥 Follow 🔥 me for more sweet content don't miss out cuz I am about to blow your brains out !

Thanks for reading !

Feel free to comment down below any of your questions and I will try my best to answer them.

Expose localhost server to internet in 1 step

Tilak Madichetti — Sat, 25 Jul 2020 14:28:41 +0000

#Whotisupeverybodyhowisitgoing

After reading this article you will be able to deploy your app in 1 command *literally* (the setup is 5 steps though). So smash ALL of ❤️ 🔖 🛳 on your left and let's dive right in !

STEP 1 - Install PHP and Composer

MAC Users:

Just go

brew install composer

Of course you need to have brew installed https://brew.sh/ - Its the best package manager of Mac OS

If you are on Windows,

use these links:

PHP build for Windows download - https://php.net

Composer Installation Instructions here - https://getcomposer.org/doc/00-intro.md

STEP 2 - Make Composer Install beyondCode/EXPOSE

composer global require beyondcode/expose

Now add this to your .zshrc or .bashrc file based on whatever terminal you are using.

export PATH="$PATH:$HOME/.composer/vendor/bin"

Then restart your terminal and type expose to see if the command is recognized or not.

STEP 3 - Go and get yourself one of these 🍺 , cuz I believe you completed the hardest part of the journey

STEP 4 - Now create an account on https://beyondco.de/ and you will be given a token so register that with your terminal

expose token [YOUR-AUTH-TOKEN]

STEP 5 - This is the 1 line you've been waiting for ٩(^‿^)۶!

Here you go (☞ﾟヮﾟ)☞

expose share https://127.0.0.1:400 --subdomain="subd" --auth="admin:123"

This will link your local dev server running at 127.0.0.1:400 to a url subd.sharedwithexpose.com which anybody on the internet can access with the credentials.

username: admin
password: 123

You can customize the subdomain and auth credentials to whatever pleases you for free unlike https://ngrok.com

Resources referred

Official docs https://beyondco.de/docs/
Google

Hit the FOLLOW button for more awesome content

YOU DON'T HARNESS THE FULL POWER OF JS CONSOLE 👎 :-(

Tilak Madichetti — Mon, 20 Jul 2020 19:49:03 +0000

What a discouraging way to start off isn't it ? But stick around and I promise you that you will leave this blog with zeal for Javascript .

So go grab a 🍺, give this post a HUGE ❤️ and let's dive right into it.

Here are 5 ways you can ninjafy your console logging skills

1. console.log( 'COLORED_TEXT' )

You will have to use %c with each occurrence accompanied by an argument that expresses the styling that you desire

console.log(
  '%c Object A instantiated %c before B !!  ',
  'background: white; color: red', 
  'background: red; color:white'
);

Note that you could use any CSS property under the sun into as an argument. In case of the above string this is how it renders out

2. console.table( ARRAY_OF_OBJECTS )

Use this when you want to print an array of objects
For example if you want to print this :


const arrayOfBooks = [
  { title: 'Heart of Darkness', author: 'Joseph Conrad' },
  { title: 'A Walk in the Woods', author: 'Bill Bryson' },
  { title: 'Rich Dad Poor Dad', author: 'Robert Kiyosaki' }
];

then y'all know what console.log(arrayOfBooks) does

But if you instead use

console.table(arrayOfBooks)

you'll get the following output:

Isn't it at least 300 times nicer and easier to infer what the array is ?

3. console.image( 'URL_OF_IMG' )

HOLD TIGHT FOLKS ! Before you leave to try this out yourself in the console let me tell you that this one is NOT natively available to Javascript in the browser

You will have to first load this JS resource from the CDN using the below script tag :


<script src='https://raw.githubusercontent.com/adriancooney/console.image/master/console.image.min.js'></script>

For more details on ☝️ , refer this link https://github.com/adriancooney/console.image. Obviously the project isn't maintained anymore (the last commit is like 6 years ago) becoz there isn't really anything more to console.image :)

*BONUS : * You get console.meme included in the CDN to make something like this :

And the format for that as per their Github Readme is:

console.meme(upper text, lower text, meme type|url, width, height)

4. console.warn( YOUR_MESSAGE )

You can use this to sort of indicate log messages that show the devs it's not really something that breaks the project but good to fix it in the future commits


console.warn('Image Kirk_0932.jpg dimensions are slightly off and its causing a small part to be hidden from the user')

and here is a screenshot of how ⚠️ WARNING messages look like inside the console

5. console.**(*)

If you guys want to know the fifth cool thing then get me to 20 FOLLOWERS and 20 LIKES 💕❤️ 💕❤️ 💕 on this post.

-------- EDIT 1 (goal reached) -----------

5. console.time() to Test Your API

You can keep track of how much time api calls take to fetch data right in the console. You can use this to find out average time and if you think it suxx, you can bug your backend dev ;P

So pass in the same label 'API_TEST' to time and timeEnd functions for it to work.


console.time("API_TEST");

const fiftyTests = Array.from(
     { length: 50 }, 
     () => fetch('https://jsonplaceholder.typicode.com/todos/1'));

for(const prom of fiftyTests) {
  const resp = await prom;
  const json = await resp.json();
  console.count('Fetched ');
}

console.timeEnd("API_TEST");

Now you can see the time it takes to make api calls 50 times one - after - the - other printed in your console.

You can now divide it by 50 to get the average time the API takes to respond.

⚠️ Don't use Promise.all() because it will simultaneously await all promises and tell you once everything has resolved which defeats our purpose

Thanks for reading,
Until next time,
See ya ✌️
God bless :)

Recreating `new` keyword in Javascript from scratch

Tilak Madichetti — Mon, 20 Jul 2020 12:21:13 +0000

The best way to understand anything is to re-write it from scratch on your own

We are gonna do just that. So go grab yourself a 🍺, drop a huge ❤️ and chelax as we dive right into it.

Here's what we already do


function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.describe = function () {
  console.log(`I am ${this.name} , ${this.age} years of age ! `);
}

const client = new Person('Vladimir', 32);
client.describe();

That outputs , I am Vladimir, 32 years if age !

Our goal is to change the line that has the new keyword to a more custom one like:

const client = spawn(Person, 'Vladimir', 32);

where spawn is our own function that we create which should substitute new


function spawn(constructor, ...args) {
  const obj = {};
  Object.setPrototypeOf(obj, constructor.prototype);
  return constructor.call(obj, ...args) || obj;
}

How spawn works

Since new returns an object, we first create a fresh object each time for a call of spawn and set its prototype.

Now we call the constructor by setting its this argument to the fresh object . After this call all the properties in the constructor function will be assigned (for eg: name, age)

Then we check to see if the constructor returns anything and we respect that , so we return whatever it returns (In most cases constructor doesn't return anything and we return the object)

Thanks for reading
Don't forget to ❤️ it :)
And follow me for more cool stuff

How to stay DRY in redux state mapping when using reselect ?

Tilak Madichetti — Sun, 19 Jul 2020 14:34:16 +0000

So we are probably used to mapping state to props this way where the values of props are basically selectors that are defined using createSelector function in reselect library
(which is mainly used for memoizing)


const mapStateToProps = state => ({
  itemCount: selectCartItemsCount(state),
  bagColor: selectCartColor(state),
  price: selectCartPrice(state)
});


export default connect(mapStateToProps)(MyApp);

The problem with this approach is we are compelled to pass in state as argument in every select method even though we know
there is only 1 universal redux state

So to solve this we can

 import { createStructuredSelector } from 'reselect';

This helps us reduce our code to follows:


const mapStateToProps = createStructuredSelector({
  itemCount: selectCartItemsCount,
  bagColor: selectCartColor,
  price: selectCartPrice
});


export default connect(mapStateToProps)(MyApp);

And everything else stays intact and works just fine

NOW, you might ask yourself when should we NOT use createStructuredSelector ?

Well, there is one practical case that I encountered and that is when you want to dynamically generate a selector based on unknown props.

I'll explain - suppose MyApp is rendered this way:

<Route path='/mycart/:id' component={ MyApp } />

In this case Route passes down the match object to MyApp and if you wish to generate a selector based on the match.params.id then in the mapStateToProps function you would need the match props as well apart from the redux based state(which is universal to the whole app btw)

So the solution would be:


const mapStateToProps = (state, ownProps) => ({
  itemCount: selectBasedOnUrl(ownProps.match.params.id)(state)
});

export default connect(mapStateToProps)(MyApp);

Notice however that here, the itemCount is not memoized. If you want to learn how to memoize it, please check out my other post where I explain exactly that - its super important

Anyways I hope 🤞 you enjoyed what you read,
Don't forget to ❤️ it - I need encouragement to post !
And also don't hesitate to drop a comment below if you have anything to say.

Thanks for reading,
✌️

How to memoize correctly using Redux reselect for O(1) complexity?

Tilak Madichetti — Sun, 19 Jul 2020 10:27:56 +0000

So we are used to writing redux selectors like this:

// state is the universal redux state
// shop is one of the combined reducers
// O(1)
const selectShop = state => state.shop;

// collections is an object - O(1)
export const selectCollections = createSelector(
  [selectShop],
  shop => shop.collections
);

//return all collections as an array - O(N)
export const selectCollectionsForPreview = createSelector(
  [selectCollections],
  collections => Object.keys(collections).map(key => collections[key])
);

With this set up, for a component if you wish to retrieve the collections as an array you could do this:


const mapStateToProps = createStructuredSelector({
  collections: selectCollectionsForPreview
})

export default connect(mapStateToProps)(MyComponent);

When the component is rendered for the first time, the O(N) operation will take place but from the second time (of course assuming the state hasn't mutated) it will just returned the collections array from the cache which makes it an O(1) operation.

Now think of a selector that should return collections as an array but filtered based upon a url parameter

Then you would have to create a function that generates a createSelector function that would look like this
which is an O(N) operation

export const selectFilteredCollections = urlParam =>
  createSelector(
    [selectCollections],   // this returns the array as explained above and is memoized
    collections => collections.filter(coll => coll.type === urlParam)
  );

Now to use it you would do


const mapStateToProps = (state, ownProps) => ({
  collections: selectFilteredCollections(ownProps.match.url)
});

export default connect(mapStateToProps)(MyComponent);

The problem here is you are creating a new function that returns a createSelector function based on the url parameter each time the component renders.

So even if the url parameter remains the same for the second time of the call you are re creating a selector. So memoization didn't take place correctly.

In this situation, you will have to install loadash library

If using yarn:

yarn add lodash.memoize

If using npm:

npm install lodash.memoize

And to use it, we import our newly installed memoize helper function like so

import memoize from 'lodash.memoize';

And just wrap our selectFilteredCollections function with memoize like so:

export const selectFilteredCollections = memoize((urlParam) =>
  createSelector(
    [selectCollections],   // this returns the array as explained above and is memoized
    collections => collections.filter(coll => coll.type === urlParam)
  ));

Memoize does the same idea of memoization as reselect does for our selectors, except this time we're memoizing the return of our function which returns our selector:

(urlParam) =>
  createSelector(
    [selectCollections],
    collections => collections.filter(coll => coll.type === urlParam)
 )

By wrapping this function is memoize, we're saying that whenever this function gets called and receives urlParam, I want to memoize the return of this function (in this case we return a selector). If this function gets called again with the same urlParam , don't rerun this function because we'll return the same value as last time, which we've memoized so just return the selector that's been stored.

Hope you had fun reading this !
Its my first post here :)

And oh ! did I forget to mention - you can learn more
at the official website Redux Reselect

Also if you want to dive deep into loadash.memoize , checkout this article that @CameronNokes wrote here on dev.to