1 00:00:02,060 --> 00:00:04,600 So therefore let's dive right in 2 00:00:04,600 --> 00:00:06,910 with the first attack pattern 3 00:00:06,910 --> 00:00:09,870 to which our website could be vulnerable 4 00:00:09,870 --> 00:00:11,310 and how it works. 5 00:00:11,310 --> 00:00:13,430 We're going to perform it ourselves 6 00:00:13,430 --> 00:00:16,400 and how we can then defend against it. 7 00:00:16,400 --> 00:00:20,990 And we're going to start with this CSRF attack pattern. 8 00:00:20,990 --> 00:00:25,560 Now see, CSRF stands for Cross Site Request Forgery, 9 00:00:25,560 --> 00:00:27,920 and the idea here is, in the end, 10 00:00:27,920 --> 00:00:30,480 that some malicious users, 11 00:00:30,480 --> 00:00:32,710 some bad guy out there 12 00:00:32,710 --> 00:00:37,710 simply creates a request that's sent to your back-end 13 00:00:37,720 --> 00:00:42,210 that causes an action that shouldn't be performed. 14 00:00:42,210 --> 00:00:44,160 And this might sound very abstract, 15 00:00:44,160 --> 00:00:48,550 but forging such a request that then triggers such an action 16 00:00:48,550 --> 00:00:51,820 is actually easier than you might first think. 17 00:00:51,820 --> 00:00:56,100 Very often those CSRF attacks involve sessions 18 00:00:56,100 --> 00:00:59,450 that are used in an unintended way 19 00:00:59,450 --> 00:01:02,120 and such a request can, for example, 20 00:01:02,120 --> 00:01:04,739 before forged by creating a website 21 00:01:04,739 --> 00:01:07,240 that might look like your website 22 00:01:07,240 --> 00:01:09,810 to which the bad guy then sends links 23 00:01:09,810 --> 00:01:13,210 to possible users, who act as victims, 24 00:01:13,210 --> 00:01:16,810 who basically use that website without knowing it, 25 00:01:16,810 --> 00:01:19,400 for example, with phishing emails. 26 00:01:19,400 --> 00:01:21,820 So with emails that are prepared to look 27 00:01:21,820 --> 00:01:24,080 like they're officially coming from you 28 00:01:24,080 --> 00:01:26,230 when they actually come from a bad guy, 29 00:01:26,230 --> 00:01:28,930 and then those prepared websites could send 30 00:01:28,930 --> 00:01:32,660 such a request using the user's session, 31 00:01:32,660 --> 00:01:36,310 so to session of the victim who visited this prepared link, 32 00:01:36,310 --> 00:01:38,130 to then send such a request, 33 00:01:38,130 --> 00:01:41,590 such a forged request to the original back-end. 34 00:01:41,590 --> 00:01:43,210 And to make that a bit clearer, 35 00:01:43,210 --> 00:01:46,360 we're going to take a look at this exact attack pattern 36 00:01:46,360 --> 00:01:49,470 in a concrete example that I prepared for you 37 00:01:49,470 --> 00:01:52,930 where we will actually be able to launch our own attack 38 00:01:52,930 --> 00:01:55,270 against our own website. 39 00:01:55,270 --> 00:01:56,140 Now for that 40 00:01:56,140 --> 00:01:58,840 I prepared some starting projects 41 00:01:58,840 --> 00:02:00,870 and you'll find them all attached. 42 00:02:00,870 --> 00:02:02,520 There's one zip file attached, 43 00:02:02,520 --> 00:02:06,060 which gives you a folder with a couple of sub folders. 44 00:02:06,060 --> 00:02:07,870 And these are different projects, 45 00:02:07,870 --> 00:02:09,090 which we're going to visit 46 00:02:09,090 --> 00:02:11,570 and use for all of this course section. 47 00:02:11,570 --> 00:02:15,100 And we're going to start with this CSRF project. 48 00:02:15,100 --> 00:02:17,260 And in that CSRF folder, 49 00:02:17,260 --> 00:02:20,530 you're actually going to find two websites, 50 00:02:20,530 --> 00:02:21,570 your own site, 51 00:02:21,570 --> 00:02:24,750 which could be the real official site you're building; 52 00:02:24,750 --> 00:02:26,980 and then the attacker's site, 53 00:02:26,980 --> 00:02:30,163 which looks like your site but isn't your site. 54 00:02:31,270 --> 00:02:32,570 I'll come back to that. 55 00:02:32,570 --> 00:02:34,970 Let's first of all, have a look at our own site. 56 00:02:35,810 --> 00:02:39,120 This is a fairly basic Node Express application, 57 00:02:39,120 --> 00:02:42,260 very similar to what we built before in the course. 58 00:02:42,260 --> 00:02:43,730 It's using authentication, 59 00:02:43,730 --> 00:02:46,070 just as you learned it before in the course, 60 00:02:46,070 --> 00:02:48,480 with cookies and sessions and so on. 61 00:02:48,480 --> 00:02:51,360 And I'm using MongoDB as a data storage, 62 00:02:51,360 --> 00:02:54,020 and also as a session storage. 63 00:02:54,020 --> 00:02:57,580 And for this I have a database called security, 64 00:02:57,580 --> 00:02:58,830 which will be used... 65 00:02:58,830 --> 00:03:01,300 And of course, therefore, if you wanna follow along, 66 00:03:01,300 --> 00:03:02,340 you should make sure 67 00:03:02,340 --> 00:03:05,290 that your MongoDB server is up and running 68 00:03:05,290 --> 00:03:08,093 so that this site can connect to it. 69 00:03:09,840 --> 00:03:13,650 Now you can open your terminal here in View as code 70 00:03:13,650 --> 00:03:18,030 and navigate into that CSRF folder with this CD command, 71 00:03:18,030 --> 00:03:20,640 which stands for Change Directory, 72 00:03:20,640 --> 00:03:23,722 this works on MacOS and Windows, 73 00:03:23,722 --> 00:03:27,713 and then enter CD again, into the my-site folder. 74 00:03:28,905 --> 00:03:30,700 So that any commands we're now going to run, 75 00:03:30,700 --> 00:03:33,713 run from inside of that my-site folder. 76 00:03:34,640 --> 00:03:36,640 And here we want to run NPM install 77 00:03:36,640 --> 00:03:38,690 to install all dependencies 78 00:03:38,690 --> 00:03:41,230 and then thereafter, NPM start, 79 00:03:41,230 --> 00:03:43,270 and we can combine these two commands 80 00:03:43,270 --> 00:03:44,860 and run them after each other 81 00:03:44,860 --> 00:03:47,580 with the two and percent symbols here, 82 00:03:47,580 --> 00:03:50,803 alternatively, you run them as two separate commands. 83 00:03:52,160 --> 00:03:55,210 So this installs all dependencies and starts that server, 84 00:03:55,210 --> 00:03:57,810 which connects to the MongoDB database 85 00:03:57,810 --> 00:04:01,100 and which then listens on port 3,000. 86 00:04:01,100 --> 00:04:03,030 That's what you can see in app JS, 87 00:04:03,030 --> 00:04:05,393 we're listening on port 3,000. 88 00:04:06,720 --> 00:04:07,790 With that up and running, 89 00:04:07,790 --> 00:04:10,820 if you load local host 3,000 90 00:04:10,820 --> 00:04:13,120 then you see your site here 91 00:04:13,120 --> 00:04:16,820 and there we can log in with users. 92 00:04:16,820 --> 00:04:19,579 However, we, first of all, have to create one. 93 00:04:19,579 --> 00:04:21,269 And for this all, whoops, 94 00:04:21,269 --> 00:04:24,260 quickly create a new user here 95 00:04:25,690 --> 00:04:27,100 like this. 96 00:04:27,100 --> 00:04:31,430 And now we can log in with that user which we just created 97 00:04:31,430 --> 00:04:34,050 just as we learned it before in the course. 98 00:04:34,050 --> 00:04:35,870 And here we are. 99 00:04:35,870 --> 00:04:37,310 And once you are logged in, 100 00:04:37,310 --> 00:04:41,340 you have this dummy Send Money page here 101 00:04:41,340 --> 00:04:43,920 the slash transaction page. 102 00:04:43,920 --> 00:04:45,710 This doesn't actually do anything, 103 00:04:45,710 --> 00:04:47,170 it doesn't actually work. 104 00:04:47,170 --> 00:04:49,550 It's just a dummy site here, 105 00:04:49,550 --> 00:04:52,750 but let's assume that you're building some website 106 00:04:52,750 --> 00:04:56,130 where users can send money to each other 107 00:04:56,130 --> 00:04:59,040 by entering their email and then the amount. 108 00:04:59,040 --> 00:04:59,940 Of course, it would be 109 00:04:59,940 --> 00:05:02,080 typically a bit more complex than that, 110 00:05:02,080 --> 00:05:05,280 but I wanna focus on the core functionality here 111 00:05:05,280 --> 00:05:07,860 to show you the essence of the attack pattern, 112 00:05:07,860 --> 00:05:10,083 which then could be applied to any website. 113 00:05:11,210 --> 00:05:15,400 So here, let's say, we want to send money to test@test.com. 114 00:05:15,400 --> 00:05:16,810 So I entered this here 115 00:05:18,190 --> 00:05:22,840 and I wanna send $500 or whatever. 116 00:05:22,840 --> 00:05:25,920 If I click send, I get this success message, 117 00:05:25,920 --> 00:05:30,350 and if you open a MongoDB shell to look into your database 118 00:05:30,350 --> 00:05:33,320 and you use the security database, 119 00:05:33,320 --> 00:05:37,250 you should then be able to query the transactions collection 120 00:05:37,250 --> 00:05:39,490 and find all transactions in there. 121 00:05:39,490 --> 00:05:41,830 And here you should see the one transaction 122 00:05:41,830 --> 00:05:44,860 that you just created with that website. 123 00:05:44,860 --> 00:05:48,800 We're sending money from our account to this account. 124 00:05:48,800 --> 00:05:50,700 And that's the email address I just entered 125 00:05:50,700 --> 00:05:51,800 and that's the amount. 126 00:05:53,140 --> 00:05:55,410 Of course, feel free to dive into the code for that 127 00:05:55,410 --> 00:05:56,830 in the routes folder. 128 00:05:56,830 --> 00:05:58,790 It's very straightforward though. 129 00:05:58,790 --> 00:06:00,620 I'm just creating a basic document 130 00:06:00,620 --> 00:06:03,840 and I'm inserting this into my transactions collection 131 00:06:03,840 --> 00:06:05,670 and that's about it. 132 00:06:05,670 --> 00:06:06,870 Nothing too fancy 133 00:06:06,870 --> 00:06:09,680 and deliberately that's kept rather simple. 134 00:06:09,680 --> 00:06:11,833 The rest of this page is basically the log in 135 00:06:11,833 --> 00:06:14,683 and signup logic we already learned before. 136 00:06:15,660 --> 00:06:17,160 So that's all working. 137 00:06:17,160 --> 00:06:19,870 How could this now be attacked? 138 00:06:19,870 --> 00:06:24,140 Well, as I said, for example, with such a CSRF attack, 139 00:06:24,140 --> 00:06:26,090 and for this a user could build 140 00:06:26,090 --> 00:06:28,990 a website that looks like our website, 141 00:06:28,990 --> 00:06:32,390 and then that attacker could send an email 142 00:06:32,390 --> 00:06:35,790 to people who are using our website, 143 00:06:35,790 --> 00:06:38,110 and if those people click on the link, 144 00:06:38,110 --> 00:06:41,370 they will see the prepared website of the attacker, 145 00:06:41,370 --> 00:06:43,870 which looks like the correct website 146 00:06:43,870 --> 00:06:46,820 so they don't necessarily see the difference, 147 00:06:46,820 --> 00:06:49,020 but then if they send money, 148 00:06:49,020 --> 00:06:52,200 actually the attacker will swap the recipient 149 00:06:52,200 --> 00:06:53,840 for a different recipient, 150 00:06:53,840 --> 00:06:55,430 and maybe also the amount, 151 00:06:55,430 --> 00:06:57,060 and therefore steal money. 152 00:06:57,060 --> 00:06:57,893 And that's of course, 153 00:06:57,893 --> 00:07:01,070 then just one action that could be taken, stealing money. 154 00:07:01,070 --> 00:07:03,860 The bad thing is that it's just an example 155 00:07:03,860 --> 00:07:06,230 and this CSRF attack could be used 156 00:07:06,230 --> 00:07:09,960 for any kind of action that's supported by the website. 157 00:07:09,960 --> 00:07:10,850 And in this case, 158 00:07:10,850 --> 00:07:13,643 sending money is the only supported action we have. 159 00:07:14,690 --> 00:07:18,320 And that's the other project you have in a CSRF folder, 160 00:07:18,320 --> 00:07:20,510 the attacker site. 161 00:07:20,510 --> 00:07:23,270 This is all the simple note express website, 162 00:07:23,270 --> 00:07:24,480 but I wanna emphasize 163 00:07:24,480 --> 00:07:26,450 that the attacker doesn't have to use 164 00:07:26,450 --> 00:07:30,420 the same technology we are using on our site. 165 00:07:30,420 --> 00:07:32,290 The attacker just builds a site 166 00:07:32,290 --> 00:07:33,760 that looks like our site 167 00:07:33,760 --> 00:07:37,463 and how he or she does that is totally up to him or her. 168 00:07:38,420 --> 00:07:41,010 And therefore that's a very simple Node Express site. 169 00:07:41,010 --> 00:07:44,610 It doesn't have any sign up logic or anything like this 170 00:07:44,610 --> 00:07:46,970 because that's not the goal of the attacker. 171 00:07:46,970 --> 00:07:49,770 The attacker's goal is not to rebuild our site 172 00:07:49,770 --> 00:07:51,240 with its functionality, 173 00:07:51,240 --> 00:07:54,340 the goal is to rebuild the look of our site. 174 00:07:54,340 --> 00:07:56,930 And for this, the attacker is mainly focused on 175 00:07:56,930 --> 00:07:58,937 the transaction page here. 176 00:07:58,937 --> 00:08:01,240 Therefore that's the only template I got here 177 00:08:02,330 --> 00:08:04,840 and here the attackers stole 178 00:08:04,840 --> 00:08:08,060 the HTML styling of the official site. 179 00:08:08,060 --> 00:08:11,230 And of course it would be fairly easy to steal that 180 00:08:11,230 --> 00:08:14,910 because all you need is the Browser DevTools. 181 00:08:14,910 --> 00:08:16,480 And then I can see the markup 182 00:08:16,480 --> 00:08:18,470 and I can see all the styling. 183 00:08:18,470 --> 00:08:22,760 So rebuilding the look and feel of a site is really easy, 184 00:08:22,760 --> 00:08:25,370 you don't need any hacking tools for that 185 00:08:25,370 --> 00:08:28,440 the browser developer tools will do. 186 00:08:28,440 --> 00:08:31,820 So rebuilding a site is fairly simple. 187 00:08:31,820 --> 00:08:35,559 And then on this rebuild site, in this template here, 188 00:08:35,559 --> 00:08:38,289 what the attacker is doing is 189 00:08:38,289 --> 00:08:40,400 these two official form inputs, 190 00:08:40,400 --> 00:08:43,860 which we have, don't have a name attribute 191 00:08:43,860 --> 00:08:45,420 so if the form is submitted, 192 00:08:45,420 --> 00:08:49,190 the values entered by the user will not be submitted. 193 00:08:49,190 --> 00:08:51,900 Those inputs are only there to trick the user 194 00:08:51,900 --> 00:08:54,853 and rebuild the look and feel of the official site. 195 00:08:56,000 --> 00:08:58,420 Instead, we got two hidden inputs here, 196 00:08:58,420 --> 00:09:00,540 which holds the actual values 197 00:09:00,540 --> 00:09:04,070 the bad guy wants to use for sending the money to, 198 00:09:04,070 --> 00:09:06,073 and for sending a concrete amount. 199 00:09:07,200 --> 00:09:10,180 And of course, that's a very simple, basic example here, 200 00:09:10,180 --> 00:09:13,490 but that is generally how those CSRF attacks 201 00:09:13,490 --> 00:09:15,300 can be launched. 202 00:09:15,300 --> 00:09:17,930 Now, the attack is altered in a way 203 00:09:17,930 --> 00:09:21,400 that can't easily be seen by the website visitor, 204 00:09:21,400 --> 00:09:24,240 to the website visitor it will not be obvious 205 00:09:24,240 --> 00:09:28,120 that this site is not sending the values that are entered 206 00:09:28,120 --> 00:09:29,003 by the visitor. 207 00:09:29,910 --> 00:09:32,060 And the last but very important part 208 00:09:32,060 --> 00:09:35,920 that was edited by the attacker on his fake site is 209 00:09:35,920 --> 00:09:39,780 the URL to which the form is submitted. 210 00:09:39,780 --> 00:09:43,030 That is the URL of your site 211 00:09:43,030 --> 00:09:44,747 so that's the correct URL. 212 00:09:45,690 --> 00:09:49,100 This is sent to your site so that is absolutely correct. 213 00:09:49,100 --> 00:09:52,190 This is not lead into the attacker's site 214 00:09:52,190 --> 00:09:54,060 because the attacker wants to create 215 00:09:54,060 --> 00:09:57,590 a request that is sent to the official site, 216 00:09:57,590 --> 00:10:00,835 it's just the action that's triggered by the request 217 00:10:00,835 --> 00:10:02,960 that should be changed. 218 00:10:02,960 --> 00:10:05,800 And that was changed with those hidden input values 219 00:10:05,800 --> 00:10:08,750 because now a different amount of money will be sent 220 00:10:08,750 --> 00:10:10,023 to a different person. 221 00:10:11,130 --> 00:10:15,265 Now, can we send such a request from site A to site B? 222 00:10:15,265 --> 00:10:17,250 Yes, by default we can, 223 00:10:17,250 --> 00:10:20,820 and even if site B, so official site let's say, 224 00:10:20,820 --> 00:10:22,403 requires authentication. 225 00:10:23,650 --> 00:10:26,460 Because if the user is locked in, 226 00:10:26,460 --> 00:10:30,100 which he or she needs to be to send that transaction, 227 00:10:30,100 --> 00:10:31,730 but if the user is locked in 228 00:10:31,730 --> 00:10:33,240 then the user has a cookie 229 00:10:33,240 --> 00:10:36,250 with that session ID that belongs to the user 230 00:10:36,250 --> 00:10:37,600 as you learned. 231 00:10:37,600 --> 00:10:40,410 And if the browser sees a request being sent 232 00:10:40,410 --> 00:10:43,030 to the site that issued a cookie 233 00:10:43,030 --> 00:10:46,790 then the browser will attach the cookie to that request 234 00:10:46,790 --> 00:10:49,870 even if the request is sent from a different site, 235 00:10:49,870 --> 00:10:52,300 it's the target of the request 236 00:10:52,300 --> 00:10:54,960 so to target URL that matters, 237 00:10:54,960 --> 00:10:56,940 if that's the correct URL 238 00:10:56,940 --> 00:10:58,910 the browser will attach to cookie 239 00:10:58,910 --> 00:11:01,050 and therefore, the request the will arrive 240 00:11:01,050 --> 00:11:04,300 on your official site with a correct cookie, 241 00:11:04,300 --> 00:11:07,470 hence the user identity can be confirmed there 242 00:11:07,470 --> 00:11:11,030 and now the request will be parsed on the official site 243 00:11:11,030 --> 00:11:14,313 just with those bad input values. 244 00:11:15,360 --> 00:11:16,910 And to show this to you 245 00:11:16,910 --> 00:11:18,240 I'm going to keep my good, 246 00:11:18,240 --> 00:11:20,670 my official server up and running, 247 00:11:20,670 --> 00:11:23,902 but I'm also going to start the attackers server 248 00:11:23,902 --> 00:11:27,090 because here I prepared that site 249 00:11:27,090 --> 00:11:29,040 to listen on a different port. 250 00:11:29,040 --> 00:11:31,070 And if you use a different port, 251 00:11:31,070 --> 00:11:35,210 so local hosts 8,000 instead of local host 3,000, 252 00:11:35,210 --> 00:11:38,930 that indeed acts as a totally different domain. 253 00:11:38,930 --> 00:11:41,670 So that's the same as having examples of com 254 00:11:41,670 --> 00:11:44,123 and mypage.com as domains. 255 00:11:44,970 --> 00:11:46,760 Local hosts with different ports 256 00:11:46,760 --> 00:11:49,050 are two totally different domains 257 00:11:49,050 --> 00:11:50,700 and therefore we can use that 258 00:11:50,700 --> 00:11:53,913 to simulate an attack from site A to site B. 259 00:11:55,200 --> 00:11:57,440 Hence, I'll keep that terminal up and running 260 00:11:57,440 --> 00:12:00,500 and I'll just open a new additional terminal. 261 00:12:00,500 --> 00:12:04,670 And there again, we CD into the CSRF folder, 262 00:12:04,670 --> 00:12:08,250 we CD into the attacker site folder 263 00:12:08,250 --> 00:12:11,740 and we run NPM install and NPM starts there 264 00:12:11,740 --> 00:12:15,580 to install all dependencies and start the server. 265 00:12:15,580 --> 00:12:19,100 Now we can visit localhost/transaction, 266 00:12:19,100 --> 00:12:22,540 that's the site the attacker might send us to. 267 00:12:22,540 --> 00:12:24,570 So that's the link that might be included 268 00:12:24,570 --> 00:12:27,710 in a phishing email that's sent to users 269 00:12:27,710 --> 00:12:29,890 of that official site. 270 00:12:29,890 --> 00:12:32,320 And here I added attacker in the URL 271 00:12:32,320 --> 00:12:35,940 so it is a bit easier for us to tell the sites apart, 272 00:12:35,940 --> 00:12:38,830 of course the attacker would not do that. 273 00:12:38,830 --> 00:12:42,760 And if that would not be included, that attacker label here, 274 00:12:42,760 --> 00:12:45,760 these sites would look exactly the same. 275 00:12:45,760 --> 00:12:47,210 Of course you can remove it 276 00:12:47,210 --> 00:12:49,193 to ensure that they do look the same. 277 00:12:50,400 --> 00:12:52,060 So as a regular user, 278 00:12:52,060 --> 00:12:53,980 I click on a link in an email 279 00:12:53,980 --> 00:12:57,560 and I might end up on this attackers site. 280 00:12:57,560 --> 00:13:00,120 And now I wanna send money to my friend, 281 00:13:00,120 --> 00:13:03,493 the same email address and the same amount as before. 282 00:13:04,740 --> 00:13:08,420 I can click send and I end up on Success, 283 00:13:08,420 --> 00:13:11,240 now, by the way, on the official site, 284 00:13:11,240 --> 00:13:14,130 because the request was sent to the official site, 285 00:13:14,130 --> 00:13:16,240 that site issued a redirect 286 00:13:16,240 --> 00:13:19,050 so now I am on that official site. 287 00:13:19,050 --> 00:13:21,640 So now I don't even have a chance of seeing 288 00:13:21,640 --> 00:13:23,880 that I was on the wrong site before 289 00:13:23,880 --> 00:13:25,943 because I'm on the correct site now. 290 00:13:27,270 --> 00:13:28,840 But if we now have a look 291 00:13:28,840 --> 00:13:31,320 at all the transactions in the database, 292 00:13:31,320 --> 00:13:34,300 we can see that here, we got a problem. 293 00:13:34,300 --> 00:13:36,850 This indeed was sent to the wrong person, 294 00:13:36,850 --> 00:13:38,960 and it's the wrong amount. 295 00:13:38,960 --> 00:13:42,123 So this is the result of this forged request. 296 00:13:43,050 --> 00:13:44,460 And that was a lot of talking, 297 00:13:44,460 --> 00:13:47,530 but I want you to understand this pattern. 298 00:13:47,530 --> 00:13:51,860 I want you to understand how such requests can be forged, 299 00:13:51,860 --> 00:13:55,830 how they can be created, and which damage they can cause. 300 00:13:55,830 --> 00:13:56,730 And as you can see, 301 00:13:56,730 --> 00:13:58,190 that's quite a lot of damage 302 00:13:58,190 --> 00:14:01,253 because now money might have been sent to a bad person.