DEV Community: Rahul Nayak

How to merge JS objects with common keys

Rahul Nayak — Wed, 16 Jun 2021 06:53:07 +0000

While working on a project, I came across a situation where I had to merge 2 objects with common keys. In this post, I'll show you a simple solution to merge the objects.

Problem statement:

We have 2 objects(originalObject and objectToMerge) and each object has a few keys which are common in both the objects. If the key is common, we want to add the values from both the objects and store the updated value in originalObject. If it isn't, then we want to add the new key to the originalObject.
Here's an example:

let originalObject = {
  key1:1,
  key2:2,
  key3:3,
  key4:4
}

let objectToMerge = {
  key2:5,
  key6:6,
  key3:-7
}

// Output after merging

originalObject = {
 key1: 1,
 key2: 7, // 2+5 = 7
 key3:-4, // 3+(-7) = -4
 key4: 4,
 key6: 6
}

Solution:

let originalObject = {
  key1:1,
  key2:2,
  key3:3,
  key4:4
}

let objectToMerge = {
  key2:5,
  key6:6,
  key3:-7
}

let keys = Object.keys(objectToMerge)

keys.forEach((key) => {
if(originalObject.hasOwnProperty(key)) {
   originalObject[key] += objectToMerge[key]
}
else {
  originalObject[key] = objectToMerge[key]
}
})

console.log(originalObject)

Code explanation
I used the keys method on originalObject object to extract all the keys name.
Next we will loop through these keys and check if each key is present in the objectToMerge object.

If the key is present in both the objects, then we will add the values of the two and store it in originalObject. If not, we will create a new key in the originalObject object. And that's it!!

Feel free to play around with the code present here.

A lot of libraries have this logic inbuilt as an utility function but I wanted a simple Vanilla JS solution hence this approach. I have found one such solution in Lodash. You can find it here.

Let me know if you solved this any other way. Would love to hear more ways to solve this problem.

Until next post. ta-da!

Animate Button text using only CSS

Rahul Nayak — Sun, 11 Apr 2021 19:33:16 +0000

Hello, Hola and Namaste!

Today we are going to achieve what you see below:

Basically, we would animate the button text to smoothly slide up and down and show a different text when one hovers over it.

Without further ado, let's dive in.

Step 1: Add the html structure

Needless to say that we would need two different text values for button.

The primary text(New Blog) would hold the current information while the hidden text(Read it now!) would hold the value shown on button hover.

Here is the code so far:

<div class="btn blog-button">
  <div class="primary text">New Blog</div>
  <div class="secondary text">Read it now!</div>
</div>


.btn {
  width: 200px;
  height: 50px;
  background-color: #0fabbc;
  border-radius: 25px;
  color:#fff;
  font-size:18px;
  font-weight:bold;
  font-family: "Lucida Console", "Courier New", monospace;
}

Step 2: Initial state (No Hover)

Right now both the text values are stacked against each other in the tiny button box. Let us use the position property to separate them.

.btn {
  width: 180px;
  height: 45px;
  background-color: #0d7377;
  border-radius: 25px;
  position: relative;
}

.text {
  width: 180px;
  height: 45px;
  position: absolute;
}

.primary {
  top: 0px;
}

.secondary {
  top: 80px;
}

When you use position: absolute;, it positions itself relative to the nearest positioned parent. If you look at the above code and the image, we gave the .btn the position of relative and positioned the children divs absolute.

So now whenever you try to change the position of the children elements(.secondary and .primary), they would move with respect to the .btn div and not body.

### Step 3: Hover state

If you look at the code above, you'd notice that we have given the .secondary class a top value of 80px. That's our button text to be displayed on hover. When one hover over the button, the top property should be 0 so it sits inside the button box.

Similarly at this point, we want the existing text("New Blog") to clear space for the secondary text so we would move it up by setting the top to -80px. Let's see it in action.

.btn:hover .primary {
  top:-80px
}

.btn:hover .secondary {
  top:0px
}

Here's the complete code used so far for your reference. But wait, isn't something missing here?

Ohh yeah, the transition doesn't look very smooth. Plus why the other text is still visible. Let's fix it.

Step 4: Sprinkle some animation here and there

Right now, the sliding up and down behaviour is instant. Let's use the CSS transition property to control the speed of this slide up/down behaviour.

Additionally, time to get rid of the unwanted text. We only want to show whatever text is inside the button box with the .btn class and so we would use overflow:hidden to hide that text. Let's see it in action:

.btn {
  overflow:hidden;
}

.text {
  transition: top 0.7s;
  -moz-transition: top 0.7s; // Firefox
  -webkit-transition: top 0.7s; // Safari and Chrome 
  -o-transition: top 0.7s; // Opera 
  -ms-transition: top 0.7s; // Explorer
}

