1
00:00:02,040 --> 00:00:03,950
Now before we continue with

2
00:00:03,950 --> 00:00:07,260
the authentication logic and logging users in,

3
00:00:07,260 --> 00:00:09,480
we got a couple of improvements to make about the

4
00:00:09,480 --> 00:00:11,063
signup process.

5
00:00:11,910 --> 00:00:14,100
Of course, we will need to validate

6
00:00:14,100 --> 00:00:17,250
the incoming data and ensure that, for example,

7
00:00:17,250 --> 00:00:22,090
the email and confirm email that these two values match,

8
00:00:22,090 --> 00:00:25,890
but we also should improve the security of our website by

9
00:00:25,890 --> 00:00:29,000
protecting against CSRF attacks.

10
00:00:29,000 --> 00:00:30,650
I covered those earlier,

11
00:00:30,650 --> 00:00:33,350
in the Dedicated Security Section of this course,

12
00:00:33,350 --> 00:00:36,270
and the idea behind CSRF attacks is that

13
00:00:36,270 --> 00:00:39,530
attackers can assume the identity of our users,

14
00:00:39,530 --> 00:00:41,560
which will be especially a problem

15
00:00:41,560 --> 00:00:44,830
once our users are signed up and in.

16
00:00:44,830 --> 00:00:47,650
So at the moment, that's not possible

17
00:00:47,650 --> 00:00:50,570
because we're not really logging users in yet,

18
00:00:50,570 --> 00:00:54,300
but I already want to start implementing security measures

19
00:00:54,300 --> 00:00:56,203
against CSRF attacks.

20
00:00:57,060 --> 00:01:02,010
And last, but definitely not least things can go wrong.

21
00:01:02,010 --> 00:01:05,990
We might fail with saving user data to the database.

22
00:01:05,990 --> 00:01:07,550
This could throw an error,

23
00:01:07,550 --> 00:01:10,820
if the underlying methods that talk to the database

24
00:01:10,820 --> 00:01:12,930
are throwing errors.

25
00:01:12,930 --> 00:01:17,423
So therefore, of course, I also want to add error handling.

26
00:01:18,290 --> 00:01:20,630
These are the different things that should be added,

27
00:01:20,630 --> 00:01:23,770
and I'll start by adding CSRF protection.

28
00:01:23,770 --> 00:01:25,990
For this I'll use a third-party package

29
00:01:25,990 --> 00:01:30,740
because coming up with my own measures is pretty error prone

30
00:01:30,740 --> 00:01:33,380
and a very popular note express package

31
00:01:33,380 --> 00:01:38,380
for protecting against CSRF attacks is to CSurf package.

32
00:01:38,420 --> 00:01:40,373
Which is the package I'll install here.

33
00:01:42,020 --> 00:01:47,020
With CSurf installed, we can restart our server here.

34
00:01:49,220 --> 00:01:53,580
Back in app.js we want to activate this package.

35
00:01:53,580 --> 00:01:57,940
This is done by first of all, importing it there

36
00:01:57,940 --> 00:02:00,823
by requiring CSurf like this.

37
00:02:01,760 --> 00:02:05,090
And then we activated as a middleware.

38
00:02:05,090 --> 00:02:07,320
The exact position doesn't matter,

39
00:02:07,320 --> 00:02:10,190
but you want to do that before a request to reaches your

40
00:02:10,190 --> 00:02:13,240
routes. So I will actually do that here,

41
00:02:13,240 --> 00:02:16,430
use CSurf or the CSRF package.

42
00:02:16,430 --> 00:02:18,830
And this is actually all is a function which we have to

43
00:02:18,830 --> 00:02:22,050
execute. And then it's this executed function,

44
00:02:22,050 --> 00:02:25,820
which recurs the actual middleware that will be registered

45
00:02:25,820 --> 00:02:28,170
because we can configure it this middleware.

46
00:02:28,170 --> 00:02:30,650
But the default settings will do the trick for us here

47
00:02:30,650 --> 00:02:33,113
and therefore we don't need to do anything else.

48
00:02:34,220 --> 00:02:37,410
Now we will have that CSRF protection,

49
00:02:37,410 --> 00:02:40,130
and that simply means that all incoming requests,

50
00:02:40,130 --> 00:02:42,330
which are not Get requests,

51
00:02:42,330 --> 00:02:46,060
now needs to have a CSRF token attached.

52
00:02:46,060 --> 00:02:48,410
This is what this middleware will check for.

53
00:02:48,410 --> 00:02:51,530
And any requests that are not Get requests

54
00:02:51,530 --> 00:02:54,870
that don't have a valid CSRF token

55
00:02:54,870 --> 00:02:58,723
will be... denied; They won't be able to continue.

56
00:02:59,880 --> 00:03:02,510
Therefore, we need to ensure that we add such a token to

57
00:03:02,510 --> 00:03:04,640
all the forums we have on our page,

