DEV Community: Hamdan Khan

Ever wondered if it's possible to manipulate client-side JavaScript code (React, Vue, Angular, etc.) on the browser? The code is easily accessible in the "Sources" tab under the DevTools section. I've written this blog after thorough research!

Hamdan Khan — Sat, 05 Jul 2025 20:44:29 +0000

Hamdan Khan

Jul 5 '25

Manipulating JavaScript App code in browser: Is it possible?

#discuss #javascript #beginners #vulnerabilities

Comments

3 min read

Manipulating JavaScript App code in browser: Is it possible?

Hamdan Khan — Sat, 05 Jul 2025 20:09:03 +0000

Unlike C/C++ applications where source code is compiled into native machine code (.exe, .dll, etc.) and is not exposed to end-users, Javascript Apps (React, Vite, js) that run on the client-side have their source code exposed and that is exactly how it is supposed to work: the bundled code is what makes the app run on our browsers.
Of course, it is:

obfuscated (variables & functions renamed to random combinations of letters)
minimized (unnecessary tabs/whitespaces removed)

But still, it can be pretty easy to guess the logic and discover the variables if you have decent debugging knowledge. This brings us to the topic, fueled by my curiosity:

Is it possible to manipulate Javascript source code in the browser?

const [isLoggedIn, setIsLoggedIn] = useState(false);

Manipulating the source code to change isLoggedIn's default state to true would be interesting, right? (I know this is starting to sound like the "hacking a website using inspect element" agenda)

Now, a quick google search would of course lead us to the answer that it is not possible. But there are still some unanswered questions related to this topic that we should go through:

1) What if we manipulate the source code under the browser's devtools assets?
2) Can we manipulate the variables/states in the browser's console?

Let's find out! We'll spin up a quick and simple Vite + React app in a production (build) environment:

pnpm create vite

pnpm run build

pnpm run preview

Here's our lab rat:

Browser used: Chrome (v138.0)

1) Direct access via assets in Browser DevTools:

The transformed code can be accessed under the assets/ directory in Sources tab in the devtools:

We can see that the names of variables and functions are all obfuscated:

If we directly try to override the code here, the browser prompts us to save the changed source files locally in order to view the desired changes:

This measure ensures that the changes only take place in the local enviornment. Hence, the source code on the actual domain origin, let's say "abc.com", remains unhanged. The local changes are harmless and equivalent to using Inspect Element in the browser, considering the backend server has adequate CORS policy set up.
Hence, no chance of code manipulation here.

More about this feature: developer.chrome

2) Access via browser DevTools' console:

We earlier came across the transformed code. It had some variables in the root of the javascript file:

const X1 = "/assets/react-CHdo91hT.svg"
  , Q1 = "/vite.svg";

Let's check to see if the X1 variable can be accessed via the console. If it can be accessed, it can be modified:

Turns out the javascript code is inaccessible in the global window environment i.e. the environment that the browser's end-users operate in.

The reason behind this behavior is the type of the script used for javascript app code: Module. The scope of the code inside a type="module" script is limited to that module only and inaccessible at the global level.

Since the index.js file is of type module, all the code is pretty much encapsulated and inaccessible. Hence, no chance of code manipulation here either.

End notes:

This is a battle-tested area that we poked around with and there might be other ways to test the vulnerabilities of this topic, but we tried manipulating the code through the most commonly recognized areas: i.e. DevTools
The code, though immutable, is still completely visible. So, it's always recommended to store any sensitive information (API keys or secrets) on the server.
Even when using modules, the usage of global window object to declare any variable/function can expose it globally:

<script type="module">
  const secret = "hidden";
  window.exposed = "visible";
</script>

Multi-level sorting in programming - Priority based sorting

Hamdan Khan — Fri, 27 Jun 2025 12:28:45 +0000

Have you ever stumbled accross the need for sorting your data not on the basis of a single but multiple attributes?

Well let's go through an example:
Suppose we have an array of data: scores, which holds the records of let's say results of people who took part in a competiton. The requirement is to prepare the Final Rankings of the participants i.e. sort the data by scores in descending order.

