1 00:00:02,070 --> 00:00:05,410 Now after exploring CSRF attacks, 2 00:00:05,410 --> 00:00:08,693 let's move on to XSS attacks. 3 00:00:09,538 --> 00:00:12,330 XSS stands for cross-site scripting, 4 00:00:12,330 --> 00:00:14,720 so the X stands for a cross 5 00:00:14,720 --> 00:00:17,430 because, well, it looks like a cross. 6 00:00:17,430 --> 00:00:20,010 And cross-site scripting attacks 7 00:00:20,010 --> 00:00:24,630 are all about injecting malicious JavaScript code 8 00:00:24,630 --> 00:00:27,163 into the content of a website. 9 00:00:28,020 --> 00:00:29,430 So we've got our typical setup 10 00:00:29,430 --> 00:00:31,730 let's say where we have a backend, 11 00:00:31,730 --> 00:00:35,820 maybe talking to a database or some other data storage, 12 00:00:35,820 --> 00:00:37,040 and we've got a client, 13 00:00:37,040 --> 00:00:40,610 so a browser requesting a website from our backend, 14 00:00:40,610 --> 00:00:41,850 from our server, 15 00:00:41,850 --> 00:00:45,570 and then some website is displayed in that browser. 16 00:00:45,570 --> 00:00:48,000 Now, the content that is displayed 17 00:00:48,000 --> 00:00:51,530 will very likely be fetched from our database 18 00:00:51,530 --> 00:00:54,010 or from some other data store. 19 00:00:54,010 --> 00:00:58,140 So the server, the backend, renders let's say a template 20 00:00:58,140 --> 00:01:00,780 and therefore produces HTML code 21 00:01:00,780 --> 00:01:04,410 which is shown to the user, to the visitor in the browser 22 00:01:04,410 --> 00:01:06,820 and that content that is rendered, 23 00:01:06,820 --> 00:01:10,210 so the content of the generated HTML file 24 00:01:10,210 --> 00:01:13,590 is very likely fetched from some data source. 25 00:01:13,590 --> 00:01:15,530 For example, if you're building a blog, 26 00:01:15,530 --> 00:01:18,750 then the blog posts, the list of blog posts, 27 00:01:18,750 --> 00:01:20,780 and the individual blog posts 28 00:01:20,780 --> 00:01:23,250 are coming from a database, for example. 29 00:01:23,250 --> 00:01:26,210 That's what we built before in the course already. 30 00:01:26,210 --> 00:01:30,220 Now with an XSS attack, as an attacker, 31 00:01:30,220 --> 00:01:35,220 we try to sneak some malicious JavaScript code 32 00:01:35,240 --> 00:01:40,100 into the content that will be part of that generated page 33 00:01:40,100 --> 00:01:42,780 so that this rendered HTML page 34 00:01:42,780 --> 00:01:46,730 contains malicious browser side JavaScript code 35 00:01:46,730 --> 00:01:50,170 which is therefore executed when that page loads 36 00:01:50,170 --> 00:01:52,290 in the browser of a visitor. 37 00:01:52,290 --> 00:01:55,380 And therefore, it executes for every visitor 38 00:01:55,380 --> 00:01:57,160 in their browsers. 39 00:01:57,160 --> 00:02:01,550 And since browser side JavaScript is very powerful, 40 00:02:01,550 --> 00:02:04,750 for example, you could use it to send Ajax requests 41 00:02:04,750 --> 00:02:07,560 and then send all kinds of requests 42 00:02:07,560 --> 00:02:10,570 to again send money or anything like that, 43 00:02:10,570 --> 00:02:13,180 this is a real problem. 44 00:02:13,180 --> 00:02:15,930 Now, again, I prepared a project here 45 00:02:15,930 --> 00:02:17,650 into which we'll take a look 46 00:02:17,650 --> 00:02:19,990 where I will show you this attack pattern 47 00:02:19,990 --> 00:02:22,350 and what the problem with it is. 48 00:02:22,350 --> 00:02:25,730 It's in this XSS folder which was part of the project 49 00:02:25,730 --> 00:02:28,840 you found attached earlier in this course section. 50 00:02:28,840 --> 00:02:32,530 And in there, you got another Node Express application. 51 00:02:32,530 --> 00:02:34,900 Again, cross-site scripting attacks 52 00:02:34,900 --> 00:02:37,850 are not exclusive to Node Express though. 53 00:02:37,850 --> 00:02:41,500 Any website can be vulnerable to that. 54 00:02:41,500 --> 00:02:44,190 And here, we got a very basic site. 55 00:02:44,190 --> 00:02:48,170 We, for example, don't have authentication in there anymore 56 00:02:48,170 --> 00:02:50,350 because it really doesn't matter. 57 00:02:50,350 --> 00:02:53,670 Now, if your site does have authentication, 58 00:02:53,670 --> 00:02:57,500 then XSS might be able to do even more damage 59 00:02:57,500 --> 00:03:00,580 because with that injected JavaScript code, 60 00:03:00,580 --> 00:03:04,330 you would be able to, again, send requests 61 00:03:04,330 --> 00:03:07,570 on behalf of the authenticated users to, 62 00:03:07,570 --> 00:03:09,800 for example, send money somewhere. 63 00:03:09,800 --> 00:03:11,940 But again, it's not technically required. 64 00:03:11,940 --> 00:03:14,640 Authentication is not technically required 65 00:03:14,640 --> 00:03:16,980 to be vulnerable to XSS. 66 00:03:16,980 --> 00:03:19,740 And therefore, here for simplicity reasons, 67 00:03:19,740 --> 00:03:22,610 to keep that code a bit more simple, 68 00:03:22,610 --> 00:03:25,080 I actually omitted authentication. 69 00:03:25,080 --> 00:03:29,303 But with or without it, you can have XSS vulnerabilities. 70 00:03:30,450 --> 00:03:32,240 Now, if we have a look at the routes we get, 71 00:03:32,240 --> 00:03:33,460 it's very simple. 72 00:03:33,460 --> 00:03:35,870 I just got three routes in here, 73 00:03:35,870 --> 00:03:39,680 one for redirecting to /discussion. 74 00:03:39,680 --> 00:03:41,700 And on the discussion page, 75 00:03:41,700 --> 00:03:46,520 I'm fetching a bunch of comments from a comments collection. 76 00:03:46,520 --> 00:03:48,410 Again here, I'm using MongoDB. 77 00:03:48,410 --> 00:03:50,070 So if you wanna follow along, 78 00:03:50,070 --> 00:03:52,940 you need to have MongoDB up and running. 79 00:03:52,940 --> 00:03:55,210 And then here in the post route, 80 00:03:55,210 --> 00:03:58,310 we actually handled a submission of a new comment 81 00:03:58,310 --> 00:04:01,350 and then it's added into the database. 82 00:04:01,350 --> 00:04:03,020 And the dummy website we're building here 83 00:04:03,020 --> 00:04:05,700 is a very simple discussion platform 84 00:04:05,700 --> 00:04:08,120 where users can submit comments 85 00:04:08,120 --> 00:04:10,203 and see the comments of others. 86 00:04:11,080 --> 00:04:14,030 In the views, I only got one main view here 87 00:04:14,030 --> 00:04:18,440 and that is a view where I output all the submitted comments 88 00:04:18,440 --> 00:04:22,520 and where I have a form for sending a new comment. 89 00:04:22,520 --> 00:04:23,610 As a side note, 90 00:04:23,610 --> 00:04:27,940 here you should definitely also add that CSRF token 91 00:04:27,940 --> 00:04:31,410 because every website should protect against CSRF 92 00:04:31,410 --> 00:04:33,820 and therefore every form in every website 93 00:04:33,820 --> 00:04:35,770 should have a CSRF token. 94 00:04:35,770 --> 00:04:38,780 I just don't have it here because with this example, 95 00:04:38,780 --> 00:04:41,490 I'll specifically focus on XSS, 96 00:04:41,490 --> 00:04:46,383 but you definitely would want to have your CSRF token here. 97 00:04:47,220 --> 00:04:50,000 So that is a must have for every website 98 00:04:50,000 --> 00:04:53,810 and we'll see it again later in the big course project 99 00:04:53,810 --> 00:04:54,710 which we'll build. 100 00:04:55,630 --> 00:04:56,463 But for the moment, 101 00:04:56,463 --> 00:04:59,340 let's focus on cross-site scripting attacks. 102 00:04:59,340 --> 00:05:00,930 And to show you how that works, 103 00:05:00,930 --> 00:05:04,600 again, I'll open this integrated terminal in VS Code 104 00:05:04,600 --> 00:05:07,580 and I'll navigate into the XSS folder. 105 00:05:07,580 --> 00:05:09,540 And there we can run npm install 106 00:05:09,540 --> 00:05:11,360 to install all dependencies 107 00:05:11,360 --> 00:05:14,463 and then npm starts to start this server. 108 00:05:16,370 --> 00:05:19,500 If you now go to local host 3000/nothing, 109 00:05:19,500 --> 00:05:22,300 you'll be redirected to /discussion. 110 00:05:22,300 --> 00:05:25,400 And there, you should be able to submit new comments 111 00:05:25,400 --> 00:05:27,650 and then you see the comments here. 112 00:05:27,650 --> 00:05:31,900 Again, it's a very basic site, definitely not fancy at all, 113 00:05:31,900 --> 00:05:34,420 but this is really not about the styling 114 00:05:34,420 --> 00:05:35,530 or anything like that. 115 00:05:35,530 --> 00:05:38,423 I just wanna show the basic attack patterns. 116 00:05:39,750 --> 00:05:42,610 Now here, we got this form 117 00:05:42,610 --> 00:05:46,720 and what happens on this site is, of course, these comments, 118 00:05:46,720 --> 00:05:51,060 which are output here, are user generated content. 119 00:05:51,060 --> 00:05:54,170 All these comments are generated by users, 120 00:05:54,170 --> 00:05:55,940 so we take some user input 121 00:05:55,940 --> 00:05:58,200 and we then save that in a database 122 00:05:58,200 --> 00:06:02,090 and then we serve that user input back to our visitors. 123 00:06:02,090 --> 00:06:05,770 And, of course, all visitors would see these comments here, 124 00:06:05,770 --> 00:06:08,860 not just the visitor who left the comment. 125 00:06:08,860 --> 00:06:11,680 And even if you had authentication in place, 126 00:06:11,680 --> 00:06:16,400 then maybe not all visitors are able to send a comment. 127 00:06:16,400 --> 00:06:18,900 They might need to log in first, 128 00:06:18,900 --> 00:06:21,790 or maybe they can't all see the comments. 129 00:06:21,790 --> 00:06:24,530 They might need to log in for that as well. 130 00:06:24,530 --> 00:06:26,250 But in the end, if they are logged in, 131 00:06:26,250 --> 00:06:29,010 they might have that same behavior, which you see here, 132 00:06:29,010 --> 00:06:31,810 which is why I omitted the authentication process 133 00:06:31,810 --> 00:06:34,810 because it simply doesn't help us here 134 00:06:34,810 --> 00:06:37,370 because the attack pattern, which I'll show you, 135 00:06:37,370 --> 00:06:39,430 will work either way. 136 00:06:39,430 --> 00:06:42,630 What if I don't enter some plain text here, 137 00:06:42,630 --> 00:06:46,230 but I decided to create a script here. 138 00:06:46,230 --> 00:06:50,370 I write some script code and here I'll just send an alert 139 00:06:50,370 --> 00:06:52,283 where I say hacked like this. 140 00:06:53,270 --> 00:06:56,030 This is valid JavaScript code. 141 00:06:56,030 --> 00:07:00,140 And now I'll create a comment that contains that code. 142 00:07:00,140 --> 00:07:03,510 Of course, this alert isn't doing anything fancy. 143 00:07:03,510 --> 00:07:05,880 Indeed, it will actually show visitors 144 00:07:05,880 --> 00:07:09,760 that something is fishy on this page if they load the page, 145 00:07:09,760 --> 00:07:11,750 but it's just here to show you 146 00:07:11,750 --> 00:07:16,660 that executing such scripts on a page might work. 147 00:07:16,660 --> 00:07:20,340 In reality, you would probably not show an alert here, 148 00:07:20,340 --> 00:07:22,780 but maybe send an Ajax request, 149 00:07:22,780 --> 00:07:25,830 which then could also use your session 150 00:07:25,830 --> 00:07:29,820 because cookies also get sent along with Ajax requests 151 00:07:29,820 --> 00:07:34,340 and which then would actually also not be guarded 152 00:07:34,340 --> 00:07:38,400 by your CSRF protection because if this script 153 00:07:38,400 --> 00:07:41,110 would send an Ajax request, 154 00:07:41,110 --> 00:07:44,550 then the script runs on the correct page and therefore, 155 00:07:44,550 --> 00:07:49,550 it has the CSRF token because unlike with the CSRF attacks 156 00:07:49,710 --> 00:07:53,470 I showed you before, now we're adding some code here 157 00:07:53,470 --> 00:07:56,190 which will not run on a different page, 158 00:07:56,190 --> 00:07:59,160 which doesn't know the CSRF token, 159 00:07:59,160 --> 00:08:01,600 but I'm about to add some code here 160 00:08:01,600 --> 00:08:05,010 which will be part of that same official page 161 00:08:05,010 --> 00:08:07,461 which all visitors will visit. 162 00:08:07,461 --> 00:08:10,930 And therefore, it will have access to the CSRF token, 163 00:08:10,930 --> 00:08:14,070 which would be part of a hidden input field, for example. 164 00:08:15,140 --> 00:08:16,510 But let's take a step back 165 00:08:16,510 --> 00:08:19,100 and let's send this and see what happens. 166 00:08:19,100 --> 00:08:21,473 You see, I got this alert here. 167 00:08:22,430 --> 00:08:25,010 I got it once the page reloaded, 168 00:08:25,010 --> 00:08:27,870 and here we see a second blog post 169 00:08:27,870 --> 00:08:30,820 which doesn't seem to have any visual content, 170 00:08:30,820 --> 00:08:33,870 but if we inspected with the browser dev tools, 171 00:08:33,870 --> 00:08:37,400 we can see that in there in the second list item, 172 00:08:37,400 --> 00:08:40,860 I got this script and this got executed. 173 00:08:40,860 --> 00:08:43,860 And again here, I just used it to show an alert 174 00:08:43,860 --> 00:08:45,530 to prove that it works, 175 00:08:45,530 --> 00:08:48,960 but we could be doing far worse things in there, 176 00:08:48,960 --> 00:08:53,000 like sending an Ajax request to some route of this page. 177 00:08:53,000 --> 00:08:54,340 And since we have the cookie 178 00:08:54,340 --> 00:08:58,330 and the CSRF token and everything, that could work 179 00:08:58,330 --> 00:09:00,683 and we would have no protection against this. 180 00:09:01,600 --> 00:09:05,580 That's why cross-site scripting attacks are super dangerous 181 00:09:05,580 --> 00:09:08,040 because they run on your site. 182 00:09:08,040 --> 00:09:11,380 They run on the official site and they run there 183 00:09:11,380 --> 00:09:14,500 because some user managed to inject 184 00:09:14,500 --> 00:09:18,510 some malicious JavaScript code into your page. 185 00:09:18,510 --> 00:09:21,220 And you are vulnerable to this attack 186 00:09:21,220 --> 00:09:25,720 whenever you're outputting user generated content. 187 00:09:25,720 --> 00:09:28,700 Whenever users submit posts or comments 188 00:09:28,700 --> 00:09:30,310 or news or whatever it is 189 00:09:30,310 --> 00:09:32,390 and you then have a part of your page 190 00:09:32,390 --> 00:09:34,480 that outputs that content, 191 00:09:34,480 --> 00:09:37,390 you have a potential vulnerability. 192 00:09:37,390 --> 00:09:40,310 And I'm not just talking about complete blog posts. 193 00:09:40,310 --> 00:09:43,310 Whenever anywhere on your page 194 00:09:43,310 --> 00:09:46,430 you're outputting any user generated content, 195 00:09:46,430 --> 00:09:48,863 you have this potential vulnerability.