React › Security in React (XSS & dangerouslySetInnerHTML)

Why is it risky to build a link's web address directly from user input without checking it first?

Beginner

Answer

A malicious user could enter something like javascript colon followed by harmful code instead of a normal web address, and if that value is used directly as a link's destination, clicking it could run that harmful code. Always validate that a URL actually starts with an expected protocol, like https, before using it as a link.

function isSafeUrl(url) {
  return url.startsWith('https://') || url.startsWith('/');
}

function UserLink({ url, label }) {
  if (!isSafeUrl(url)) return <span>{label}</span>;
  return <a href={url}>{label}</a>;
}

Real-world example A profile page that lets users add a personal website link checks that the submitted address actually starts with https before turning it into a real clickable link, blocking a common trick attackers use to run harmful code.

Common follow-ups: What other user submitted values besides links need similar careful checking before use?;How would a security review test whether this kind of protection is actually working?

Forms: Controlled & Uncontrolled Components;Error Handling