Forem: Maulik Thaker

[Boost]

Maulik Thaker — Thu, 02 Oct 2025 13:25:20 +0000

Sacha Greif

Oct 1 '25

What's new in the 2025 State of JavaScript survey

#surveys #javascript #typescript

Comments 3

3 min read

Prevent Click-Jacking in your web applications

Maulik Thaker — Tue, 13 Apr 2021 11:14:34 +0000

Today we gonna lookout the click jacking also known as UI redressing and how we can prevent that in our web applications or website.

What is Click-jacking?

Clickjacking is an attack that tricks a user into clicking a webpage element which is invisible or disguised as another element. This can cause users to unwittingly download malware, visit malicious web pages, provide credentials or sensitive information, transfer money, or purchase products online.

For example, if you have your application which contains login and sign-up kind of forms then it might be a chance to getting under attack of click jacking where a fake UI layer is attached through an <iframe src=""> tag and embedded into the top of your site.

Consider the example below:



<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click jacking</title>
  <style>
    .toplayer{
       position: relative;
       width:100%;
       z-index:1; 
     } 
     #topmostlayer{
       position: absolute;
       z-index: 9999;
       opacity: 0.0001;
       top: 50%; 
       left: 50% // can be adjusted according to your login button UI placements
     }
  </style>

</head>
<body>
  <form >
    <input type="text" placeholder="Enter username"> 
    <input type="password" placeholder="Enter password">
  <button class="toplayer btn btn-login">Login</button>
  </form>
  <a id="topmostlayer" role="button"> Click here 
   <iframe  src="https://anonymous-web.com"></iframe>
  </a>

</body>
</html>

In above code, we can see that the login form is there at topmost UI level so whenever URL loads the login page, in DOM tree UI of login is placed at top layer.

Now, What is interesting here is you can do DOM manipulation using our well-known css property of z-index along with <iframe> tag embedded inside <a> tag.

Here css class named .toplayer is added to Login button and the z-index of this class can be set to 1 or bydefault. So, whenever <iframe src="https://anonymous-web.com"> is came into DOM along with id of <a> tag named #topmostlayer attackers identify your button position in DOM and create exact same replica or placed the position of buttton named "click here" as such that button is overlapped into login button.



  #topmostlayer{
       position: absolute;
       z-index: 9999;
       opacity: 0.0001;
       top: 50%; 
       left: 50% // can be adjusted according to your login button UI placements
     }

Observe that button "Click here" id styles. You can see that z-index: 9999; forces the UI to be on top layer on login button also css propery opacity:0.0001; hides that UI so that you are not aware of any UI is present in your existing DOM level. Such attacks called as UI redressing.

Check Click-jacking vulnerability

There are many online tools by which you can check whether our deployed URL can be embedded into another URL or not. Examples are Clickjacker, Lookout, gf-dev. I preferred "Clickjacker" because there you can test your deployed URL and it gives you a POC and identify the X-frame-options, CSP headers, Raw Http headers information about your URL. If X-frame-option is "sameorigin" then it indicates your URL is safe.

below is screenshot of Raw Http headers in case of there is chances of attacks.

How to prevent Click-jacking?

1. Frame Busting

Simple task is to avoid UI overlapping or DOM manipulation by <iframe> tag. At frontend side, when page loads at that time we can check whether any UI layer inserted into top of the HTML of <body> tag or not by adding below code.



<style>
/* Hide page by default */
html { display : none; }
</style>
<script>
if (self == top) {
// Everything checks out, show the page.
document.documentElement.style.display = 'block';
} else {
// Break out of the frame.
top.location = self.location;
}
</script>

Above technique called Frame busting. JavaScript that runs on user’s browser is used to stop itself being embeded into iframe and escape out of it. When the page loads, this JS code will check if the domain of the page matches the domain of the browser window. If it does then no problem, if it does not then it will escape out of the iframe and load the site in the browser by replacing the site trying to load it in the Iframe.

2. X-Frame Options & Content-Security-Policy

