Forem: Mainak Chattopadhyay

React JS Superpower - Virtual DOM

Mainak Chattopadhyay — Wed, 06 Dec 2023 05:48:23 +0000

The Virtual DOM (VDOM) is a representation of the real DOM in memory. It is a lightweight, tree-like data structure that mirrors the actual DOM tree. When there are changes to the data model, the VDOM is updated instead of the real DOM. This makes updates to the UI much faster, as it only requires updating the VDOM and then reconciling the changes with the real DOM.

Here are some of the reasons why VDOM is faster than real DOM updates:

Diffing: The VDOM uses a diffing algorithm to efficiently identify the minimum set of changes that need to be made to the real DOM. This avoids the need to re-render the entire DOM tree, which can be expensive.

Batch Updates: VDOM updates are batched together, so that multiple changes can be applied to the real DOM in a single operation. This further reduces the number of times the real DOM needs to be updated.

Selective Updates: VDOM updates are only applied to the parts of the real DOM that have actually changed. This is in contrast to direct DOM updates, which can re-render entire sections of the DOM even if they haven't changed.

No Reflow or Repaint: Updating the VDOM does not trigger reflow or repaint. This means that the browser does not need to recalculate the layout of the page or redraw the pixels on the screen. This can save a significant amount of time, especially for complex UIs.

Overall, the VDOM is a powerful tool that can significantly improve the performance of web applications. By using the VDOM, developers can create more responsive and performant UIs that provide a better user experience.

The Not-so-commonly Covered JS Topics

Mainak Chattopadhyay — Thu, 30 Nov 2023 17:52:29 +0000

In this blog, I would discuss some of the most important Javascript Questions, often asked in the interviews I appeared for.

Immediately Invoked Function Expression (IIFE)

An Immediately Invoked Function Expression (IIFE) is a common JavaScript design pattern that involves defining and invoking a function immediately after its creation. This pattern is often used to create a private scope for variables, avoiding polluting the global namespace and preventing variable collisions.

(function () {
    // code to be executed immediately
})();

Components:

Enclosure in Parentheses:

(function() { ... }) creates an anonymous function expression. Wrapping the function in parentheses is necessary because in JavaScript, function declarations cannot be immediately invoked.

Function Declaration:

function() { ... } is an anonymous function declaration. It can also be a named function if you want to refer to it within its own scope.

Invocation:

The final pair of parentheses () immediately invokes the function. This execution happens right after the function is defined.

Basic IIFE

(function () {
    var localVar = "I am local to the IIFE";
    console.log(localVar);
})();
// localVar is not accessible here

Passing Parameters

(function (param) {
    console.log("Parameter value: " + param);
})("Hello, IIFE!");
// Output: Parameter value: Hello, IIFE!

Returning Values

var result = (function (a, b) {
    return a + b;
})(5, 10);
console.log(result);
// Output: 15

Hoisting

Hoisting is a concept which enables us to extract values of variables and functions even before initialising/assigning value without getting error and this is happening due to the 1st phase (memory creation phase) of the Execution Context.

getName(); // Namaste
console.log(x); // undefined
var x = 7;
function getName() {
  console.log("Namaste");
}

getName(); // Uncaught TypeError: getName is not a function
console.log(getName);
var getName = function () {
  console.log("Namaste");
};
// The code won't execute as the first line itself throws an TypeError.

Variable hoisting:

When you declare a variable (like giving a name to a new toy), the robot takes note of it and puts a label on it.
This label goes to the top of your play area, so you know it's there.
But the actual toy (the value) is put in the right place only when you decide.

Function Hoisting:

Imagine you want to play a game (function) like hide and seek.
You say, "I want to play hide and seek!"
The super-smart robot listens and says,
"Sure! I know how to play hide and seek. Let's play!"
You can start playing before you even tell the robot all the rules because it already knows the game.

Function Expressions:

Function expressions, such as arrow functions and anonymous functions, are not hoisted in the same way as function declarations.
They behave more like variable declarations.