A simpler un-sorted version of the data, for the sake of explanation, would look somewhat like this:

scores = [
    {score: 90, updatedAt: "2024-06-01", name: "John"},
    {score: 90, updatedAt: "2024-06-01", name: "Bob"},
    {score: 80, updatedAt: "2024-06-02", name: "Charlie"},
    {score: 90, updatedAt: "2024-05-30", name: "Dave"},
    {score: 80, updatedAt: "2024-05-30", name: "Eve"},
]

Sorting this data seems pretty easy. Array.prototype.sort() can be used to sort the array in descending order of scores.

scores.sort((a,b) => b.score - a.score);

// after sorting
[
    {score: 90, updatedAt: "2024-06-01", name: "John"},
    {score: 90, updatedAt: "2024-06-01", name: "Bob"},
    {score: 90, updatedAt: "2024-05-30", name: "Dave"},
    {score: 80, updatedAt: "2024-06-02", name: "Charlie"},
    {score: 80, updatedAt: "2024-05-30", name: "Eve"},
]

John, bob and Dave took the joint first place.
Charlie and Eve tied for the second place.

Multi-level sorting

If we take a deeper look at the scores data, we see that people participated in the competition at different dates. For example, Bob participated on 2024-06-01 whereas Dave participated on 2024-05-30.
For participants with the same score, isn't that a bit unfair to those who participated earlier to be placed below the participants who participated later?

So how do we sort the array now, such that:

The data is sorted in descending order of scores.
For records with same scores, data is sorted in the ascending order of participation dates (earlier -> later).

Would sorting the data twice based on the attributes get us our desired result?

scores.sort((a,b) => b.score - a.score);
scores.sort((a,b) => a.updatedAt - b.updatedAt);

// after sorting 
[    
    {score: 90, updatedAt: "2024-05-30", name: "Dave"},
    {score: 80, updatedAt: "2024-05-30", name: "Eve"},
    {score: 90, updatedAt: "2024-06-01", name: "John"},
    {score: 90, updatedAt: "2024-06-01", name: "Bob"},
    {score: 80, updatedAt: "2024-06-02", name: "Charlie"},
]

Nope, the data would be sorted to the latest sorting order instead i.e. ascending order of participation dates. This looks nothing like a Final Ranking.

Solution

The solution is to sort the data based on multiple conditions. Or we can say sort it on multiple levels:

scores.sort((a,b) => {
    // if scores are not same, sort based on the desc order of score
    if (a.score !== b.score) {
        return b.score - a.score;
    }
    // otherwise sort based on the asc order of participation date
    return a.updatedAt - b.updatedAt;
});

// after sorting
[    
    {score: 90, updatedAt: "2024-05-30", name: "Dave"},
    {score: 90, updatedAt: "2024-06-01", name: "John"},
    {score: 90, updatedAt: "2024-06-01", name: "Bob"},
    {score: 80, updatedAt: "2024-05-30", name: "Eve"},
    {score: 80, updatedAt: "2024-06-02", name: "Charlie"},
]

Now this looks more like a fair Final Ranking.

The sorting conditions can be simplified further using the OR operator:

scores.sort((a,b) => (b.score - a.score) || (a.updatedAt - b.updatedAt));

Progressive Web App (PWA) with Vite : Development Guide

Hamdan Khan — Sun, 02 Jul 2023 11:31:22 +0000

If you are new to PWA development and looking for a way to convert your Single Page App into a PWA, this article can be helpful for you as it provides both a technical and a conceptual POV of PWAs generally and in the context of Vite. (Just to let you know, Vite provides one of the most simplified PWA development experience)

Let's start by understanding the basics of a PWA:

Key Components of PWA:

Progressive Web Apps are web applications that deliver an app-like experience to users. Think of it as a website that you can download and use even when you are offline. They are designed to WORK regardless of the user's device or network conditions.
You might be wondering how is that possible for me when my website makes use of the countless API calls. How will the website work without the internet? That's the tricky part. Let's discover the components of the PWA and understand how they make sure that the website , I mean application runs in the aforementioned conditions.