At server side we can set X-Frame-Options is a response header. Developers can use it to protect their site against clickjacking. It can be used to indicate whether or not a browser should be allowed to render a page in an Iframe by have its value set as any of the following:


 DENY

By specifying DENY, no site will be allowed to load the page in a frame.


 SAMEORIGIN

On the other hand, if you specify SAMEORIGIN, you can still use the page in a frame as long as the site including it in a frame is the same as the one serving the page.


 ALLOW-FROM uri

If you specify this, then the site can be displayed in a frame only by uri specified. However, this is an obsolete directive that no longer works in modern browsers.

The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a given page. It is used for a vast number of security vulnerabilities other than clickjacking such as XSS. However our guide will be focussed on its use in protection against clickjacking only. The HTTP Content-Security-Policy (CSP) frame-ancestors directive specifies valid parents that may embed a page using an Iframe. It can be used to indicate whether or not a browser should be allowed to render a page in an Iframe by have its value set as any of the following:


 'none'

By specifying ‘none’, no site will be allowed to load the page in a frame.


 'self'

On the other hand, if you specify ‘self’, you can still use the page in a frame as long as the site including it in a frame is the same as the one serving the page.


 frame-ancestors uri

If you specify this, then the site can be displayed in a frame only by uri specified. For example: If you implement the below header directive, then your site will be allowed to be iframed only by the specified url.

ES2021 new features

Maulik Thaker — Mon, 01 Mar 2021 13:54:11 +0000

ES2021 is the version of ECMAScript corresponding to the year 2021. Some features they've added into this version which is very much interesting.

The new JavaScript features in ES2021 are:

A. String.prototype.replaceAll()

A new replaceAll() method has been added to the String prototype. See below example:

const str = "Apple is good for health. You should consume
Apple daily."
const strReplace = str.replaceAll("Apple", "Banana");
console.log(strReplace); // Banana is good for health. You should consume Banana daily.

B. Private methods & Private Accessors

We can restrict the method being called outside of the class by generating private methods.

Class Person{

 #showTypeMethod(){
    console.log("This is a type");
 }

 showHelloMethod(){
    console.log("Hello World");
 } 

}

const person = new Person();
person.showHelloMethod(); // Hello World
person.showTypeMethod(); // Error: person.showTypeMethod is not a function

Here, you can make your showTypeMethod() private by putting # before function name. So now our #showTypeMethod() is private to our class only. If you try to access this method outside of person class then it will cause an error.

C. Promise.any

Promise.any gives you a signal as soon as one of the promises fulfills. This is similar to Promise.race, except Promise.any doesn’t reject early when one of the promises rejects.

const myFetch = url => setTimeout(() => fetch(url), Math.floor(Math.random() * 3000));
const promises = [
  myFetch('/endpoint-1'),
  myFetch('/endpoint-2'),
  myFetch('/endpoint-3'),
];

// Using .then .catch
Promise.any(promises) // Any of the promises was fulfilled.
       .then(console.log) // e.g. '3'
       .catch(console.error); //All of the promises were rejected.

// Using async-await
try {
  const first = await Promise.any(promises); // Any of the promises was fulfilled.
 console.log(first);
}catch (error) { // All of the promises were rejected
  console.log(error);
}

D. Logical Assignment Operators

Assignment operators are used widely in JavaScript to compare and conditionally checked numbers, arguments etc. Normally we write the if condition as below:

let x = 1;
let y = 2;
if(x){
  x = y;
}
console.log(x);

But using assignment operator we can shorthand the if condition like below:

let x = 1;
let y = 2;
x&&=y;
console.log(x);

E. WeakRef & Finalizer

Main use of weak references is to implement caches or mappings to large objects. In many scenarios, we don't want to keep a lot of memory for a long time saving this rarely used cache or mappings. We can allow the memory to be garbage collected soon and later if we need it again, we can generate a fresh cache. If variable is no longer reachable, JavaScript garbage collector automatically removes it.

const callback = () => {
  const aBigObj = {
    name: "Hello world"
  };
  console.log(aBigObj);
}