The above code snippet is simplified to only show the code relevant to this section. You can find the final code here for all the css styling that I have used.

This brings me to the end of this article. I enjoyed animating this button and writing about it. I hope this brings the same joy to you when you read and try it on your website.

My comment section is open to your feedback. If you want to chat over twitter, you can find me here.

Concluding this article with the usual request: Like, share and comment. It would mean a lot to me. 🙂🙂

Until Next time!

How to secure your website against Cookies theft and Cross Site Scripting

Rahul Nayak — Sat, 10 Apr 2021 03:56:28 +0000

30% of web applications are vulnerable to XSS.

Source: Acunetix vulnerability report 2019

Our dependency on the Internet has increased multifold over the last decade. Today we use internet for anything and everything from buying products off the e-commerce platforms to transferring money across boundaries and much more.

Needless to say, as Developers, it becomes important to save customers from online frauds. One security breach incident can impact your website's brand and reputation.

In this article, we will learn about Cookies theft and Cross Site Scripting(XSS). Post that, we will learn how to secure our websites and user data against these attacks.

Now, before we find ways to prevent cookies theft, let's understand what Cookies are and how they are used.

What are Cookies?

Cookies are a small piece of data that your computer stores when you visit a website. It is used to store your interactions with the website that you are on. Some of the primary uses are listed below:

Tracking your browsing history to serve targeted ads.
Persistent login credentials
Persistent shopping cart items in e-commerce sites
Track unique visits on websites

By now you must have got an idea about the gravity of the situation in case someone steals them. At the same time, you must be thinking why to save the my personal data in cookies at all if it is prone to thefts?

Why use Cookies?

Let's say you visit orderPizza.com to order a Pizza. The site asks you to login to your account and stores the login credentials in the cookies.

When you navigate to another page on the website, for example, orderPizza.com/pineapple, the website will check the cookies to see if the user login information is stored in the computer.
If it is, you will not have to re-authenticate yourself when you navigate to different parts of the website. Pretty convenient, right!

What is Cookies theft?

As the name suggests, cookies theft is when a hacker gets hold of your personal cookies.

In our example, you stored your login information for orderPizza.com website.
Once they steal the cookies, they can load it in their browser and impersonate you.

They can then login to orderPizza.com as you, use your credit card details to order as many pizza as they like to their address.

While this example may look harmless, imagine if it was not orderPizza.com but your internet banking site!

Cross Site scripting(XSS) is one of the most common way to steal cookies of your computer and yes, we are going to talk about it next.

How Cross Site scripting(XSS) is used to steal cookies

Cross site scripting(XSS) is a web security vulnerability which allows the hackers to execute malicious code inside user's browser.

It bypasses the "same origin policy" by injecting the code into the server through user input fields. Once the code is in the server and requested by the user, the browser is tricked into assuming that this malicious code is coming from the trusted web server of orderPizza.com when in reality, it is not.

According to The Open Web Application Security Project® (OWASP) which is a non profit organization dedicated to web application security, XSS is among the top 10 critical attacks on the internet.

Let's see XSS in action to understand it better.

Say you can add reviews for each type of Pizza on orderPizza.com website. Here's how the attack will unfold:

The attacker will slide a malicious code through the 'add reviews' input text field which would look something like this.

Pizza is <script>alert("you are hacked!")</script> delicious

The server assuming that it is a review, will save it in the database and will serve it upon request.

let latestReview = document.getElementById('latest-review')
latestReview.innerHTML = Pizza is <script>alert("you are hacked!")</script> delicious

Another user when requests the reviews page, the web server will serve all the user reviews including the malicious one. This will activate the code inside the script tag
Once the code is activated, it can do whatever it wants. Based on what's inside the script tags, it can steal cookies which may have your login credentials to the website.

Once the attacker obtains your cookies, they can load those cookies to their browser and pose themselves as you to carry out fraudulent activities.

Note: HTML5 doesn't allow to execute <script> tag inserted with innerHTML. However the hackers have found a way to bypass this. See the code below:

<img src='wrongLocation.jpg' onError='alert("You're hacked")'>

innerHTML will allow the above code to run and this way the hackers can infiltrate and steal data.

How to prevent cookies theft and XSS attacks

1. Use secure https connection

When a user opens a website, a web connection is established between user's browser and your web server. Data continues to flow to and from your web server for as long as the connection is open.

If you use the http connection for data transfer, the data is prone to theft because using http, data is transferred in plain text format. So if a hacker intercepts that data, they can read and use it for their advantage. This process of intercepting data is called packet sniffing.

On the other hand, https is a secure http connection which encrypts the data before sending it. So even if it is intercepted along the way, the hacker won't be able to decrypt it and make sense of the data.

2. Implement Content Security Policy(CSP)

According to MDN:

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks.

