DEV Community: Harsh Kamoriya

How Javascript Works on browser ? complete guide

Harsh Kamoriya — Wed, 25 Feb 2026 19:33:28 +0000

Hey champs in this article we will try to understand what is javascript , where it is used and why it is used , this article will focus on high overview of how javascript works behind the scenes it is the intro part of js where we will try to answer some questions .

chaliye shuru karte hai javascript ki kahani

Javascript is a high-level , interpreted , dynamically typed programming language which is mainly used to make web pages interactive and dynamic .

It was originally created to run inside browsers but today it also runs on servers using environement like Node.js . So earlier it was a scripting language whose main task was to control browser but later on it became a fully programming language .

It can run on client side as well as on the server side but for that it need a runtime enviornment .
server : Node.js (V8 + libuv + c++ bindings)
client : browser

Now you will be wondering about what is a browser and what is V8 engine so let us discuss that .

Browser

It is your google chrome and safari where you go and search stuff and connects to internet

so what browser does is it contains a few things in it
1) Rendering engine
2) Javascript Engine(V8)
3) Web APIs
4)Event Loop
5)Networking Layering

each one has their own jobs and working .let us discuss them one by one ,so what happens when you visit a web page Now tell me what is a web page so basically

A web page is made of:

HTML → Structure
CSS → Styling
JavaScript → Behavior

📄 HTML

HTML defines structure. It provides a structure or skeleton to your page .

Example:

<h1>Hello</h1> <button>Click</button>

When browser loads HTML:

👉 It creates a

DOM (Document Object Model) tree

🎨 CSS

CSS defines styling. It basically styles your web page it adds colours and styling to your pages .

Example:

h1 { color:red; }

when browser downloads or load the css file it creates :

👉 CSSOM (CSS Object Model)

🖥 Render Tree

DOM + CSSOM combine to form:

👉 Render Tree

This is what gets displayed on the screen.

So do you understand so basically our webpage is consisting of three things HTML , Css , js , all these files are loaded on the browser and then rendering engine of the browser create a render tree behind the scene and the web page is shown on the screen ,so rendering engine make render tree when js file loads it is forwarded to V8 engine where it gets executed .

V8 engine : It is a javascript engine created by : Google
used in: browser (google) , server(node.js)

What V8 does

Parses JS
Converts to AST
Generates bytecode (Ignition)
Optimizes using TurboFan
Executes machine code
Performs garbage collection

what ever is written in the js is file is analysed and executed by this V8 engine it does not change DOM , or UI the code inside js uses browser APIs to do that , now you will be wondering what are browser’s apis ,so browser provides a lot api’s which Js can use and server different puropses .

Browser gives JavaScript extra capabilities.

🔹 DOM APIs

document
getElementById
querySelector
createElement

🔹 Web APIs

setTimeout
fetch
WebSocket
localStorage
sessionStorage
geolocation
history
navigator

Important:

👉 These APIs are provided by browser

👉 NOT by V8

V8 engine’s code is written in C++
main task is to convert the js code into machine code .So till now we have understood what a browser is what is contains , what is webpage , what is rendering engine , what is v8 engine what are browser apis . Now we will move towards event loop

To understand event loop we have to understand how the code inside the javascript file executes .

How code is executed inside the js engine .

In a script.js file some code is written inside that ,which contains some variables ,some functions , dom manupulation, timeouts, promises , as we know javascript is a single threaded language so every instruction inside that file is executed line by line ,what js engine does is it creates a global execution context a big container which is further divided into two sections :

1) variable enviornment
2)code enviornment

In the variable envioenment all the variables and functions are declared as undefined .
In code enviornment section the code begins to executed line by line as soon as it gets a value it is assigned immediately in the variabl enviornment.when a new function is invoked a new execution context is created which also has these two sections in it ,all these are pushed into the stack know as call stack and executed in the LIFO manner .

now when a promise comes it goes inside microtask queue and when a timeout is called then it goes inside the callback queue .when the call stack is empty then first the promises or you can say that the microtask queue is resolved first and then callback queue get its turn that is being tracked by a Event loop .That means event loop whose task is to perform the code execution fast and asynchronous .

so this is the overview of how js code execution works inside the browser

Full Page Rendering Flow (Complete Picture)

When you open a website:

Step 1

Browser downloads HTML.

Step 2

HTML → DOM tree created.

Step 3

