DEV Community

loading...

How TF Does XSS Work?

Tiffany White
Frontend Engineer. Cybersec-curious. Kinda liking Swift. Cat mom. 🐈‍⬛
・1 min read

I tweeted this just 5 minutes ago:

My aim here is to fix a vulnerability of a core React component for an app I’m building I’d like to be the app to showcase on my portfolio and resume. I just don’t understand how XSS works.

Any help?

Discussion (9)

Collapse
mrbenj profile image
Ben Junya

Hey! If you want to learn more about XSS, the best way to learn it is to do some XSS attacks yourself!

There's this great game from Google called the XSS game

xss-game.appspot.com/

I highly encourage you to give it a shot!

Do not feel ashamed to google the answers. Some of the later levels are really hard and can be very tricky.

This little app got me in to security, so much that I picked up my old lockpicks and reminded myself about some of the basics of security, not just in the web developer world, but in general too.

Collapse
nestedsoftware profile image
Nested Software • Edited

Let’s say your web site has a comment feature. Users enter comments that are displayed for everyone else to read.

Suppose I enter a comment that contains an html script tag. If the application doesn’t properly escape this text, it can become incorporated into the body of the html document when the comment is displayed. This script will have the same permissions as a script written by the app developer, so that’s not good.

If you can completely exclude anything that even remotely resembles html or javascript code (or server-side code for that matter), that makes the job easy. That's what I would do for many kinds of forms.

There are lots of different ways to inject code into submitted content, so in the absence of that kind of very simple white-list approach (exclude anything that isn't listed as okay), the general problem can apparently be very hard to solve. If you need to support users saving markup/code in some way, then you should probably use a library (e.g. HtmlSanitizer) that sanitizes that kind of input before using it in any other way (like adding it to the dom or saving it to the server).

That’s the basic idea, hope it helps!

PS: It looks as though React should escape stuff like that for you unless you use dangerouslySetInnerHTML ( reactjs.org/docs/dom-elements.html ), but there may still be some issues: medium.com/javascript-security/avo...

Collapse
phlash909 profile image
Phil Ashby

To add to Ben's swift response: the reference page on XSS from OWASP, which also talks about prevention: owasp.org/index.php/Top_10-2017_A7...

Don't break too many things :)

Collapse
ben profile image
Ben Halpern

Ah, I just replied to you on Twitter, but I’m glad you posted here because it will help others.

Here was my Twitter reply:

And here’s that scenario in practice:

Collapse
tiffany profile image
Tiffany White Author

Thanks Ben. Reading up on it some more.

Collapse
ben profile image
Ben Halpern

Awesome. Other folks might be able to add other explanations or analogies which could add more color.

Collapse
lexlohr profile image
Alex Lohr

basically, XSS means that you can inject stuff through the request (be it GET or POST). Attackers can use this to send a link to the request in question to their victims to misrepresent you on your own site or even to get their credentials, if your site uses any.

To add an XSS vulnerability to a React component, you'd usually have to use dangerouslySetInnerHTML. Don't do that. Ever.

Collapse
sir_wernich profile image
Wernich ️ • Edited

ahh, who remembers when tweetdeck was affected? :)

(oh, that was in ben's reply)

Collapse
shandanjay profile image
Dan Jay

Hope you can get there by watching this playlist