To be fair, PWAs are a hybrid version of Web and App, but under the hood they are actually JS driven Websites.

Let's take a look at the components of a PWA:

1- Web App Manifest:

The web app manifest is a JSON file that provides essential metadata about the PWA, including its name, icons, colors, and other properties. It allows the PWA to be installed on the user's home screen, similar to a native app.

A barebone manifest.json file:

{
  "name": "Progressive Web App (PWA) Development with 
           Vite: Beginner's Guide",
  "short_name": "PWA Guide",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/images/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
    // can also include icons of other dimesnions
  ]
}

2- Service Workers:

This component will answer the questions about the connectivity of a PWA. Service workers are JavaScript files that act as a proxy between the web app and the network. They enable offline functionality by intercepting network requests, caching resources, and serving them even when the user is offline.
Think of it as a placeholder server which substitutes your main server. The Service workers are responsible for dealing with the API requests.

// First visit - service worker is installed
Client -> Server

// Online mode - service worker acting as a proxy
Client -> Service Worker -> Server

// Offline mode - service worker responding with cached responses
Client -> Service Worker -> Cache

Service workers also enable features like push notifications and background sync.

Registering a service worker in main JavaScript file:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker registered:', registration);
      })
      .catch(error => {
        console.log('Service Worker registration failed:', error);
      });
  });
}

3- Caching:

Caching is basically how the PWAs are able to deal with incoming API requests in offline mode. It also allows the app to load quickly. By utilizing caching strategies, developers can store and serve static assets, API responses, and other static data. Different caching mechanisms, such as runtime caching and pre-caching, ensure that the PWA remains accessible even when the network connection is poor or non-existent.

In this code, we have added an event listener for API requests which checks if the current request matches the cached request it returns the cached response, otherwise call the API request.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

PWA creation with Vite:

Creating PWA without any framework and tool can sometimes be overwhelming for beginners. Vite abstracts away the complexity of manual PWA creation and integrates seamlessly into your development process with the help of a plugin.

Vite PWA Plugin:

The Vite PWA plugin provides an efficient and streamlined way to add PWA functionality to your Vite projects.

To add Vite PWA plugin to your app, follow these steps:

1- Install the vite-plugin-pwa:

npm install vite-plugin-pwa --save-dev

2- Import the plugin into your 'vite.config.js' file:

import { VitePWA } from 'vite-plugin-pwa';

export default {
  plugins: [
    VitePWA()
  ]
};

3- Customize the plugin option to fit your requirements:

export default {
  plugins: [
    VitePWA({
      // generates 'manifest.webmanifest' file on build
      manifest: {
        // caches the assets/icons mentioned (assets/* includes all the assets present in your src/ directory) 
        includeAssets: ["favicon.ico", "apple-touch-icon.png", "assets/*"]
        name: 'Simplifying Progressive Web App (PWA) Development with Vite: A Beginners Guide',
        short_name: 'PWA Guide',
        start_url: '/',
        background_color: '#ffffff',
        theme_color: '#000000',
        icons: [
          {
            src: '/images/icon-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: '/images/icon-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      },
      workbox: {
        // defining cached files formats
        globPatterns: ["**/*.{js,css,html,ico,png,svg,webmanifest}"],
      }
    })
  ]
};

4- Build the app to generate PWA files and run the server:

>> npm run build
>> npm run preview

Note: Only works after building the app.

5- To check if everything is working properly and PWA functionality is achieved, you can look for the Install App icon in the URL bar.

You can also check the Application section in Chrome Devtools which provides useful information about the manifest, registered service worker, and cache storage of the PWA.

The Lighthouse section of Chrome DevTools also provide an insight on the Website's performance score and PWA functionality.

If you want to learn more about the vite-plugin-pwa library, you can visit their official docs.

If you have any queries or need further assistance, please leave your questions in the comment section below. I'll be more than happy to help you on your PWA development journey!

Happy Coding!

Simplifying State Management with Zustand: A Redux and Context API Alternative

Hamdan Khan — Sat, 24 Jun 2023 14:13:49 +0000

There has always been a variety of opinions regarding state management within the React ecosystem. When Redux was released, it was considered a revolutionary technology, as it enabled applications to have an immutable global store, and it solved problems such as prop drilling in an elegant manner. As time has passed, it has remained an excellent and scalable solution.

Additionally, ContextAPI which is a way to manage global state conveniently within a React application has been a favorite, particularly for beginners and for those who prefer a simpler approach to state management as it allows for state to be passed down to child components without the need for props.

Redux has been and still is the dominant and traditional state management tool for the React community. However, the boilerplate-rich nature of Redux often irritates developers and most beginners when they want to get started.

ContextAPI, which is also considered an alternative to Redux for small-scale projects, can be a good escape route for most developers but still, it lacks many features such as code splitting and lazy-loading of states and requires somewhat a boilerplate.

This is where the simple and decent solution - Zustand comes to the rescue.

Zustand:

Zustand is a state management library for React applications that aims to provide a simple and lightweight solution. It offers a minimalistic API while still maintaining powerful features for managing states.

As said in the official docs:

A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated.

This is actually a true statement, as Zustand gets us rid of the lengthy traditional boilerplate and introduces a minimal approach.
The store is created using simply a few lines of code:

// store.js

import { create } from 'zustand'

const useGlobalStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  resetCount: () => set({ count: 0 }),
}))

In the same way, components can access the states and hooks without the need for any providers or wrappers:

// App.js

function Counter() {
  const counter = useGlobalStore((state) => state.count)
  return <h1>Count : {count}</h1>
}

function Controls() {
  const increment = useGlobalStore((state) => state.increment)
  const resetCount = useGlobalStore((state) => state.resetCount)

  return (
    <>
        <button onClick={increment}>Increment</button>
        <button onClick={resetCount}>Reset</button>
    </>
)
}

Why Zustand?

Small, fast, and scalable state management solution based on simplified Flux principles.
Does not require other dependencies to reduce boilerplate code.
Handles common pitfalls like the zombie child problem, React concurrency, and context loss between mixed renderers.
Components can directly use the store hook without the need for providers.
Offers less boilerplate compared to using Redux and Context directly.
Optimizes rendering by updating components only when necessary.

This is just the tip of the iceberg. Besides these, there are numerous other features that Zustand offers such as Async functions, Middlewares, Redux dev tools, and many more.

Choosing the Best Approach: React Router vs. Conditional Rendering for Multi-Step Forms

Hamdan Khan — Thu, 22 Jun 2023 16:19:27 +0000

Have you ever come across the decision of whether to choose React Router or Conditional rendering when creating a Multi-step form or a component that involves multiple steps? Let's discuss which one is the best approach and why.

Whether it is a survey form, a dashboard, or a checkout process, developers often can't figure out the best approach to create the components. Keeping the performance of the site in mind, they need to carefully consider whether to leverage React Router or utilize conditional rendering. Both approaches have their strengths and considerations that can impact the overall performance of the site.

Overview of React Router and Conditional Rendering:

Generally speaking, React Router and Conditional rendering both have their different and unique use cases and commonly we do not get to see a conflict of choice between these two. But in the case of multi-step forms, developers often find themselves at a crossroads.

React Router:

React Router, a powerful routing library for React applications, provides a structured way to handle navigation and rendering of different components based on URLs. By defining routes and associating them with specific components, React Router ensures a smooth user experience as users navigate through different steps or pages of the form. It efficiently manages the state and re-renders only the necessary components, optimizing performance by reducing unnecessary component updates.

Conditional Rendering:

Conditional rendering offers a dynamic approach. Developers can conditionally render components based on specific conditions or states within the application. This approach can be advantageous for performance since it allows for more fine-grained control over rendering, avoiding unnecessary re-renders of components that are not currently needed. However, improper use of conditional rendering can lead to complex logic and potentially impact performance if not carefully implemented.

