1 00:00:02,060 --> 00:00:04,630 So these are CSRF attacks. 2 00:00:04,630 --> 00:00:07,873 How can we protect against those attacks? 3 00:00:08,720 --> 00:00:11,110 Well, of course, it's a good protection 4 00:00:11,110 --> 00:00:15,670 if your site visitors don't click on phishing links. 5 00:00:15,670 --> 00:00:18,830 We should all be careful when we get emails 6 00:00:18,830 --> 00:00:21,300 and these emails contain links. 7 00:00:21,300 --> 00:00:22,460 Sometimes you get emails 8 00:00:22,460 --> 00:00:24,480 that something's wrong with your account 9 00:00:24,480 --> 00:00:26,390 and you should now click this link. 10 00:00:26,390 --> 00:00:27,950 And, of course, you click there 11 00:00:27,950 --> 00:00:29,740 because you wanna fix your account 12 00:00:29,740 --> 00:00:32,150 and that might've been a phishing email. 13 00:00:32,150 --> 00:00:36,310 Well-made phishing mails can be hard to detect 14 00:00:36,310 --> 00:00:39,470 and even phishing mails that are not that good. 15 00:00:39,470 --> 00:00:41,640 If they're sent to thousands 16 00:00:41,640 --> 00:00:44,490 or hundreds of thousands of people, 17 00:00:44,490 --> 00:00:48,200 there is a good chance that some people click on them. 18 00:00:48,200 --> 00:00:49,670 So even though it would be best 19 00:00:49,670 --> 00:00:53,560 if people never fall for that trick, it will happen. 20 00:00:53,560 --> 00:00:56,160 So you can't rely on your users 21 00:00:56,160 --> 00:01:00,090 when it comes to defending against CSRF attacks. 22 00:01:00,090 --> 00:01:02,970 Instead, you as the developer of a site 23 00:01:02,970 --> 00:01:07,090 have to ensure that your site is protected against this. 24 00:01:07,090 --> 00:01:10,070 And thankfully, it is rather simple 25 00:01:10,070 --> 00:01:13,040 to protect against CSRF attacks. 26 00:01:13,040 --> 00:01:17,080 The best practice protection against CSRF attacks 27 00:01:17,080 --> 00:01:19,020 that you could add to your site 28 00:01:19,020 --> 00:01:23,180 involves the creation of so-called CSRF tokens. 29 00:01:23,180 --> 00:01:28,180 These are tokens, random-looking string values 30 00:01:28,200 --> 00:01:31,270 that are generated on the server side 31 00:01:31,270 --> 00:01:33,510 which are only known by the server, 32 00:01:33,510 --> 00:01:35,130 which are a short lived, 33 00:01:35,130 --> 00:01:38,940 they only exist for one request response cycle, 34 00:01:38,940 --> 00:01:41,200 and which are known to the server 35 00:01:41,200 --> 00:01:44,930 because the server generated those tokens. 36 00:01:44,930 --> 00:01:48,480 Now, those tokens, so those strings are then injected 37 00:01:48,480 --> 00:01:51,730 into the templates that are rendered by the server, 38 00:01:51,730 --> 00:01:53,900 for example, in a hidden input field. 39 00:01:53,900 --> 00:01:56,570 And then for incoming requests, 40 00:01:56,570 --> 00:01:59,600 the server checks whether such a valid token 41 00:01:59,600 --> 00:02:02,290 is part of that request. 42 00:02:02,290 --> 00:02:05,580 Since only the server knows these tokens, 43 00:02:05,580 --> 00:02:07,420 since they are only valid 44 00:02:07,420 --> 00:02:10,250 for one incoming request thereafter, 45 00:02:10,250 --> 00:02:12,610 and since they therefore only exists 46 00:02:12,610 --> 00:02:14,260 in the official templates, 47 00:02:14,260 --> 00:02:17,650 in the official pages rendered by that server 48 00:02:17,650 --> 00:02:18,940 that's owned by you, 49 00:02:18,940 --> 00:02:22,110 an attacking server, a faked server, 50 00:02:22,110 --> 00:02:24,520 can't know those tokens. 51 00:02:24,520 --> 00:02:26,120 They can't be guessed. 52 00:02:26,120 --> 00:02:29,040 They can't be generated by that other server. 53 00:02:29,040 --> 00:02:31,890 Only your server knows the correct tokens 54 00:02:31,890 --> 00:02:33,633 and they can't be stolen. 55 00:02:34,620 --> 00:02:37,820 And therefore, requests without a valid CSRF token 56 00:02:37,820 --> 00:02:40,340 will be blocked and hence this attack pattern, 57 00:02:40,340 --> 00:02:43,520 which I just showed you, won't work. 58 00:02:43,520 --> 00:02:46,170 Now, you can implement this defense 59 00:02:46,170 --> 00:02:49,570 with all server-side programming languages, 60 00:02:49,570 --> 00:02:52,930 with PHP, C#, whatever it is, 61 00:02:52,930 --> 00:02:55,950 but you can also do it with Node Express. 62 00:02:55,950 --> 00:02:59,010 And if you search for Express CSRF, 63 00:02:59,010 --> 00:03:01,030 you'll find some packages, 64 00:03:01,030 --> 00:03:03,640 some third-party packages which you can use, 65 00:03:03,640 --> 00:03:05,743 which will simplify your life. 66 00:03:06,690 --> 00:03:09,610 The csurf package is the most popular one 67 00:03:09,610 --> 00:03:11,310 for Node Express apps. 68 00:03:11,310 --> 00:03:13,950 And therefore, that's the one I'll use here. 69 00:03:13,950 --> 00:03:16,070 In my first terminal window, 70 00:03:16,070 --> 00:03:18,620 where I'm running the official server, 71 00:03:18,620 --> 00:03:20,770 I'll quit that server 72 00:03:20,770 --> 00:03:23,573 and I will install the csurf package here. 73 00:03:24,860 --> 00:03:29,860 Now, we can activate it in the my-site folder in app.js. 74 00:03:30,210 --> 00:03:33,610 And here, we wanna import CSRF 75 00:03:33,610 --> 00:03:36,823 by requiring csurf, this package. 76 00:03:38,640 --> 00:03:41,610 And then we have to register it as a middleware. 77 00:03:41,610 --> 00:03:45,780 Now, I'll activate that after activating the session 78 00:03:45,780 --> 00:03:49,683 because the CSRF package uses sessions under the hood. 79 00:03:50,690 --> 00:03:52,770 And I'll activate it by using app.use 80 00:03:52,770 --> 00:03:54,760 as I did it before in the course. 81 00:03:54,760 --> 00:03:58,950 And then we execute CSRF as a function 82 00:03:58,950 --> 00:04:00,830 and you can configure it. 83 00:04:00,830 --> 00:04:03,890 More details can be found in the official documentation, 84 00:04:03,890 --> 00:04:07,090 but the default options should actually do the trick. 85 00:04:07,090 --> 00:04:10,093 So no special configuration is required here. 86 00:04:11,130 --> 00:04:14,340 So activating the package here is the first step, 87 00:04:14,340 --> 00:04:17,279 and now we can use it in our routes. 88 00:04:17,279 --> 00:04:22,280 Here in all the routes that return pages that contain forms, 89 00:04:23,190 --> 00:04:26,000 you should add such a CSRF token 90 00:04:26,000 --> 00:04:28,540 because it's these pages that contain forms 91 00:04:28,540 --> 00:04:32,330 that can be rebuilt and manipulated by attackers 92 00:04:32,330 --> 00:04:34,490 as you saw it before. 93 00:04:34,490 --> 00:04:37,740 So, for example here, when we get to the transaction page, 94 00:04:37,740 --> 00:04:40,100 which is that page that contains the form, 95 00:04:40,100 --> 00:04:44,940 we wanna ensure that we generate and use such a CSRF token. 96 00:04:44,940 --> 00:04:49,190 For this in this get route, we can add a CSRF token constant 97 00:04:49,190 --> 00:04:52,420 and generate that token by using the request object 98 00:04:52,420 --> 00:04:55,660 and then there, the CSRF token function. 99 00:04:55,660 --> 00:04:57,850 This is a function or a method 100 00:04:57,850 --> 00:05:01,730 that's provided by the csurf package we just installed. 101 00:05:01,730 --> 00:05:04,040 And this will generate such a token, 102 00:05:04,040 --> 00:05:05,730 which I talked about before, 103 00:05:05,730 --> 00:05:07,920 which will be stored by the package 104 00:05:07,920 --> 00:05:11,250 for one request response cycle on the server 105 00:05:11,250 --> 00:05:12,723 with help of sessions. 106 00:05:13,860 --> 00:05:16,963 Next, we send that token into our template, 107 00:05:19,030 --> 00:05:21,220 for example like this, 108 00:05:21,220 --> 00:05:23,770 so that in the template, we can use this token, 109 00:05:23,770 --> 00:05:26,430 which is just a string in the end. 110 00:05:26,430 --> 00:05:30,440 So in that transaction.ejs file, 111 00:05:30,440 --> 00:05:34,620 we now wanna add a hidden input in that form. 112 00:05:34,620 --> 00:05:37,570 And you wanna do that for every form on your page. 113 00:05:37,570 --> 00:05:40,280 There, you wanna add an input of type hidden 114 00:05:40,280 --> 00:05:42,080 because it's not an input 115 00:05:42,080 --> 00:05:45,020 where the visitor should enter a value. 116 00:05:45,020 --> 00:05:47,770 Instead, we will add our own value 117 00:05:47,770 --> 00:05:51,330 and that value is that CSRF token. 118 00:05:51,330 --> 00:05:54,100 And I'll inject it here with that ejs syntax 119 00:05:54,100 --> 00:05:56,400 because we passed it to the template 120 00:05:56,400 --> 00:05:57,773 a couple of seconds ago. 121 00:05:58,940 --> 00:06:01,830 Now, this hidden input needs to have a special name 122 00:06:01,830 --> 00:06:05,013 and that special name is _csrf. 123 00:06:06,050 --> 00:06:08,750 That's the name the CSRF package, 124 00:06:08,750 --> 00:06:11,210 or the csurf package in this case, 125 00:06:11,210 --> 00:06:15,310 will look for when that request is submitted. 126 00:06:15,310 --> 00:06:18,160 And it will automatically look for that field. 127 00:06:18,160 --> 00:06:21,223 You don't need to write any extra logic for that. 128 00:06:21,223 --> 00:06:23,710 That instead will be done automatically 129 00:06:23,710 --> 00:06:26,713 by the csurf middleware that we activated. 130 00:06:27,990 --> 00:06:31,050 But with that, this form on the official site 131 00:06:31,050 --> 00:06:33,320 now will contain this token 132 00:06:33,320 --> 00:06:35,970 and the form on the attacker's site won't 133 00:06:35,970 --> 00:06:37,840 because the attacker has no way 134 00:06:37,840 --> 00:06:40,100 of getting this correct token 135 00:06:40,100 --> 00:06:43,830 because that token is generated on the official site 136 00:06:43,830 --> 00:06:46,243 and therefore only known to that site. 137 00:06:47,860 --> 00:06:51,570 So now if we restart the server here 138 00:06:51,570 --> 00:06:54,000 and I'm back on the official site, 139 00:06:54,000 --> 00:06:58,360 I can reload and if I sent money to test3@test.com, 140 00:06:58,360 --> 00:07:01,160 let's say 300, this works. 141 00:07:01,160 --> 00:07:02,720 This still works. 142 00:07:02,720 --> 00:07:05,190 You just have to make sure you reload at least once 143 00:07:05,190 --> 00:07:06,430 before you send it 144 00:07:06,430 --> 00:07:09,703 because only then the updated template will be used. 145 00:07:10,870 --> 00:07:12,580 But now with that, that was sent. 146 00:07:12,580 --> 00:07:14,530 And if we have a look at all transactions, 147 00:07:14,530 --> 00:07:16,700 we can see that latest transaction 148 00:07:16,700 --> 00:07:18,583 with the correct recipient here. 149 00:07:19,570 --> 00:07:22,320 If I'm now back on the attacker page here, 150 00:07:22,320 --> 00:07:25,500 local host 8000/transaction, 151 00:07:25,500 --> 00:07:29,053 and I try the same trick from before again, 152 00:07:29,920 --> 00:07:32,160 now we have an error. 153 00:07:32,160 --> 00:07:33,540 Now we have an error 154 00:07:33,540 --> 00:07:36,960 and now we don't have that transaction here. 155 00:07:36,960 --> 00:07:39,760 Instead, no new transaction was added 156 00:07:39,760 --> 00:07:42,757 because that attacker page was missing the token, 157 00:07:42,757 --> 00:07:44,890 the CSRF token. 158 00:07:44,890 --> 00:07:49,440 So this is how you defend against those CSRF attacks. 159 00:07:49,440 --> 00:07:53,620 You wanna include this token into all your forms 160 00:07:53,620 --> 00:07:55,903 with help of that CSRF package. 161 00:07:56,950 --> 00:07:58,880 Now here, we also would have more forms 162 00:07:58,880 --> 00:08:01,330 where we can add signup and login. 163 00:08:01,330 --> 00:08:04,230 And therefore, definitely as an extra practice, 164 00:08:04,230 --> 00:08:05,940 add the token there. 165 00:08:05,940 --> 00:08:08,960 I will instead move on to the next attack pattern, 166 00:08:08,960 --> 00:08:10,850 but later in this course, 167 00:08:10,850 --> 00:08:13,670 when we work on the online shop example, 168 00:08:13,670 --> 00:08:15,030 we will, of course, 169 00:08:15,030 --> 00:08:17,983 also implement CSRF protection there again.