Frontend developers should learn, in order: how untrusted data becomes script in the page, how to use browser security features, where tokens and sessions should live, and how third party scripts and packages widen risk. These map to the OWASP Proactive Controls on input handling, browser features and component security.
The frontend risk picture
Frontend code runs in the user's browser, beside scripts from many other sources. It handles user input, renders data from APIs and holds the user's session. A mistake here does not just break a page. It can hand an attacker the user's session.
Backend training often assumes the frontend is cosmetic. Teach the opposite: the browser is where several serious bugs are born.
Four topics in teaching order
- Untrusted data in the page. Anything that came from a user, a URL or an API can contain markup. Teach developers how their framework escapes output by default, and the specific escape hatches that turn that protection off. Most frameworks name those hatches in a way that should make a reviewer pause.
- Browser security features. The OWASP Proactive Controls include a control titled Leverage Browser Security Features. Cover what your team has enabled, such as content security policy, cookie attributes and frame protections, and what is still missing.
- Sessions and tokens. Where does the app store them, who can read that storage, and what happens if a script is injected? There are trade offs between storage choices, and the team should make the choice knowingly rather than by copying a tutorial.
- Third party code. Every analytics snippet and npm package runs with the page's privileges. Teach developers to ask whether each is needed, who maintains it and what happens if it changes.
Hands on exercises
- Hand developers a small page with a known injection flaw. Ask them to exploit it, then fix it using the framework's safe path rather than a custom filter.
- Open the browser developer tools on your own app and list every script origin. Which ones does nobody remember adding?
- Review your cookie settings together and note each attribute's purpose.
- Walk through the lockfile diff of a recent dependency update and decide what to check.
Mistakes to avoid in the training
Do not teach hand rolled sanitisation as the primary defence. Do not treat client side validation as a security control, since an attacker can skip it. Do not let the session end with a list of rules and no code.
Try it yourself
Click through it at your own pace, or open it full screen.
Frontend projects often have hundreds of transitive packages. See how an inventory exposes the ones nobody chose directly.
Where Safeguard fits
Safeguard provides dependency scanning and SBOM generation, reachability analysis, and a Chrome and Edge extension, a Firefox add-on and a Safari extension. It does not offer training courses. A free scan is at gold.safeguard.sh/scan.
Quick check
Is frontend security just about cross site scripting?
No. It also covers session handling, browser protections, third party scripts and package supply chain.
Should frontend developers learn backend security too?
Enough to know what the server must enforce. The server should never rely on the browser to protect data.
Sources
- OWASP Top 10 Proactive Controls (C3, C6, C8): top10proactive.owasp.org
Last reviewed: 19 October 2026.
