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?
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (9)
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.
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...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 :)
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:
My All-Time Favorite Demonstration of a Cross-Site Scripting Attack
Ben Halpern
Thanks Ben. Reading up on it some more.
Awesome. Other folks might be able to add other explanations or analogies which could add more color.
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.
ahh, who remembers when tweetdeck was affected? :)
(oh, that was in ben's reply)
Hope you can get there by watching this playlist