(async function(){
  await new Promise((resolve) => {
    setTimeout(() => {
      callback();
      resolve();
    }, 2000);
  });
})();

When executing above code, it prints "Hello world" after 2 seconds. Based on how we use the callback() function, aBigObj is stored in memory forever, may be.

Let us make aBigObj a weak reference.

const callback = () => {
  const aBigObj = new WeakRef({    name: "Hello world"  });  console.log(aBigObj.deref().name);}

(async function(){
  await new Promise((resolve) => {
    setTimeout(() => {
      callback(); // Guaranteed to print "Hello world"
      resolve();
    }, 2000);
  });

  await new Promise((resolve) => {
    setTimeout(() => {
      callback(); // No Gaurantee that "Hello world" is printed
      resolve();
    }, 5000);
  });
})();

The first setTimeout() will surely print the value of name. That is guaranteed in the first turn of event loop after creating the weak reference.

But there is no guarantee that the second setTimeout() prints "Backbencher". It might have been sweeped by the gargage collector. Since the garbage collection works differently in different browsers, we cannot guarantee the output. That is also why, we use WeakRef in situations like managing cache.

FinalizationRegistry is a feature of WeakRef which lets programmers register callbacks to be invoked after an object is garbage collected.

const registry = new FinalizationRegistry((value) => {
  console.log(value);
});

Here registry is an instance of FinalizationRegistry. The callback function passed to FinalizationRegistry gets triggered when an object is garbage collected.

(function () {
  const obj = {};
  registry.register(obj, "Hello World");
})();

When obj is garbage collected, the second argument of .register() method is passed to the callback function. So, according to our code logic, when obj is garbage collected, "Hello World" is passed to the callback function and is printed in the console.

F. Numeric Seperators

let x = 1000000; // Not in human readable format right?
console.log(x);

Using Regular Number Literals:

let x = 1_000_000;
console.log(x); // 1000000

For more information, you can visit this link.

There may be many features that changed or added into ES12 but above is most common one where there are mostly useful and effective.

My Steps of Online Learning

Maulik Thaker — Mon, 01 Feb 2021 07:39:46 +0000

There are many ways to enhance or learn new skills that takes you to the next levels. But nowadays, most people are used to learn online (i.e. through web) because it's easy way to update yourself rather than any dependencies on anything. Web surfing is a great way to learning any specific skill to update yourself.

Problem during web surfing

Many times people are distracted themselves while finding any particular about any specific topic as we all know that its a huge ocean of WWW (World Wide Web) and we can get these kind of difficulties very often.

Let me tell you my experience about the same. Whenever I am trying to learn any new thing through online, I often distracted when many options or solutions are available, I got difficulties what to choose OR what will be my best answers. So, I defined some steps according to my roadmap.

Step-1 : Dedication towards your goal

First-most thing is to decide what you needs to learn from upcoming days, months or years and stick into it. Because if you are creating the roadmap of your upcoming skills than its most important part to search about only specific what you intend to achieve. Goal should not be changed once you defined it.

Step-2 : Define the path and platform

Once you decide your goal then many solutions are available to serve you the best. Suppose I am trying to learn my IT related skills let's say JavaScript. So there are many web sites or courses that teach me JS but I need to think whether I will go for websites or to join any specific course according to my feasibility. May be I can go for intro by some of the websites then jump to the course or will find such course which provides me the intro as well as full brief about the JS. This can be vary person to person. But once I defined my way then again its a question about which course should I joined or which website should I prefer ?
To answer this question, I will check some official websites and courses and choose one of them and defined my learning path.

Step-3 : Prove your skills

Now, best thing is to apply your learnings practically. Keep in mind that "Theories will remain theories unless you prove it practically". Each and every learning, you need to prove your knowledge by apply it into some practical way. Consistently, you need to put your skills in more and more practical way. Keep practicing and learn from your mistakes is the best part to motivate yourself. You need to challenge yourself about what you've learned and keep updated about that skill.