58
00:03:04,640 --> 00:03:06,960
and to do this conveniently,

59
00:03:06,960 --> 00:03:10,730
I will add my own custom middleware now.

60
00:03:10,730 --> 00:03:15,730
Because I don't want to extract the token and use the token

61
00:03:16,020 --> 00:03:19,300
manually in different parts of this page. Instead,

62
00:03:19,300 --> 00:03:21,690
I want to use a feature built into express,

63
00:03:21,690 --> 00:03:25,280
which allows me to set up a variable on my response

64
00:03:25,280 --> 00:03:28,870
that I can then access in all my views

65
00:03:28,870 --> 00:03:30,900
so that we don't have to pass the token

66
00:03:30,900 --> 00:03:32,983
into all our views manually.

67
00:03:34,210 --> 00:03:36,800
And I'll do this in my own custom middleware

68
00:03:36,800 --> 00:03:40,410
so that I don't write the logic for setting this variable

69
00:03:40,410 --> 00:03:44,853
in app.js, but I can instead keep this file relatively lean.

70
00:03:46,150 --> 00:03:48,960
Hence we can add a middlewares folder.

71
00:03:48,960 --> 00:03:53,880
And in there I'll add a 'CSRF- token.js' file.

72
00:03:53,880 --> 00:03:56,170
And there we can add our own middleware

73
00:03:56,170 --> 00:03:59,410
and a middleware is just a function in the end.

74
00:03:59,410 --> 00:04:03,080
The function name is up to you, but I'll name it.

75
00:04:03,080 --> 00:04:04,247
'addCsrfToken'

76
00:04:05,130 --> 00:04:06,690
like this,

77
00:04:06,690 --> 00:04:09,340
and this will receive a request and a response.

78
00:04:09,340 --> 00:04:11,520
And the next value.

79
00:04:11,520 --> 00:04:14,611
These are the three parameter values all

80
00:04:14,611 --> 00:04:17,920
middlewares will receive because express we'll call

81
00:04:17,920 --> 00:04:19,430
those middlewares for us.

82
00:04:19,430 --> 00:04:22,360
And it will pass these three values into those

83
00:04:22,360 --> 00:04:23,633
middleware functions.

84
00:04:24,700 --> 00:04:27,750
And then we can work with these values here,

85
00:04:27,750 --> 00:04:32,090
and I will work with all three of them in addCsrfTtoken

86
00:04:32,090 --> 00:04:33,890
because on the response,

87
00:04:33,890 --> 00:04:36,430
I'll use a feature supported by express,

88
00:04:36,430 --> 00:04:38,370
which allows me to set variables

89
00:04:38,370 --> 00:04:41,530
that are exposed to all views automatically

90
00:04:41,530 --> 00:04:44,283
with help of the locals property.

91
00:04:45,180 --> 00:04:48,590
And on locals, I can then add my own key value pairs

92
00:04:48,590 --> 00:04:53,270
like token and the value of that custom property on locals

93
00:04:53,270 --> 00:04:57,983
will be request dot CSRF token, which is a method I call.

94
00:04:59,300 --> 00:05:01,040
This method is available

95
00:05:01,040 --> 00:05:03,380
thanks to the CSRF middleware package

96
00:05:03,380 --> 00:05:05,223
we added a couple of minutes ago.

97
00:05:06,440 --> 00:05:08,780
So this generates a valid token.

98
00:05:08,780 --> 00:05:12,487
This token is then saved in res.locals and locals is

99
00:05:12,487 --> 00:05:14,823
available in all my views later on.

100
00:05:15,940 --> 00:05:17,920
Now I just need to make sure

101
00:05:17,920 --> 00:05:20,460
that once this middleware was executed,

102
00:05:20,460 --> 00:05:22,824
the request for which it was executed

103
00:05:22,824 --> 00:05:26,770
is able to reach the next middleware or route handler

104
00:05:26,770 --> 00:05:30,120
in line, and that can be achieved by calling next

105
00:05:30,120 --> 00:05:32,263
this third parameter value.

106
00:05:33,240 --> 00:05:37,900
That's a function which, when executed, forwards the request

107
00:05:37,900 --> 00:05:39,633
to the next middleware in line.

108
00:05:42,240 --> 00:05:45,030
Now we just need to expose this custom middleware

109
00:05:45,030 --> 00:05:47,593
by exporting it like this.

110
00:05:48,570 --> 00:05:51,070
And then we can use it in app.js.

111
00:05:51,070 --> 00:05:54,400
Here... I will...import it,

112
00:05:54,400 --> 00:05:56,170
maybe here

113
00:05:56,170 --> 00:06:00,820
the addCsrfToken middleware, as I will call it,

114
00:06:00,820 --> 00:06:03,220
to make it very clear that this is a middleware.

115
00:06:04,320 --> 00:06:06,760
And I will require it

116
00:06:06,760 --> 00:06:11,013
by going to ./middlewares/csrf-token

