Frontend Security: 3 Holes Found in a Single HTML File

Zero backend, zero database, and zero network requests—yet a single index.html file can still be riddled with vulnerabilities. I recently audited a static page that had absolutely no server-side logic, and it’s a reminder that "client-side only" doesn't mean "secure."

If you're building simple tools or internal dashboards, these are the three common traps that often slip through.

1. The "Hidden" Logic Fallacy

Many developers hide "admin" features or sensitive configuration using simple CSS display: none or conditional JS rendering. Since the entire codebase is delivered to the browser, anyone can open the DevTools and flip a boolean or remove a CSS class to unlock functionality.

The Fix: If it must be secret, it cannot be in the frontend. For static sites, use a basic obfuscation tool or move sensitive logic to a lightweight edge function.

2. LocalStorage Data Leakage

Using localStorage to store user preferences is fine, but storing session tokens or "privileged" flags is a disaster waiting to happen. Any third-party script (like an analytics snippet or a CDN-hosted library) can access everything in localStorage via a simple script.

// Vulnerable: Storing "role" in localStorage
localStorage.setItem('user_role', 'admin');

// Any malicious script can now do:
const role = localStorage.getItem('user_role');
if (role === 'admin') {
  // Trigger unauthorized action
}

3. XSS via URL Parameters

Even without a backend, if your page reads from the URL to display a "Welcome [Name]" message, you've opened the door to Cross-Site Scripting (XSS). If you use .innerHTML to render a query parameter, a user can inject a script tag via the link.

The Vulnerable Way:

const params = new URLSearchParams(window.location.search);
const name = params.get('name');
document.getElementById('welcome').innerHTML = `Hello, ${name}`;

The Secure Way (Deep Dive):
Always use .textContent to ensure the browser treats the input as raw text, not HTML.

const params = new URLSearchParams(window.location.search);
const name = params.get('name');
document.getElementById('welcome').textContent = `Hello, ${name}`;

This is a great reminder for anyone focusing on prompt engineering or AI workflows: when you ask an LLM agent to "quickly whip up a frontend," always double-check how it handles user input and data storage. The speed of generation often overlooks these basic security fundamentals.