Frontend security matters because the browser is a hostile environment: anyone can inspect your code, manipulate requests, and attempt to inject malicious content. The most important client-side vulnerability for React developers is cross-site scripting (XSS) — injecting malicious scripts that run in other users' browsers — which can steal data, hijack sessions, and impersonate users. Understanding and preventing it is essential.
React is fairly safe by default: JSX automatically escapes the values you embed, so rendering user input as text cannot inject scripts. The danger arises when you bypass this protection — most notably with dangerouslySetInnerHTML — or mishandle URLs, tokens, and secrets. Most React XSS vulnerabilities come from deliberately stepping around React's built-in escaping.
This lesson covers how React's auto-escaping protects you, the dangers of dangerouslySetInnerHTML and how to sanitise HTML safely, secure handling of URLs and authentication tokens, the public nature of client code, and the principle of never trusting client input. The aim is to write React that is secure by default and deliberate where it is not.