In today’s modern web applications, frontend security is one of the most overlooked yet most critical aspects of development.
Many developers focus heavily on UI, performance, and features, while unintentionally ignoring security flaws that can lead to data breaches, account takeovers, and serious business risks.

In this blog, we will explore the most common frontend security bugs found in JavaScript and React applications, why these vulnerabilities are dangerous, and how attackers exploit them in real-world scenarios.
Most importantly, each issue is explained with practical fixes and real code examples, so you can directly apply these solutions in your projects.

Whether you are a beginner frontend developer, an experienced React engineer, or preparing for technical interviews, this guide will help you build safer, more secure web applications by following industry best practices.

1. Cross-Site Scripting (XSS)

❌ Problem
User input sanitize না করলে attacker malicious script inject করতে পারে।

element.innerHTML = userInput;

✅ Fix

import DOMPurify from "dompurify";

element.innerHTML = DOMPurify.sanitize(userInput);

✔️ সবসময় user input sanitize করতে হবে।

2. DOM-based XSS

❌ Problem

document.getElementById("msg").innerHTML = location.hash;

✅ Fix

document.getElementById("msg").textContent = location.hash;

✔️ innerHTML এড়িয়ে চলুন।

3. Unsafe dangerouslySetInnerHTML (React)

❌ Problem

<div dangerouslySetInnerHTML={{ __html: data }} />

✅ Fix

<div
  dangerouslySetInnerHTML={{
    __html: DOMPurify.sanitize(data)
  }}
/>

4. Exposed API Key in Frontend

❌ Problem

const API_KEY = "sk-123456";

✅ Fix

VITE_API_URL=https://api.example.com
fetch(import.meta.env.VITE_API_URL);

✔️ Secret key কখনো frontend-এ রাখবে না।

5. JWT Stored in LocalStorage

❌ Problem

localStorage.setItem("token", jwt);

✅ Fix (Recommended)

Set-Cookie: token=jwt; HttpOnly; Secure; SameSite=Strict

✔️ HttpOnly cookie বেশি secure।

6. CSRF Protection Missing

❌ Problem

fetch("/api/delete", { method: "POST" });

✅ Fix

fetch("/api/delete", {
  method: "POST",
  headers: {
    "X-CSRF-Token": csrfToken
  }
});

7. Client-side Validation Only

❌ Problem

if (price < 0) return;

✅ Fix

✔️ Frontend + Backend দুই জায়গায় validation করতে হবে।

8. IDOR (Insecure Direct Object Reference)

❌ Problem

fetch(`/api/user/${userId}`);

✅ Fix

fetch("/api/user/me", {
  headers: { Authorization: token }
});

✔️ Permission backend-এ verify করতে হবে।

9. Clickjacking Attack

❌ Problem

No protection

✅ Fix (Server Header)

X-Frame-Options: DENY

OR

Content-Security-Policy: frame-ancestors 'none';

10. Open Redirect Vulnerability

❌ Problem

window.location = redirectUrl;

✅ Fix

const allowedRoutes = ["/home", "/profile"];
if (allowedRoutes.includes(redirectUrl)) {
  window.location = redirectUrl;
}

11. Mixed Content Issue

❌ Problem

<script src="http://example.com/app.js"></script>

✅ Fix

<script src="https://example.com/app.js"></script>

12. Console Logs in Production

❌ Problem

console.log(userPassword);

✅ Fix

if (import.meta.env.DEV) {
  console.log("Debug only");
}

13. Source Map Exposed in Production

❌ Problem

Source code readable হয়ে যায়।

✅ Fix (Vite Example)

build: {
  sourcemap: false
}

14. Unsafe File Upload

❌ Problem

<input type="file" />

✅ Fix

<input type="file" accept=".jpg,.png,.jpeg" />

✔️ Backend validation অবশ্যই লাগবে।

15. Vulnerable Dependencies

❌ Problem

Outdated npm packages

✅ Fix

npm audit
npm audit fix

🔑 Final Security Rules (Must Remember)

Secure Coding Frontend Security Bugs: Common Problems & Practical Fixes (JavaScript / React) was originally published in System Weakness on Medium, where people are continuing the conversation by highlighting and responding to this story.