Attacking the Frontend

Posted on:

A lightning talk about common security issues in frontend applications going through XSS, React escape hatches, resource and encoding urls


Attacking the Frontend

CodingWithCallum™️ Lightning Talk


This presentation was written using obsidian slides which is why the markdown looks a little weird, see attached PDF output and notes of every slide.

Everything underneath "note" below are speaker notes to remind me what to talk about

Common issues

  • Code injection
    • How does the web app handle unexpected data
  • XSS
    • "Cross Site Scripting"
    • Attacker submitted code run in browser
    • CSP by itself cannot prevent XSS
  • HTML elements can run code!


  • Context sensitive output encoding
    • out of the box
    • until you use something with the word dangerous in front of it
  • React will protect you from yourself


  • Don't use this + the linter will yell at you if you do
  • Needs DOMPurify if you need to use it
    • {dangerouslySetInnerHTML: DOMPurify.sanitize({html})}

escape hatches

  • Bypass react and access native DOM APIs
  • Direct DOM Manipulation
  • Good news: React is deprecating this
    • should be disallowed
      • findDOMNode
      • innerHTML
    • createRef is not


Allows us to get outside of react and go straight to the browser

Encoding urls

  • Avoid taking full URL as an input
  • Do URL sanitisation
    • Nextjs does this for us
  • Should allowlist certain urls

Resource urls

  • Javascript & Resource URLs can be a potential sink
    • are being disallowed from React 17+
    • data. still runs

Best practices

  • "If you are going to the DOM directly, talk to security"
  • CSRF
  • Cookies should have samesite set (or better be secure)


  • ReactVulna is a deliberately vulnerable app you can play around with
  • React has a guide on escape hatches
  • Its-fine A collection of escape hatches exploring