CSS → CSSOM created.

Step 4

DOM + CSSOM → Render Tree.

Step 5

Render Tree → Layout + Paint → Screen.

Step 6

If JS exists:

JS sent to V8
V8 executes JS
If JS modifies DOM:

→ Browser updates DOM

→ Reflow/Repaint happens

→ Screen updates

Summary

Browser =

Rendering Engine (DOM + CSSOM)
JavaScript Engine (V8)
Web APIs
Event Loop

V8 =

Executes JS only

JavaScript =

Language

DOM =

Browser structure representation of HTML

Thank you .

Complete Guide to Web Security: Prevent XSS, Clickjacking, and Sniffing Attacks in Node.js

Harsh Kamoriya — Tue, 24 Feb 2026 12:29:22 +0000

First tell me what do you mean by secure .It means the if some hacker tries to access our website he should not be able to do that . Means there are lot of ways through which your website can be attacked like

→ XSS attack
→ clickJacking
→ sniffing

So these are some kind of attacks to which a website should be capable of preventing other wise the user’s security will get hampered

In this article we will study each and every type of attack completely and will be understanding the working of that particular attack.

What is Xss ?
How many type of Xss attacks are there ?
Understanding how these attacks happen .
What damage these attacks can cause ?
How to protect our website from these attacks ?

What is XSS ?

Xss means cross site scripting

This is a kind of attack where user takes benefit of the forms which are present in your website . In this attack user tries to inject html or javascript code into your codebase via vulnerable or unsecure parameters means via form submisstion , comments , reviews , and all .
let us look into it carefully so basically there are two kind of parameter which the hacker can take advantage of

1) inside get request url

Imagine your website has a search page:

https://example.com/search?q=harsh

Now attacker will inject some script in this url like

Attacker sends victim this URL:

https://example.com/search?q=<script>alert('XSS Attack')</script>

this script could be malicious and can do any thing like attaker can access your cookies or tokens

2) inputs of forms (ex - login form , signup form , comments input , etc.)

Attacker type or inject some sort of malicious javascript code or html code which will be executed by the client browser and boom you are hacked

How many types of XSS are there ?

Reflected XSS attack :

In this type of attack sends a malicious link to the user and when the user clicks on that link a new interface get open in from of it inside that ui it is asked to enter its details like login id and password and boom that data is now gone to the attacker .
How it happens because inside that url some js script is present when that link is put into the browser then browser executes that script which can do anything ,like stealing the tokens , user information ,phishing etc.

It is called reflected because:

Script comes in request and immediately reflects back in response.

Attacker creates malicious link

https://yourwebsite.com/search?q=<script>alert('Hacked')</script>

Victim clicks link

Server responds:

<h2>Results for<script>alert('Hacked')</script></h2>

Browser executes script.

This is generally used in:

1) Phishing emails

2)Whatsapp messages
3)fake login links

Harms it can cause

steal cookies
steal jwt tokens
Fake login form injection
redirect ot malicious website
perform actions on behalf of user

How to protect our website from reflected Xss ?

Input validation (using Zod , joi)
Sanitization (Sanitize html)
Output Escaping
Add security Headers in http request (use helmet)
Use CSP Headers (content script policy)
store JWT tokens in HTTP only cookies

You can study each of the method in another article this section is just theoretical part .

Now let us move on towards next Xss attack which is stored XSS

Stored Xss Attack :

In this type of attack attacker inject some js script inside the parameters of forms like comment , reviews and all those comments are going to be saved in the database so along with that the script also get saved in database when those comments loads on browser of some users the browser executes that script and boom * you’re hacked again *

now you understood meaning of stored

you can think of it like youtube comments someone comment and injects a script in that comment it get stored in db and when it loads it will execute on every other user’s youtube all are hacked

Harms it can cause:

Account takeover
steal JWT tokens
steal passwords
perform actions as victim
Attack Admin Panel

How to prevent this attack from happening ?

Input validation
Input sanitization
Output escaping
Helmet security headers
contenct security policy
use HttpOnly cookies

Now let us move towards the last Xss attack

DOM Xss attack

In this type of xss attack what attacker does is it goes to the repo of the website which he wants to attack and then it insert some malicious program or code into their codebase and then send those files to user when user run those file magic happens he got hacked . Although this type of attack easily predictable like no user would run any kind of file coming from any unknown source so it is not that much dangerous .