So, Guys above are the core steps according to me while dealing with online learning. You need to enhance these steps and divide according to your feasibility and suitability to your skills. Hope you like this blog. Thank you be safe and have a nice day.

Divide Bootstrap Grid into an odd columns

Maulik Thaker — Tue, 15 Sep 2020 12:49:51 +0000

Hello friends. Today I am covering very small topic about how to divide row into odd columns as many of you are requested me earlier. So lets's get started.

So, If you are not familiar with Bootstrap grid, Please refer this link to understand bootstrap grid system.

As we all know bootstrap row is divided into 12 columns maximum and each column has an equal width. We can easily divide our columns into an even number like below

 <div class="row"> <!-- Total width 100% -->
    <div class="col-lg-3">
     <!-- Width of this column will be 25% -->
    </div>
    <div class="col-lg-3">
     <!-- Width of this column will be 25% -->
    </div>
    <div class="col-lg-3">
     <!-- Width of this column will be 25% -->
    </div>
    <div class="col-lg-3">
     <!-- Width of this column will be 25% -->
    </div>
</div> 

<!-- OR --->

<div class="row">
    <div class="col-lg-4">
    </div>
    <div class="col-lg-4">
    </div>
    <div class="col-lg-4">
    </div>
</div>

Here .col-lg-, .col-md-, col-sm-, col-xs- are Bootstrap's grid system work across multiple devices. lg covers large breakpoints like Desktop, md covers medium breakpoints like tablets and ipads, sm means small breakpoints like latest smartphones & xs covers extra small devices.

Now, coming to our focus on dividing grid into an odd columns. If you look at above code where columns are divided into 4 parts then you will get the logic of column width. Bootstrap row is build with full width (i.e. 100%) of your screen size. So, if I want to divide my columns into 5 equal parts then it's very simple to calculate my each column width is having 20% width pretty simple right ?

This needs to be done for Bootstrap 3 only as Bootstrap 4 provide the class name col- which divides your column into an equal parts automatically.

You can use Bootstrap 4 class col- to do your work but it will keep dividing your layout and you can't put the control if you are dealing with any dynamic UI.

  <!-- Bootstrap 4 -->
  <div class="row"> 
    <div class="col">  </div>
    <div class="col">  </div>
    <div class="col">  </div>
    <div class="col">  </div>
    <div class="col">  </div>
     ....
     ....
  </div>
   <!-- col class automatically divides my columns
   into equal parts -->

For example above, if we keep dividing our UI using this col class and if we want control over col-xs- type devices, then eventually UI will not handle automatically. Sometimes it's preferable also with some situations.

So, let's write some CSS to do our work doesn't matter if you are using any older or newer version of Bootstrap. (You can also use SASS / SCSS)

 # Solution

