CodePark/ questions / XSS: sources, sinks & sanitizing
START PRACTICINGPRACTICE
Frontend question · Frontend security › XSS: sources, sinks & sanitizing

user.website is a value the user typed into their profile. What can go wrong in this component?

function ProfileLink({ user }) {
  return <a href={user.website}>{user.name}</a>;
}
A value like javascript:alert(document.cookie) runs script when someone clicks the link

A javascript: URL in href runs as script in your page when the link is clicked. React escapes the value, but escaping doesn't change the URL scheme. Fix it by parsing the URL and allowing only https: and http:.

"Nothing, because React escapes every value" is the tempting wrong answer. Escaping stops HTML injection, not a dangerous URL. "
user.name can inject HTML" is wrong, because React renders it as text.