Imagine we want to play another game, like "Simon Says." But this time, we don't have a rule book ready.
Instead, we have a friend named "Simon" who knows the rules and is ready to lead the game.

Temporal Dead Zone

console.log(a); // ReferenceError: Cannot access 'a' before initialization
console.log(b); // prints undefined as expected
let a = 10;
console.log(a); // 10
var b = 15;
console.log(window.a); // undefined
console.log(window.b); // 15

It looks like let isn't hoisted, but it is

Both a and b are actually initialized as undefined in hoisting stage. But var b is inside the storage space of GLOBAL, and a is in a separate memory object called script, where it can be accessed only after assigning some value to it first ie. one can access 'a' only if it is assigned. Thus, it throws error.

Temporal Dead Zone: Time since when the let variable was hoisted until it is initialized some value.

So any line till before "let a = 10" is the TDZ for a
Since a is not accessible on global, its not accessible in window/this also. window.b or this.b -> 15; But window.a or this.a ->undefined, just like window.x->undefined (x isn't declared anywhere)

Reference Error are thrown when variables are in temporal dead zone.

Syntax Error doesn't even let us run single line of code.

Currying

Follow this link to have an in-depth understanding

Closures

Function bundled along with it's lexical scope is closure.

JavaScript has a lexcial scope environment. If a function needs to access a variable, it first goes to its local memory. When it does not find it there, it goes to the memory of its lexical parent. See Below code, Over here function y along with its lexical scope i.e. (function x) would be called a closure.

function x() {
  var a = 7;
  function y() {
    console.log(a);
  }
  return y;
}
var z = x();
console.log(z); // value of z is entire code of function y.

In above code, When y is returned, not only is the function returned but the entire closure (fun y + its lexical scope) is returned and put inside z. So when z is used somewhere else in program, it still remembers var a inside x()

A closure is a function that has access to its outer function scope even after the function has returned. Meaning, A closure can remember and access variables and arguments reference of its outer function even after the function has returned.

Closures can impact memory management, as they can prevent variables from being garbage collected when they are no longer needed.
To avoid memory leaks, it's essential to be mindful of retaining closures and to clean up references when they are no longer required.

Cookies

Get an detailed view about cookies

LocalStorage and SessionStorage

Checkout this comprehensive URL

If you are stuck till here , I would like to give you a goldmine
Deep Dive !!! Cheers

How Does Chrome's V8 Engine Actually Work?

Mainak Chattopadhyay — Wed, 29 Nov 2023 06:45:20 +0000

v8 of Google has Interpreter called Ignition, a compiler called Turbo Fan and garbage collector called Orinoco

JS runs literally everywhere from smart watch to robots to browsers because of Javascript Runtime Environment (JRE).

JRE is like a big container which has everything which are required to run Javascript code.

JRE consists of a JS Engine (❤️ of JRE), set of APIs to connect with outside environment, event loop, Callback queue, Microtask queue etc.

Browser can execute javascript code because it has the Javascript Runtime Environment.

ECMAScript is a governing body of JS. It has set of rules which are followed by all JS engines like Chakra(Edge), Spidermonkey(Firefox)(first javascript engine created by JS creator himself), v8(Chrome)

Javascript Engine is not a machine. Its software written in low level languages (eg. C++) that takes in hi-level code in JS and spits out low level machine code.

Code inside Javascript Engine passes through 3 steps : Parsing, Compilation and Execution

Parsing - Code is broken down into tokens. In "let a = 7" -> let, a, =, 7 are all tokens. Also we have a syntax parser that takes code and converts it into an AST (Abstract Syntax Tree) which is a JSON with all key values like type, start, end, body etc (looks like package.json but for a line of code in JS. Kinda unimportant)(Check out astexplorer.net -> converts a line of code into AST).

Compilation - JS has something called Just-in-time(JIT) Compilation - uses both interpreter & compiler. Also compilation and execution both go hand in hand. The AST from previous step goes to interpreter which converts hi-level code to byte code and moves to execeution. While interpreting, compiler also works hand in hand to compile and form optimized code during runtime. Does JavaScript really Compiles? The answer is a loud YES. More info at: Link. JS used to be only interpreter in old times, but now has both to compile and interpreter code and this make JS a JIT compiled language, its like best of both world.

Execution - Needs 2 components ie. Memory heap(place where all memory is stored) and Call Stack. There is also a garbage collector. It uses an algo called Mark and Sweep.

Additional Information -

The Mark-and-Sweep algorithm is a garbage collection algorithm used in computer programming to automatically reclaim memory that is no longer in use or referenced by the program. It is one of the fundamental techniques for memory management in languages that do not use manual memory management like C or C++. The algorithm consists of two main phases: marking and sweeping.

Mark Phase:
- The algorithm begins by traversing the entire memory heap, starting from the roots (e.g., global variables, local variables, and registers), and marking all the objects that are reachable and still in use.
- It identifies and marks objects that are reachable by following references or pointers from the root set.
Sweep Phase:
- After the marking phase, the algorithm sweeps through the entire memory heap again, deallocating memory that was not marked in the previous phase.
- Unmarked objects are considered as garbage, meaning they are no longer accessible or needed by the program.
- The memory occupied by these unreferenced objects is then freed up and made available for future use.

The Mark-and-Sweep algorithm has some advantages and disadvantages:

Advantages:

It can handle circular references, where a group of objects reference each other in a cycle, as it relies on reachability rather than reference counting.
It reclaims all unreachable memory, preventing memory leaks.

Disadvantages:

It may introduce pause times during the collection process, as it requires stopping the execution of the program temporarily to perform the collection.
Fragmentation can occur in the memory heap as a result of the non-contiguous layout of the reclaimed memory.

While the Mark-and-Sweep algorithm is a classic garbage collection technique, there are other algorithms like generational garbage collection and incremental garbage collection, each with its own set of trade-offs and optimizations.

Inline caching is a technique used in computer programming and language runtime environments, particularly in the context of dynamic dispatch and polymorphism. It aims to optimize method or function calls by caching information about the types of objects involved in the call, reducing the overhead associated with dynamic dispatch.

Here's how inline caching typically works:

First Call:
- When a method or function is called with a specific set of object types, the runtime system records information about the types involved in the call.
- This information is cached or "inlined" directly in the code that performs the method dispatch.
Subsequent Calls:
- On subsequent calls to the same method or function with the same or compatible types, the cached information is used to skip the dynamic dispatch mechanism.
- Instead of going through the usual process of dynamic type resolution and method lookup, the cached information is directly used to determine the appropriate method to invoke.

Inline caching is particularly effective in situations where the types involved in method calls do not change frequently. It reduces the overhead associated with dynamic dispatch and can significantly improve the performance of certain code paths.

This technique is often used in object-oriented languages with dynamic dispatch, such as JavaScript, Python, or Smalltalk. In these languages, objects can have multiple types, and the correct method to call may depend on the actual runtime type of an object.

Inline caching is closely related to the concept of polymorphic inline caching (PIC), where the caching mechanism is designed to handle multiple types efficiently. Polymorphic inline caching is an extension of inline caching that allows for handling a varying number of types associated with a method call.

The effectiveness of inline caching depends on the usage patterns of the program. If the types involved in method calls are stable or change infrequently, the caching mechanism can significantly improve performance by avoiding the overhead of repeated dynamic dispatch.

My first Open Source Contribution Month

Mainak Chattopadhyay — Fri, 03 Nov 2023 16:29:41 +0000

Intro

I was hoping you could take a look at my GitHub Account Link

This was my very first open-source contribution. I am a 3rd Year Engineering Undergraduate at VIT Chennai, trying to break out in the domain.

Highs and Lows

Pull Request 1 - This was about revamping the ReadMe for better navigation and contributing experience.

Pull Request 2 - This was a UI Enhancement for a Hackathon Project.

Pull Request 3 - This helped me learn NEXT JS and JSON - SERVER

Pull Request 4 - This helped me learn Tailwind CSS

Growth

Hacktoberfest is more than just about making contributions. It's also a great opportunity to learn from the open source community.

Many open source projects have active communities on Discord or Slack. These communities are a great place to ask questions and get help from experienced developers.

I also recommend following open source projects on social media and reading their blogs. This is a great way to stay up-to-date on the latest developments and learn about new technologies.

Hacktoberfest 2023 was an amazing experience. I learned a lot, made some great contributions, and connected with the open source community.

If you're a developer, I encourage you to participate in Hacktoberfest next year. It's a great way to learn, give back, and make a difference.

Here are some additional tips for participating in Hacktoberfest:

Start early. Don't wait until the last week of October to start contributing.

Don't be afraid to ask for help. The open-source community is very welcoming and helpful.

Be patient and persistent. It may take some time to get your pull requests merged.

Have fun! Hacktoberfest is a great opportunity to learn and connect with other developers.

hello

Mainak Chattopadhyay — Wed, 30 Aug 2023 16:12:07 +0000

This is TRC BLOG

Security Vulnerabilities and Prevention in HTML5

Mainak Chattopadhyay — Sun, 01 Jan 2023 07:40:43 +0000

The very basics of web development is HTML which provides a lot of functionalities to markup our webpages.

HTML5 has introduced some new features which make web pages richer. New features include new semantic elements like 'header', 'footer', etc., new attributes for form elements like date, time, range, etc., new graphic elements like SVG and canvas, and new multimedia elements like audio and video.

Hence , with increased functionality , the data flow has also increased leading to a possible data theft by attackers.

For example - An attacker can steal the data by inserting some wicked code through HTML forms which will be kept in the database. Security flaws are possible if proper security measures are not taken when using HTML5 features like communication APIs, storage APIs, geolocation, sandboxed frames, offline applications, etc.

Let us explore HTML Security

As HTML applications are web-based applications, developers should take proper measures to safeguard the stored data and communications

The following is the list of a few vulnerabilities that are possible in HTML-->

HTML Injection
Clickjacking
HTML5 attributes and events vulnerabilities
Web Storage Vulnerability
Reverse Tabnabbing

HTML Injection

As the name suggest , the attacker injects a malicious piece of code for channeling the data.

There are two types of HTML Injection -

Stored HTML Injection

The malicious code injected by an attacker will get stored in the backend and will get executed whenever a user makes a call to that functionality.

Reflected HTML Injection

The malicious code will not get code stored in the webserver rather will be executed every time the user responds to the malicious code.

Best Practices to prevent HTML injection -

Use safe Javascript methods like innerText in place of innerHTML
Code Sanitization: Removing illegal characters from input and output refers to HTML code sanitization.
Output Encoding: Converting untrusted data into a safe form where data will be rendered to the user instead of getting executed. It converts special characters in input and output to entities form so that they cannot be executed. For example, < will be converted to "&lt" ; etc.,

Clickjacking

It is an attack where an attacker uses low iframes with low opaqueness or transparent layers to trick users into clicking on something somewhat diverse from what they actually see on the page.

Thus an attacker is hijacking clicks which will execute some malicious code and hence the name 'Clickjacking'.
It is also known as UI redressing or iframe overlay.

For example,
on a social networking website, a clickjacking attack leads to an unauthorized user spamming the entire network of your friends by sending some false messages.

There are two ways to prevent Clickjacking -->

Client-side methods: The most common method is to prevent the webpages from being displayed within a frame which is known as frame-buster or frame-killer.
Though this method is effective in a few cases it is not considered a best practice as it can be easily bypassed.
Server-side methods: Security experts recommend server-side methods to be the most effective methods to defend against clickjacking. Below are the two response headers to deal with this.

Using X-Frame-Options response header.
Using Content Security Policy(CSP) response header.

Note - We would talk about response headers in details in later blogs.

HTML5 Attributes & Events Vulnerabilities

HTML5 has few tags, attributes, and events that are prone to different attacks as they can execute Javascript code. These will be vulnerable to XSS(Cross - site scripting) and CSRF(Cross-Site Request Forgery) attacks.

Examples-

1.Malicious script injection via formaction attribute



<form id="form1" />
<button form="form1" formaction="javascript:alert(1)">Submit</button>

In the above code snippet, the malicious script can be injected in formaction attribute. To prevent this, users should not be allowed to submit forms with form and formaction attributes or transform them into non-working attributes.

2.Malicious script injection via an onfocus event



<input type="text" autofocus onfocus="alert('hacked')"/>

This will automatically get focus and then executes the script injected. To prevent this, markup elements should not contain autofocus attributes.

3.Malicious script injection via an onerror event in the video-tag



<video src="/apis/authContent/content-store/Infosys/Infosys_Ltd/Public/lex_auth_012782317766025216289/web-hosted/assets/temp.mp3" onerror="alert('hacked')"></video>

This code will run the script injected if the given source file is not available. So, we should not use event handlers in audio and video tags as these are prone to attacks.

Lets us take a look into

HTML Sanitization

HTML Sanitization provides protection from a few vulnerabilities like XSS(Cross-site scripting) by replacing HTML tags with safe tags or HTML entities.

The tags such as ,,,,, which are used for changing fonts are often allowed. The sanitization process removes advanced tags like <script> <embed>,<object> and <link>.

This process also removes potentially dangerous attributes like 'onclick' attribute in order to prevent malicious code injection into the application.

Entity names for some HTML characters

When a web browser finds these entities, they will not be executed. But instead, they will be converted back to HTML tags and printed.

Example -

Consider the scenario that an attacker injects the below HTML code into a web page.



<a href="#" onmouseover="alert('hacked')">Avengers</a>

On using HTML sanitization, the response will be as below.



&lt;a href="#" onmouseover="alert('hacked')"&gt; Avengers &lt;/a&gt;

This code will not be executed instead of stored as plain text in the response.

There are many sanitizer libraries available to do this job. Some of the commonly used libraries are DOMPurify, XSS, and XSS-filters.

Local Storage Vulnerabilities

In our web applications, we often store some data in the browser cache. As the data is stored at the client-side, there is a chance of data-stealing by injecting some malicious code, if no proper care is taken. Let us now see how to store the data properly to prevent such attacks.

HTML5 has introduced Web storage or offline storage which deals with storing data in a local cache. Data can be stored using two types of objects in HTML5. Local storage and Session storage. These storages hold data in the form of key-value pairs.

Local storage holds the data in the browser cache until the user deletes it or it expires based on the expiry date given. setItem() method is used to assign data to local storage.

The below code creates three items with names bgcolor, textcolor, fontsize and assigns the values to them.



localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
localStorage.setItem("textcolor", document.getElementById("textcolor").value);
localStorage.setItem("fontsize", document.getElementById("fontsize").value);

Users can view the storage data in the browser by pressing F12 as shown below:

Similarly, session storage holds the data until the session ends or the browser/tab is closed.

An attacker can inject some malicious code and can steal the data stored here. So we should always ensure that sensitive information is not stored at the client side.

Preventive measure -

Use cookies with the 'httponly' flag to protect the data stored at the client-side

Let us get an overview of another type of possible attack

Reverse Tabnabbing

We would try to understand this with the help an example -

Consider a message forum or a blog where an attacker can post his own website link. If any user visits that link will be shown some information but in the background that malicious website will redirect the parent login page to a fake page that looks similar to the original login page.

When a user comes back to the message forum, they appear to be logged out. Without thinking they will enter their credentials to log in as the page looks similar to the original one. Now the attacker can get hold of that authentication data. Now the user will be redirected to the message forum page automatically so that they won't get a doubt that they have entered credentials in a fake login page