Engrain by ByteRush

QLT.05.01 Mid-level· 12 minCore — asked often

Threat modeling and the OWASP Top 10 for frontend engineers

Think like an attacker: list assets, attackers and trust boundaries, treat the browser as hostile territory, and map the OWASP Top 10:2025 to the frontend work you do every day.

Comes up in: Web fundamentals, Recruiter screen

Learn#

Ravi’s team ships a login page with ?next= so users return to where they were. A week later, phishing emails send users to /login?next=https://evil.example/fake-bank. Users log in for real, then land on a fake page that asks for their card.

A threat model answers four short questions. What are we protecting? Who might attack it? How could they get in? And what do we do about it? A trust boundary is where data passes from something you do not control into something you do. Examples are URL parameters entering your code, and requests from the browser reaching your server. Everything users can reach is your attack surface.

The browser is the attacker’s computer as much as your user’s. Anyone can edit your JavaScript, change requests and skip your checks. So security decisions belong on the server. Frontend checks only make the experience better.

Threat-modeling a login pageStep 1 of 4

State

  • assets: password, session, account

Assets on a login page: the user's password, the session cookie, and the account behind it.

Read the steps as text
  1. Assets on a login page: the user's password, the session cookie, and the account behind it.
  2. Attackers: a phishing site, a script injected through XSS, a bot guessing passwords, a malicious npm package.
  3. Trust boundaries: browser → server, your code → third-party scripts, URL parameters → your code. Data crossing them is untrusted.
  4. One finding: /login?next=https://evil.example sends users to a fake site after a real login. Fix: allow only same-site paths.

Predict#

Predict first

Your checkout page hides the 'Apply staff discount' button for normal users. The discount API does not check the role. Is it safe?

Interview angle#

Say it like this — about 30 seconds

“I start by listing the assets, such as sessions, personal data and payments. Then the attackers, such as XSS, phishing, bots and bad packages. Then the trust boundaries, where untrusted data enters. I check each boundary. The OWASP Top 10 for 2025 maps well to frontend work. Broken access control means the server must check permissions. Injection includes XSS. Supply chain failures cover npm packages. The browser is untrusted, so real checks happen on the server.”

Stays on your device. Nothing is uploaded.
Follow-up What is the first item of the OWASP Top 10:2025?
A01 Broken Access Control: users acting outside their permissions, often because only the UI enforced them.
Follow-up What is an open redirect, and how do you fix it?
A redirect target taken from user input; allow only same-origin relative paths or an allowlist.
Follow-up Which Top 10 item covers npm dependency risks?
A03 Software Supply Chain Failures: compromised or vulnerable packages and build tools.

Practice#

Guided

Fix the login page’s open redirect: accept only safe, same-origin targets from ?next=.

Done when

  • Same-origin paths keep their search and hash.
  • Protocol-relative URLs, other origins and javascript: URLs fall back.
  • A missing value falls back.
Your solution
Ctrl/⌘ + Enter

Remember#

Try to answer each card before you open it. Then add them to your reviews.

Four questions of a threat model?

What are we protecting, who attacks, how could they get in, what do we do about it.

What is a trust boundary?

Where data passes from something you do not control into something you do.

What is A01 in the OWASP Top 10:2025?

Broken Access Control.

Why is //evil.com an unsafe redirect target?

It is protocol-relative, so it goes to another host.

Go deeper

Four layers. Stop at the one your interview needs; each ends with a quick check.

The core ideaEvery round

Common boundaries: URL and form input into your code, postMessage from other windows, the browser to your API, third-party scripts and npm packages into your bundle. Validate and encode at each one.

Check yourself: Name three trust boundaries in a typical frontend.

URL and form input into your code, browser to server, third-party scripts into your page.

How it works underneathSenior rounds

Parsing with new URL(next, appOrigin) resolves tricky forms such as //evil.com and /\evil.com the way browsers do, so you compare the real origin, not the raw string.

Check yourself: Why does new URL(next, origin) help validate a redirect?

It resolves relative and tricky forms, so you can compare the final origin.

Edge cases and trapsWhere people slip
The 2025 list: A01 Broken Access Control, A02 Security Misconfiguration, A03 Software Supply Chain Failures, A04 Cryptographic Failures, A05 Injection, A06 Insecure Design, A07 Authentication Failures, A08 Software or Data Integrity Failures, A09 Security Logging and Alerting Failures, A10 Mishandling of Exceptional Conditions .
Check yourself: Which OWASP 2025 category is new and covers exceptions?

A10 Mishandling of Exceptional Conditions.

In productionStaff-level answers

Keep threat models short and update them when features, data flows or third parties change. Frontend items to check each time: XSS (QLT.05.02), CSRF and cookies (QLT.05.04), CSP, dependencies, and secrets in bundles .

Check yourself: How often should a threat model be revisited?

When the design changes: new features, data, integrations or third parties.

Finished the five steps? Mark it, and its cards join your reviews.

Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.