Demonstration using React Router:

A demonstration of a simple multi-step form using React-router looks can be seen below. You can also implement lazy loading for a better experience according to your needs.
In this code, different step components named Step1, Step2, and so on are defined as routes with their paths accordingly.

// App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Step1 from './components/Step1';
import Step2 from './components/Step2';
import Step3 from './components/Step3';
import Summary from './components/Summary';

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route exact path="/" component={Step1} />
          <Route path="/step2" component={Step2} />
          <Route path="/step3" component={Step3} />
          <Route path="/summary" component={Summary} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

The Step components are likely defined as follows, which redirect to the next component by the redirect utility from react-router.

// Step1.js

import React from 'react';
import { redirect } from 'react-router-dom';

function Step1() {

  const handleNext = () => {
    // Navigates to the given location
    redirect("/step2");
  };

  return (
    <div>
      <h2>Step 1</h2>
      {/* Add your form fields and logic here */}
      <button onClick={handleNext}>Next</button>
    </div>
  );
}

export default Step1;

In the same way, the other steps' components can be defined.

Demonstration using Conditional rendering:

Multi-step form created using conditional rendering is demonstrated as follows, in which a state "step" which keeps track of the form steps is created. With the help of switch-cases or logical operator AND (&&), the components corresponding to the state can be rendered.

import React, { useState } from "react";
import Step1 from './components/Step1';
import Step2 from './components/Step2';
import Step3 from './components/Step3';

const MultiStepForm = () => {
  const [step, setStep] = useState(1);

  const renderStep = () => {
    switch (step) {
      case 1:
        return (
          <Step1 setStep={setStep}/>
        );
      case 2:
        return (
          <Step2 setStep={setStep}/>
        );
      case 3:
        return (
          <Step3 setStep={setStep}/>
        );
      default:
        return null;
    }
  };


  return <div>{renderStep()}</div>;
};

export default MultiStepForm;

The steps components follow a similar logic as in the previous method but instead of navigating to the given location by clicking the Next or Previous button, the state "step" is updated which renders the matching step as in switch case statements.

// Step1.js

import React from 'react';
import { redirect } from 'react-router-dom';

function Step1({setStep}) {

  const handleNext = () => {
    // Updates the "step" state
    setStep(2);
  };

  return (
    <div>
      <h2>Step 1</h2>
      {/* Add your form fields and logic here */}
      <button onClick={handleNext}>Next</button>
    </div>
  );
}

export default Step1;

Similarly, the other steps' components can be made using the same logic.

Comparison between the both:

1) React Router:

React Router optimizes performance by loading components only when necessary.
React Router leverages browser history and URL management, enabling smooth navigation and efficient URL handling.
Structured for code splitting and lazy loading components on-demand, reducing initial load times.
Offers a high level of flexibility as it provides a structured approach to handle routing, making it easier to add new steps or modify the form flow.
Provides an organized and structured codebase, facilitating collaboration and future updates.

2) Conditional Rendering:

Conditional rendering provides control over rendering components by rendering only the necessary components.
URL management can not be achieved efficiently when using Conditional rendering.
Code splitting and Lazy loading can also be achieved in this method but can lead to complex code as steps increase.
Also offers flexibility on small-scale projects, however managing complex conditional logic across multiple steps can become challenging.
Can sometimes lead to complex and nested code structures. As the number of steps increases, the conditional logic may become complicated.

Conclusion:

In conclusion, React Router and conditional rendering each offer distinct advantages for creating multi-step forms. React Router excels in performance optimization, flexibility, and code organization, while conditional rendering provides fine-grained control and customization.

Conditional rendering can be a better choice for small-scale projects as it provides more control (such as Registration pages, review forms, and filtered searches).
While React router is a good fit for complex projects as it provides a structured way of writing code (such as Survey forms, dashboards, complex data entry forms, and checkout processes).