.col-xs-equal,
.col-sm-equal,
.col-md-equal,
.col-lg-equal {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

# Next, we are adding here some media queries with various
  breakpoints

.col-xs-equal {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-equal {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-equal {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-equal {
        width: 20%;
        float: left;
    }
}

Now, you are ready to build your HTML and apply these classes together

<div class="row">
    <div class="col-lg-equal col-md-equal col-sm-equal 
    col-xs-equal">
    ...
    </div>
    <div class="col-lg-equal col-md-equal col-sm-equal 
    col-xs-equal">
    ...
    </div>
    <div class="col-lg-equal col-md-equal col-sm-equal 
    col-xs-equal">
    ...
    </div>
    <div class="col-lg-equal col-md-equal col-sm-equal 
    col-xs-equal">
    ...
    </div>
    <div class="col-lg-equal col-md-equal col-sm-equal 
    col-xs-equal">
    ...
    </div>
</div>

You can always change in media queries according to your UI needs. Here we took example of dividing row into 5 columns so you can also try to divide your column into 7, 9, etc. columns the logic will remain same only need to change width into your applied css.

Angular Image optimization using Gulp

Maulik Thaker — Mon, 10 Aug 2020 08:06:00 +0000

Hello, This is my very first Post in Dev.to and I want to share about how we can reduce image size by using gulp tool in Angular. You can take a tour of gulp [https://gulpjs.com/] in brief if not familiar.

First most you need to create angular project by using

$ ng new project-name

then,

$ cd project-name

and install npm depencencies ( $ npm install)

After that install Gulp as a dev dependencies on your project using following command.

$ npm install -D gulp

Now, create a gulpfile.js at root of your project. One more gulp dependency we need to reduce image size is called gulp-imagemin. Install this dev dependency using below command :

$ npm install -D gulp-imagemin

Now you can write following code into your gulpfile.js

const gulp = require('gulp'); // Initialize gulp 
const imagemin = require('gulp-imagemin');
 function optimizeImages(){
    return src('src/assets/images /*').pipe(imagemin()).pipe(gulp.dest('dist/newProject/assets/images'));
 }
exports.default = optimizeImages; // Call of task as default

Here, gulp is need to be initialized first and then we used here imagemin feature of gulp. After that we create a function (In case of gulp it's task) named optimizeImages() and use src() for accept entry point of our image path (In my case, I usually stored my images at src/assets/images). Now we have to store optimized image at one path right ? So for that we used here gulp.dest('path'). For Angular, we need to create a build for deployment purpose so I run my gulp task after creating dist so I gave the path like dist / newProject/assets/images. Now we need to call our task named 'optimizeImages'. Gulp provide various ways of calling your tasks (publicly and privately) among-them one I used is

exports.default = optimizeImages;

Your gulp task (optimizeImages) is called when you type $ gulp in terminal.

So, let's call our gulp task by:

$ ng build --prod && gulp

You can see the each image size stored at your (dist/newProject/assets/images) destination path and compare it with your source path. It's pretty much reduced. Isn't it nice ? There are many other gulp plugins which can individually taken care of reduce of image size and removed unused css and js that we covered later.

Forem: Maulik Thaker

[Boost]

What's new in the 2025 State of JavaScript survey

Prevent Click-Jacking in your web applications

What is Click-jacking?

Check Click-jacking vulnerability

How to prevent Click-jacking?

1. Frame Busting

2. X-Frame Options & Content-Security-Policy

ES2021 new features

My Steps of Online Learning

Divide Bootstrap Grid into an odd columns

Here `.col-lg-, .col-md-, col-sm-, col-xs-` are Bootstrap's grid system work across multiple devices. `lg` covers large breakpoints like Desktop, `md` covers medium breakpoints like tablets and ipads, `sm` means small breakpoints like latest smartphones & `xs` covers extra small devices.

This needs to be done for Bootstrap 3 only as Bootstrap 4 provide the class name `col-` which divides your column into an equal parts automatically.

Angular Image optimization using Gulp

Forem: Maulik Thaker

[Boost]

What's new in the 2025 State of JavaScript survey

Prevent Click-Jacking in your web applications

What is Click-jacking?

Check Click-jacking vulnerability

How to prevent Click-jacking?

1. Frame Busting

2. X-Frame Options & Content-Security-Policy

ES2021 new features

My Steps of Online Learning

Divide Bootstrap Grid into an odd columns

Here .col-lg-, .col-md-, col-sm-, col-xs- are Bootstrap's grid system work across multiple devices. lg covers large breakpoints like Desktop, md covers medium breakpoints like tablets and ipads, sm means small breakpoints like latest smartphones & xs covers extra small devices.

This needs to be done for Bootstrap 3 only as Bootstrap 4 provide the class name col- which divides your column into an equal parts automatically.

Angular Image optimization using Gulp

Here `.col-lg-, .col-md-, col-sm-, col-xs-` are Bootstrap's grid system work across multiple devices. `lg` covers large breakpoints like Desktop, `md` covers medium breakpoints like tablets and ipads, `sm` means small breakpoints like latest smartphones & `xs` covers extra small devices.

This needs to be done for Bootstrap 3 only as Bootstrap 4 provide the class name `col-` which divides your column into an equal parts automatically.