117
00:06:12,160 --> 00:06:13,973
which is the file we just worked in.

118
00:06:15,900 --> 00:06:20,800
And then here, after using the CSRF package middleware,

119
00:06:20,800 --> 00:06:23,660
I will use my own middleware here.

120
00:06:23,660 --> 00:06:27,513
My own addCSRFtoken middleware I just imported.

121
00:06:29,430 --> 00:06:31,430
It's important that we do this after

122
00:06:31,430 --> 00:06:33,450
registering the package middleware

123
00:06:33,450 --> 00:06:35,600
the CSRF package middleware,

124
00:06:35,600 --> 00:06:39,180
because that is the middleware dead gives us this

125
00:06:39,180 --> 00:06:40,620
CSRF token method,

126
00:06:40,620 --> 00:06:43,390
which I am then using in my own middleware.

127
00:06:43,390 --> 00:06:45,930
So we have to execute our custom middleware,

128
00:06:45,930 --> 00:06:48,890
which relies on the existence of this method,

129
00:06:48,890 --> 00:06:51,263
after the third party package middleware.

130
00:06:52,820 --> 00:06:56,740
We don't need to execute addCSRFtoken middleware here,

131
00:06:56,740 --> 00:06:59,450
because unlike the third party package function,

132
00:06:59,450 --> 00:07:00,610
that is exposed here,

133
00:07:00,610 --> 00:07:04,230
this already is the final middleware function,

134
00:07:04,230 --> 00:07:06,740
and we don't want to execute that ourselves.

135
00:07:06,740 --> 00:07:08,340
Instead, we want to make it available

136
00:07:08,340 --> 00:07:11,103
to express, for express to execute it.

137
00:07:12,910 --> 00:07:15,960
And now we can go to the signup.ejs file.

138
00:07:15,960 --> 00:07:20,900
And in this forum, we now have to make sure that the token

139
00:07:20,900 --> 00:07:23,040
is part of the forum submission.

140
00:07:23,040 --> 00:07:26,350
So part of the data that's generated and sent along

141
00:07:26,350 --> 00:07:29,740
with the request when the form is submitted.

142
00:07:29,740 --> 00:07:32,480
And typically this is achieve by adding

143
00:07:32,480 --> 00:07:36,040
a special type of input, a hidden input,

144
00:07:36,040 --> 00:07:38,670
which is one of the built in types.

145
00:07:38,670 --> 00:07:42,070
This is an input which is not visible to the user and which

146
00:07:42,070 --> 00:07:45,740
is not meant for the user to be populated with data,

147
00:07:45,740 --> 00:07:47,980
but which instead is already there

148
00:07:47,980 --> 00:07:50,123
and sent along with the request.

149
00:07:51,220 --> 00:07:53,010
Now this needs to have a special name

150
00:07:53,010 --> 00:07:55,520
for which the CSRF package will look

151
00:07:55,520 --> 00:07:57,910
and that's underscore CSRF

152
00:07:58,940 --> 00:08:01,720
and the value then is set by us,

153
00:08:01,720 --> 00:08:05,100
but it's not hard coded into the view. Instead it is

154
00:08:05,100 --> 00:08:08,470
that token that's generated with help of the package,

155
00:08:08,470 --> 00:08:11,540
that token, which I generate here.

156
00:08:11,540 --> 00:08:15,060
Which is stored in a CSRF token property on that

157
00:08:15,060 --> 00:08:18,593
locals field, which is provided by express.

158
00:08:19,780 --> 00:08:22,370
So here we can use the EJS templating language

159
00:08:22,370 --> 00:08:24,210
to output a value.

160
00:08:24,210 --> 00:08:28,510
And the value I do want to output here, is locals

161
00:08:28,510 --> 00:08:31,470
without rests in front of it, just locals,

162
00:08:31,470 --> 00:08:34,602
and then our key name CSRF token.

163
00:08:37,299 --> 00:08:40,940
And I will already copy that and also add it to login

164
00:08:41,909 --> 00:08:46,290
EJS into that form, because we'll need that there as well.

165
00:08:46,290 --> 00:08:49,120
With that we added CSRF protection,

166
00:08:49,120 --> 00:08:53,170
and... if I reload this fails.

167
00:08:53,170 --> 00:08:58,170
And this fails because CSurf package actually also needs

168
00:08:58,190 --> 00:09:02,640
the session package. It needs a session to handle that

169
00:09:02,640 --> 00:09:07,290
CSRF token. And at the moment we haven't added any session

170
00:09:07,290 --> 00:09:12,290
support or a session functionality at all, to our site here.

171
00:09:12,680 --> 00:09:14,330
Therefore at the moment, this will fail,

172
00:09:14,330 --> 00:09:16,687
but that's no problem because we've got a couple of other

173
00:09:16,687 --> 00:09:20,590
things to fix anyways, before we then we'll add sessions.

174
00:09:20,590 --> 00:09:24,763
And before we then we'll evaluate the final result again,