one more thing why it is called dom xss because it uses dom properties to hack
like:

innerHTML
outerHTML
document.write
insertAjacentHTML
eval

Harms it can cause

Steal JWT token (if token is stored in localstorage)
Perform actions as user(transfer money , delete account , change password)
Keylogging attack
redirect user
complete frontend control

How to prevent DOM XSS ?

Never use innerHtml (use textcontent)
Never use dangerouslySetInnerHTML
Sanitize data before inserting
Use content security policy
Never store JWT in localstorage (use http only cookies)

This was all about the Xss attacks now we will move towards other attacks like

ClickJacking

Clickjacking (also called UI redressing attack) is a technique where an attacker tricks a user into clicking something different from what they think they are clicking.

In this type of attack attacker embeds a webpage of another website into its own website using iframe tag and that page is shown on the screen but it is not visible on the similar page it makes some attractive and greedy buttons which he placed on some other critical button (like pay , delete transaction and all) so when user clicks the greedy button it clicks the underneath button which make transaction or can delete the user account and all that stuff

How Clickjacking Works

Step-by-step:

Attacker creates a malicious website.
That website loads your real website inside an invisible <iframe>.
The attacker places a fake button on top of your real button.
When the user clicks the fake button, they are actually clicking your real button underneath.

So the user performs an action on your website without knowing.

Real world example

Imagine:

Your website: bank.com
You have a button: "Transfer Money"
User must click it to confirm transaction.

Attacker:

Creates free-gifts.com
Loads bank.com inside an invisible iframe
Places a fake button: "Click here to win iPhone"
User clicks it
Actually clicks "Transfer Money"

💥 Money transferred without user realizing.

Harms it can cause

Account setting changes
password changes
unauthorized access
camera and microphone access
social media autolikes and autoshares
admin action execution

How to prevent ClickJacking

Use X-frame-Options header (using helmet)
Use Content script policy (CSP)

we will discuss these parts of implementaion in some other article

Now we will move towards a new attack know as packet sniffing

Sniffing

So here basically there are two types of sniffing

Packet Sniffing
MIME Sniffing

Packet Sniffing Attack

As we know what ever data we are sending from one place to another is travelling through internet and we are not sending the whole data together what we do is we divide it into small small packets these packets travels from source to destination now the doubt is how these packets get reassemble at destination so each packet has some sort of details like each packet has one sequence number which helps all the packets to get reassemble at the destination so in this way our data is trnasferred or received .
Now the how attacks happen so the attacker can read or capture these data packets using some tools like webshark and all these packets can contain critical information like username , password and all which is now know to the hacker and now he can access your account means you are wasted (hacked)

How it happens because your website is using HTTP instead of HTTPS which is sending data as plain text.
for security we use HTTPs which encrypts and decrypts the data at source and destination . due to which attacker is not able to read the data on traverlling on internet.

If you are sending just plain text anyone

connected to the internet can read or see

Passwords
JWT tokens
Session cookies
API responses
Credit card data

What Damage Can It Cause?

Session hijacking
Credential theft
Identity theft
Data leaks
Financial fraud
Admin takeover

Especially dangerous if:

Cookies are not secure
JWT sent over HTTP
No TLS encryption

How to Prevent these attacks ?

Always use HTTPS ( use SSL/TLS)
Use reverse proxy , AWS or GCP , Let’s encrypt certificate
Enforce Https in Express
Secure Cookies
Use HSTs (Http strict Transport Security)

you can study each of the method of prevention seperately or we will discuss them later in some other article

Now let’s move towards MIME sniffing attack

MIME Sniffing Attack

In this type of attack basically when our server sends some response it also send some information header like content-type header which is usually text/plain but the response is not plain -text it could be image , html or even js but content-type is wrong so when this response is received by the browser it analyse the content-type header and the response as the content-type is not matching with the response it tries to detect the correct content-type of the response by analysing first few bites of the response and imagine what happens it interpretes it incorrectly due to which if attacker has injected some malicious code inside that response get executed by the browser quickly

Harms it can lead to

XSS Attack
CSP bypass

How to prevent this MIME Sniffing ?

use X-content-type-options :nosniff header
Set Proper content-types
Validate Uploads
Use Content-Disposition :attachment

I hope this article will help you in understanding the security concepts of a website . we will see its implementation guide in some other article .

Thank you.