WEBVTT 00:00.710 --> 00:09.920 The last time we have converted our old CSRF token code from the function base code into a class based 00:09.920 --> 00:13.340 code, improving bits here and there. 00:13.370 --> 00:20.720 I think it would be a little bit easier to use, so we don't really need this old project code anymore. 00:20.750 --> 00:27.650 I'm just going to switch to a full screen view with a browser preview, and I'd like us to just apply 00:27.650 --> 00:30.890 this CSRF protection inside. 00:30.890 --> 00:38.420 Probably the only form we have so far, but we just need to see if everything works fine. 00:38.420 --> 00:48.350 Also, since we have this utilities file, we can also come up with an easier way to render or add the 00:48.350 --> 00:51.320 CSRF token to a form. 00:51.890 --> 00:55.760 So let's switch to a different view right now. 00:57.380 --> 00:58.070 Okay guys. 00:58.070 --> 01:00.060 So we are in a different view. 01:00.450 --> 01:05.310 Next up we should jump to the helpers file. 01:05.340 --> 01:12.450 This is where we create functions that can be easily used inside the views inside templates. 01:12.450 --> 01:16.920 So again let's check if specific function exists. 01:16.950 --> 01:21.270 I'm going to call this one CSRF token. 01:21.420 --> 01:25.920 It's just supposed to be rendering the CSRF token in a form. 01:26.430 --> 01:29.850 Let me define it then that function. 01:29.880 --> 01:32.220 CSRF token. 01:33.360 --> 01:38.610 Don't think it requires any parameters and it should return a string. 01:39.750 --> 01:49.110 Now, since we actually depend on the token having a specific name, we literally check if the field 01:49.140 --> 01:51.090 name is underscore token. 01:52.410 --> 02:00.610 I think this helper should not only give you a value of the current token inside templates. 02:01.870 --> 02:03.520 I've misspelled this again. 02:03.730 --> 02:09.040 It instead should just return the whole input tag. 02:09.040 --> 02:15.610 So by using this function, you should just make sure you've got the input with the correct value. 02:15.640 --> 02:18.820 You shouldn't really worry about anything else. 02:18.820 --> 02:23.380 So I think we can use the here doc syntax for this. 02:23.740 --> 02:29.950 So let me return those three characters and the custom string. 02:31.690 --> 02:33.610 That's a valid here doc. 02:33.790 --> 02:41.380 And now I'm adding the input of type hidden the name of it. 02:41.380 --> 02:51.220 Well we would need to use the CSRF class which has this as a const. 02:53.830 --> 02:55.450 Token field name. 02:56.390 --> 02:59.000 And the value. 03:01.010 --> 03:02.060 This would be. 03:02.090 --> 03:03.980 CSV. 03:04.010 --> 03:06.170 Get token if I'm right. 03:09.380 --> 03:10.790 Generate token. 03:10.790 --> 03:11.600 Get token. 03:11.630 --> 03:12.110 Okay. 03:12.140 --> 03:20.150 Um, so that's the method that will give you, well, the most up to date token. 03:20.840 --> 03:29.300 We should also rethink what this publicly available because I don't think this method should be public. 03:29.450 --> 03:34.310 We should only have one way of accessing the token. 03:34.310 --> 03:37.970 And this should be this generate token method. 03:38.630 --> 03:39.290 Uh, sorry. 03:39.290 --> 03:41.000 This should be get token method. 03:41.000 --> 03:44.120 And this one should just be used internally. 03:47.060 --> 03:47.570 All right. 03:47.570 --> 03:49.040 So I think it's fine. 03:49.040 --> 03:52.010 Let's just make sure we have this class used. 03:52.010 --> 04:00.960 It's up services CSV or you know what I think maybe let's go with uppercase. 04:00.990 --> 04:01.590 Name. 04:01.590 --> 04:04.350 And let me just rename the file to be extra. 04:04.380 --> 04:04.680 Sure. 04:04.710 --> 04:06.420 It just looks better. 04:07.800 --> 04:09.390 So let's go with that. 04:09.390 --> 04:13.500 And this is uppercase CSV since the case matters. 04:13.530 --> 04:17.370 That's why you need to do it this way. 04:17.910 --> 04:18.510 Okay. 04:18.510 --> 04:25.950 So now to just output the or to have this token inside a form, we can just call this function which 04:25.950 --> 04:28.290 just should be globally available. 04:28.410 --> 04:34.200 So let me jump to our I think only form where we have this CSV placeholder. 04:34.200 --> 04:39.480 So now it is as simple as doing CSRF token. 04:39.780 --> 04:40.830 And that's it. 04:42.270 --> 04:44.280 So let's jump to the form. 04:48.450 --> 04:55.780 And now the thing is that generating the token without validating it would not do us any good. 04:55.840 --> 05:05.230 That's why we need to make sure in every action that is handling the form submission, that we verify 05:05.230 --> 05:08.620 the token, and that it is the first thing that we do. 05:08.650 --> 05:12.070 That's why we've got this todo item in here. 05:12.130 --> 05:19.000 Now let me mention this again that I think that the token verification should be automatic. 05:19.030 --> 05:27.970 We should always automatically verify tokens on all the requests that are of specific type like post, 05:28.000 --> 05:35.800 put, delete, etc. we're going to do it later on very soon, but we would need to learn a couple more 05:35.800 --> 05:37.930 more concepts before we can do that. 05:37.930 --> 05:41.140 For now, let's just verify the token manually. 05:42.640 --> 05:48.100 So this would be if CSRF verify. 05:49.870 --> 05:57.870 And in this case, I'm not gonna be passing the token because I just want it automatically taken from 05:57.870 --> 05:58.770 the form. 06:00.900 --> 06:04.800 So if the verification fails. 06:07.140 --> 06:08.700 I think we need. 06:08.730 --> 06:12.360 Okay, so this is nullable without nullable default values. 06:12.360 --> 06:13.950 So we need to change that. 06:17.310 --> 06:18.810 To be null by default. 06:18.840 --> 06:21.060 Okay I think this should be fine. 06:21.090 --> 06:21.630 Okay. 06:21.630 --> 06:26.040 Now if this fails let's think what we can do. 06:26.490 --> 06:27.930 What options do we have. 06:27.960 --> 06:30.840 We should tell someone about it. 06:30.870 --> 06:34.620 Or we should display an error page. 06:36.960 --> 06:42.480 Now there is actually a pretty good candidate for an error code. 06:42.480 --> 06:45.300 That's for 19 page expired. 06:45.600 --> 06:53.380 Now you for sure gonna see this error when working with the Laravel PHP framework, and it is often 06:53.380 --> 07:01.090 just displayed on this very issue when you have an expired CSRF token. 07:01.210 --> 07:08.890 So after all the work that we did with CSRF tokens, now you're gonna deeply understand why does it 07:08.890 --> 07:09.670 happen? 07:09.700 --> 07:18.340 Is this docs or this page of I've just found is even mentioning Laravel PHP framework right here. 07:18.340 --> 07:23.110 And I think that we should just create the same error. 07:23.110 --> 07:25.330 So let's make a view for it. 07:25.360 --> 07:30.610 This is for 19 PHP. 07:32.200 --> 07:37.750 And we just gonna display an specific view for this error. 07:38.020 --> 07:42.040 Let's say it's for 19. 07:42.070 --> 07:44.350 It's often called session expired. 07:44.380 --> 07:47.140 We can call it page expired. 07:49.070 --> 07:56.660 And I'm going to say you probably took too long to submit a form. 07:58.250 --> 07:58.940 Sorry. 07:58.940 --> 08:02.030 And please try again. 08:02.840 --> 08:04.250 Be quicker. 08:05.930 --> 08:12.350 Maybe that's not a very funny joke, but, um, at least we tell people what's happening. 08:12.920 --> 08:15.920 And let's close this. 08:15.950 --> 08:24.230 And we can either choose to render it right away or use router to just redirect to those errors. 08:26.030 --> 08:31.520 Let's see if we have photo for method inside this. 08:31.550 --> 08:34.910 Yeah we've got 404 which is not found. 08:35.510 --> 08:47.370 Why don't we add page expired returning the right code which is 419 and redirecting or just rendering 08:47.370 --> 08:50.760 the view straight away and doing an exit. 08:51.870 --> 08:57.450 And here we can just use router page expired. 08:59.250 --> 09:01.110 And I think it's perfect. 09:01.320 --> 09:02.760 Super simple. 09:03.180 --> 09:04.860 Easy to understand. 09:05.130 --> 09:10.290 We fade the verifications of the page is expired and we know what's happening. 09:10.350 --> 09:15.930 And even though this is super simple, I still think this should be automated. 09:15.930 --> 09:22.800 So whenever there is a Post request, we should just automatically do it without having to remember 09:22.800 --> 09:23.700 about that. 09:24.510 --> 09:26.430 And I think that's it. 09:26.460 --> 09:28.800 We can now finally test this. 09:29.760 --> 09:33.960 So for testing I think we should make a shorter token. 09:33.960 --> 09:35.190 It's in seconds. 09:35.190 --> 09:39.270 So first let's see if the token would be expired. 09:41.730 --> 09:45.880 Now let me refresh the form first and see if we even render the token. 09:46.630 --> 09:51.970 It seems that we are not properly rendering it as you see right here. 09:53.320 --> 09:55.420 It is treating the code literally. 09:55.420 --> 09:57.730 So let's fix this first. 09:58.330 --> 10:07.990 I think we can just, um, get the token field name first into a variable. 10:09.190 --> 10:10.690 So this is not accessible. 10:10.690 --> 10:13.990 Probably it is just private. 10:14.020 --> 10:14.650 Okay. 10:14.740 --> 10:16.960 We need to change that to public. 10:16.960 --> 10:18.940 Let's go back to helpers. 10:19.810 --> 10:24.910 Now we should get the token field name. 10:25.030 --> 10:26.200 There it is. 10:26.560 --> 10:30.280 Let me replace that with token field. 10:30.580 --> 10:33.520 And the next thing is the token itself. 10:33.520 --> 10:34.810 Let's get it. 10:35.140 --> 10:36.280 Get token. 10:36.280 --> 10:41.590 And let's just put a variable here without any curly braces. 10:42.920 --> 10:49.970 Now, after refreshing the form, we can see the name and the value seems more correct. 10:50.960 --> 10:54.170 Let me make it a little bit smaller. 10:54.620 --> 10:57.830 Okay, so it's five seconds. 10:57.890 --> 11:00.710 So I should just not make it. 11:01.460 --> 11:10.550 I typed a form and I think that five seconds have already passed and the page is expired, which is 11:10.550 --> 11:12.560 what we actually expect. 11:12.560 --> 11:15.350 That should be the error that is being displayed. 11:15.680 --> 11:20.330 Now let's change that back to 30 minutes. 11:20.480 --> 11:27.380 And this time I think I should be able to do it. 11:28.670 --> 11:35.960 So we've got a new token that is a little longer, and I was able to do it in time and also to verify 11:35.960 --> 11:40.580 and confirm the token, which also confirms that this feature works fine.