How to prevent XSS

Glitch Tutorials
1

First tutorial on the forum! Yay!

First of all, what is Cross Site Scripting (XSS)? XSS is when JavaScript code is run by a client on a website in an unauthorized manor via a textbox or other method. For example:

https://worried-chestnut-meat.glitch.me/?text=Hello

Notice how the text hello is rendered onto the screen. Now try using the textbox to render some HTML code. You will notice that this also renders to the screen.
image

Now try typing <script>alert("Hello");</script>

What happens? (reply to this thread with the answer)

While it may be a bit funny to write bold text to the page and run alerts in JavaScript, hackers can write code that can give them access to your account (if you had an account and were signed in on the given website).

Not convinced? Check out this demo where I use JavaScript to “hack” myself:

Now, I will teach you how to prevent this:

PHP

Do not do this:

<?php
    echo $_GET['text'];
?>

Do this:

<?php
    echo htmlspecialchars($_GET['text']);
?>

NodeJS

Try a package:

Django

Try a package:

Try running XSS on my new and improved project:
https://ringed-bold-look.glitch.me/

11 Likes
2

Thank you for the tutorial!

6 Likes
3

It’s worth noting that XSS should be prevented on client side before rendered on the page, not server side!

5 Likes
4

DOMPurify is what I would recommend, it also sanitises SVGs and MathML.

6 Likes
5

still not convinced :sweat_smile:

about the chrome extensions

2 Likes
6

Still not convinced of what? That XSS is a problem? Because let me tell you rn, it is a problem, a major one.

6 Likes
7

one of the biggest issues facing web developers every day is XSS, it’s horrible

4 Likes
8

XSS is the 7th top issue web developers are facing. Have s look at OWASP’s top ten :

6 Likes
9

you can prevent it though

10

Most developers dont notice until it’s too late.

1 Like
11

Of course they don’t.

12

It’s actually one of the reasons I like react, you can pass in dirty data into your components


image
image969×377 16.2 KB

3 Likes
13

I think something you should’ve mentioned was EditMyCookie. It is safe and can be used for good and bad.

14

Thanks for the useful tutorial!

I wrote a post about a little-known but dangerous form of XSS once: on dev.to

15

I think you may want to add a colon to the link!

2 Likes
16

yea fixed that lol

1 Like
17

How would you go about this? Block inputs containing “<” ? My school site automatically removes tags - maybe that’s one way.

18

I suppose that could do the trick, but I may be wrong.

19

Using a module like String.prototype.safe.

require("string.prototype.safe");

const htmlString = "<script>alert('XSS')</script>".safe();
5 Likes
20

I see you there :laughing:
image

2 Likes
21

Screen Shot 2020-08-31 at 1.05.30 PM
Screen Shot 2020-08-31 at 1.05.30 PM2636×816 317 KB

Seems like the repo for .safe() disappeared…

2 Likes
22

Indeed, I reset my github account (deleted every repo) to clean the account up, it was really messy, sadly the repo went away, however the source code for the module is pretty simple:

String.prototype.safe = function () {
	return this.split('').join('')
		.replace(/&/g, "&amp;")
		.replace(/</g, "&lt;")
		.replace(/>/g, "&gt;")
		.replace(/"/g, "&quot;")
		.replace(/'/g, "&#039;")
}
5 Likes
23

how can you do such a thing??!??!?!

why did you even remove all your repos? I’d just deal with it

1 Like
24

Nothing wrong with leaving. I’ve heard that Gitlab has quite a few perks.

3 Likes
25

Wow. That’s scary, but also helpful if you want to make an extension so you’re always logged in to a website by syncing your session cookie across your devices.

26

That would trigger quite a lot of security systems as your user agent/ip may not be the same for all devices and would really confuse fingerprinting systems.

2 Likes
27

Good point.

28

I actually transferred my Google not logged-in session cookie from an incognito tab to a normal one because I accidentally got Google dark mode in the incognito tab and wanted it in my main browser session. That’s one good use of transferring session cookies, right?

29

dark mode for what?
that would be an ideal use of transfering cookies because those are pereferences/non-tracking data. Flash has a similar thing for cookies and I do sometimes transfer the my flash data from computer to computer in school settings for convinience.

3 Likes
30

Google.com has dark mode in a limited beta, and I happened to get into the beta tester list in an incognito tab. I transferred the session cookie to a normal tab.

2 Likes
31

That’s cool!

32

I think it’s also worth mentioning that if you’re making an HTML text-sharing website (or page, comment section, any user text-sharing at all), you should use .innerText instead of .innerHTML

1 Like
33

User generated content should be sanitized before it is sent to the server and sent out to a user (you could make a mistake and forget to use .innerText)

2 Likes
34

Probably use something like DOMPurify so that it filters malicious HTML out and allowing you to still use innerHTML.

3 Likes