XSS Explained with React and Vanilla JS Examples | Cross Site Scripting | dangerouslySetInnerHTML

In this video, I talk about the basics of Cross Site Scripting (XSS), how to exploit it and how to prevent it.
See all of the notes and code from this stream here: github.com/CodingGarden/learn...
This is a highlight of a livestream. Watch the full stream here: • What is XSS? | Web Sec...
XSS on Wikipedia: en.wikipedia.org/wiki/Cross-s...
XSS on OWASP: owasp.org/www-community/attac...
XSS on Snyk.io: learn.snyk.io/lesson/xss/
Play the XSS Game: xss-game.appspot.com/
00:00 Welcome
00:22 What is XSS?
01:04 First Look at XSS
01:38 Why this is BAD
02:53 Reflected XSS
03:13 Stored XSS
03:54 Real World XSS
05:05 Twitter XSS Explained
05:34 Blind XSS
06:12 Vulnerable Code with innerHTML
07:51 Safe Code with textContent
08:58 Sanitizing HTML with a custom function
11:50 Safe Code with DOMPurify
14:09 Never Trust User Provided Input
15:16 Preventing XSS Summary
16:24 Fixing Attribute Injection
18:04 This scares me
18:33 XSS in React
19:41 dangerouslySetInnerHTML in React
21:00 Trust no one
21:44 DOMPurify with React
23:04 XSS Brain Implant
23:52 XSS for Backend Devs
24:36 Scanners and Static Code Analysis
25:00 Conclusion / Summary
📩 Sign up for my mailing list: list.coding.garden/
💖 Donate: coding.garden/donate
😍 Pledge: coding.garden/pledge
🎉 Stickers: coding.garden/stickers
💻 Gear List: coding.garden/gear
🔎 Search for more Coding Garden videos here: coding.garden/videos
🗣 View the Coding Garden FAQ here: github.com/CodingGarden/faqs

[@heyjitendra]

Wow this is good. Good demonstration with many examples. Please continue this series.
I would like to make a request. CSRF please in this series. With nextjs and normal nodejs react.
Thank you for this

[@DipamSen]

Great video, amazing editing!

🔥🔥🔥🔥

[@CATtheDrawer]

Sorry to ask this on a video that might be unrelated. But I saw you had some videos on coding overlays for Twitch, and I wanted to know if you have any videos that may help me.
I want to code a png character that talks with a text box on the side of the screen. Ideally, if I can get it so that the text appears like what you would see if you were interacting with a game character. The idea is supposed to be like a pngtuber, but instead of voice activated, I could type put what I want to say, and the text would appear next to the character as if it were speaking.
I'm not sure where to begin to get something like this working or if you have any videos relating to something like this. Hopefully, it's not a bother to ask, and thank you if you are able to help.

[@CodingGarden]

I have a video on the basics of using tmi.js to read messages from twitch chat on a web page: ruclips.net/video/92aki9o1FlM/видео.html
You can read more about tmi here - tmijs.com/
For an overlay like this, you could create a webpage and add it as a browser source. obsproject.com/kb/browser-source
The webpage could listen for messages in a specific channel, and if the message is from the streamer / avatar user, display the message on the page.
To get an old video game like UI easily, you could use something like NES.css - nostalgic-css.github.io/NES.css/
Sorry I couldn't be of more help. If you start building something like this and need help, you can ask on our discord - coding.garden/discord/

[@CATtheDrawer]

​@CodingGarden thank you, I'll be sure to check it out over the weekend! Hopefully, I can figure something out!