CSP allows you to create a set of rules that would control what browsers can do with your website. For example, you can direct the browser to run scripts from a specific location.
This will block all the scripts with malicious intent and mitigate the XSS attacks to a great extent.

As a server administrator, you can configure the policy by adding the Content Security Policy HTTP header to your website.

Let's see a few examples to understand the rules a little better:

Allow all scripts from only the origin website

Content-Security-Policy: script-src 'self'

Allow all scripts from the origin and trsutedSite.com domain

Content-Security-Policy: script-src 'self' https://trsutedSite.com

There are other directives like image-src or style-src which specify permitted sources for loading images and css stylesheets respectively.

For an in-depth understanding of the CSP, you can visit the MDN page here which explains it in great detail.

3. Use textContent instead of innerHTML

Let's look at the malicious code again which was added as a review to 'orderPizza.com'

let latestReview = document.getElementById('latest-review')
latestReview.innerHTML = Pizza is <img src='wrongLocation.jpg' onError='alert("You're hacked")'> delicious!!

Once the hacker hits 'submit review' button, the review will be stored in the database and served on the screen as the new review.
Now if you use innerHTML to output the review, the user input will be parsed as HTML and for the above example you will get an alert box.

Instead if you use textContent, the user input will be parsed as a plain string and not HTML so the new review will be added with this content:

"Pizza is <img src='wrongLocation.jpg' onError='alert("You're hacked")'> delicious!!"

And that's how you secure your website! 💪💪💪

4. Invest in Web Security tools

Web security is a huge undertaking so if you do not feel very confident about managing it on your own, it is always a good idea to invest in a good web security tool that can protect your website against incoming attacks.

5. Use modern frameworks and update them regularly

Using frameworks is an important part of development process now and rightly so. It offers an organized approach to writing and maintaining code, enhances application performance, gives out of the box functionality and the list goes on.

But it doesn't stop there. Modern frameworks like React, Angular for front end web development also offer rich security measures which prevents the websites from malicious attacks to a great extent.

They come with a built in mechanism to detect XSS attacks for example and sanitize data before it is stored in server. The implementation and security features may differ between frameworks but they do the job just fine.

That's why it becomes important that you use well supported frameworks during the development process and make sure to update them on a periodic basis. The teams developing these frameworks update the packages on a regular basis to find loopholes or backdoor entries and build stronger security , among other things.

Conclusion

Cross Site scripting(XSS) attacks are major web security vulnerabilities that bypasses the same origin policy rule to inject malicious code into your website. These attacks poses a major risk to user's personal information, authentication details which is generally stored in browser/computer cookies.

Using https secure connection, having a strong Content Security Policy in place alongside other measures can mitigate these risks and make your website more secure than ever.

And this brings me to the end of the article.

I hope this article helps strengthen your website security further. As always my comment section is open for feedbacks. Keep them coming. 🤗🤗
I can be found on LinkedIn or Twitter if you want to connect. 🙂

Until next time! ✌️✌️

Photo credit goes to FLY:D on Unsplash

Front-End-Snippets E01: Is window and document object the same?

Rahul Nayak — Sat, 28 Mar 2020 18:43:17 +0000

For a very long time, the most basic and important Front end web development concepts eluded me and scared me away to a point where I started to skip these concepts and hide my head in the sand. All these concepts came to haunt me later on when I went to web developer interviews. The interviews were an eye-opener and I realized there is so much that I do not know yet.

And this brings me and you to this first post of a larger series where I would share snippets of concepts used in Front end development process. These snippets are short, concise posts that will hopefully get you started with some of the most confusing parts of Front end development.

Starting this series with this week’s topic: Is window and document object the same? If not, how are they different?
Let’s dive in.

Window Object

Window is basically an object which is created when you run JavaScript in a browser.
But what does this window object represent? It represents the current window of the browser. If you open 10 tabs, each tab would have its own window object.

Now let’s see it in action. Open your developer console, type window and hit enter. You’d get something like this:

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

Expand the object and you’d find a lot of familiar functions that you use on a more frequent basis like setTimeout or setInterval. The window object shares all of its properties globally which means you do not need to type window.setTimeout to use it. Simply calling setTimeout with the required arguments would do the job.

Now, this window object does not belong to JavaScript, it belongs to the browser so it would contain all the web APIs that you can leverage. Navigation, setTimeout, setInterval, history, audio, video to name a few.

Document

The Document object is one of the properties of a window object. The Document is what renders on the screen. If you crack open the document object, you’d find the entire Html tree that you see on the webpage in the current window.

Open the console again and run window.document and you can see the entire Html tree for the webpage you are on. Here is a screenshot from the dev.to homepage:

Pretty neat stuff right! And this is all I have for this post. Tune in for the upcoming posts.

Before I go, shower some love if the post helped you in any way, share the feedback in the comments section and if there are any web development related concepts that should be demystified, let me know and I’ll write about it in the future.