WEBVTT 1 00:00:00.120 --> 00:00:01.520 Hi and welcome back. 2 00:00:01.520 --> 00:00:04.250 Did you know it's fairly trivial 3 00:00:04.250 --> 00:00:08.520 to see what address somebody is accessing on their browser 4 00:00:08.520 --> 00:00:10.760 if you're connected to the same WiFi network 5 00:00:10.760 --> 00:00:12.110 as somebody accessing them? 6 00:00:13.400 --> 00:00:15.210 So if you were in a coffee shop 7 00:00:15.210 --> 00:00:18.240 and you were accessing this page here, 8 00:00:18.240 --> 00:00:19.810 somebody else in the coffee shop 9 00:00:19.810 --> 00:00:21.270 connected to the same WiFi network 10 00:00:21.270 --> 00:00:25.000 might quite easily be able to see what you are accessing. 11 00:00:26.380 --> 00:00:28.290 So why is that important? 12 00:00:28.290 --> 00:00:30.920 Remember when we create a new post, 13 00:00:30.920 --> 00:00:31.970 what we're doing 14 00:00:34.200 --> 00:00:35.780 is something like this. 15 00:00:35.780 --> 00:00:38.950 We're accessing this page /post/create 16 00:00:38.950 --> 00:00:41.160 with these query string parameters. 17 00:00:41.160 --> 00:00:44.100 This is all part of the address. 18 00:00:44.100 --> 00:00:47.580 As I say, it's fairly trivial to see these, 19 00:00:49.610 --> 00:00:50.560 the things you're accessing 20 00:00:50.560 --> 00:00:52.570 when you're connected to the same network. 21 00:00:52.570 --> 00:00:54.890 So obviously for the title and some content, 22 00:00:54.890 --> 00:00:57.690 maybe it doesn't matter that somebody else reads it. 23 00:00:57.690 --> 00:01:00.560 But say you're sending a username and a password, 24 00:01:00.560 --> 00:01:02.860 maybe it starts to matter a bit more 25 00:01:02.860 --> 00:01:06.640 that they're being sent in this way as the address 26 00:01:06.640 --> 00:01:09.890 as opposed to maybe in some more hidden and more secure way. 27 00:01:11.060 --> 00:01:13.960 So in this video, we're going to look at that more hidden 28 00:01:13.960 --> 00:01:17.060 and more secure way that it's a little bit less easy to see. 29 00:01:18.490 --> 00:01:23.490 Let's go over to PyCharm and instead of using request.args, 30 00:01:25.160 --> 00:01:26.430 request.args here, 31 00:01:26.430 --> 00:01:29.170 we're going to be accessing a hidden payload 32 00:01:29.170 --> 00:01:31.620 that comes through in the request. 33 00:01:32.520 --> 00:01:37.520 This hidden payload will be called request.form, okay. 34 00:01:39.830 --> 00:01:41.550 The rest stays the same. 35 00:01:41.550 --> 00:01:44.530 Instead of accessing the query string parameters, 36 00:01:44.530 --> 00:01:48.050 we're gonna be accessing the request.form data. 37 00:01:48.050 --> 00:01:49.400 This is some hidden data 38 00:01:49.400 --> 00:01:53.130 that is included when you send the form using HTML, 39 00:01:54.140 --> 00:01:57.600 but of course the address is still gonna be this. 40 00:01:57.600 --> 00:01:59.510 So we don't want the address to be this. 41 00:01:59.510 --> 00:02:03.740 We want the form to not send the data in this format. 42 00:02:03.740 --> 00:02:07.560 Instead, we want the form to send data as a hidden payload 43 00:02:07.560 --> 00:02:09.560 and that is fairly simple. 44 00:02:09.560 --> 00:02:12.130 If we go over to create.jinja2, 45 00:02:12.130 --> 00:02:16.510 all we have to do is say method is POST. 46 00:02:17.700 --> 00:02:19.870 When you do method is POST, 47 00:02:19.870 --> 00:02:22.430 now the form is going to package up this information 48 00:02:22.430 --> 00:02:25.760 and it's gonna attach it to a hidden payload in the request 49 00:02:25.760 --> 00:02:27.120 and send it through that. 50 00:02:28.070 --> 00:02:30.090 That's because according to internet standards, 51 00:02:30.090 --> 00:02:33.430 the GET request cannot have data payloads, 52 00:02:33.430 --> 00:02:35.350 but the POST request can. 53 00:02:35.350 --> 00:02:36.540 So when you use POST, 54 00:02:36.540 --> 00:02:38.720 the form attaches the data to that payload 55 00:02:38.720 --> 00:02:42.200 instead of putting it in the address bar. 56 00:02:42.200 --> 00:02:43.630 There are a few other benefits 57 00:02:43.630 --> 00:02:46.580 like the amount of information you can send is much greater. 58 00:02:46.580 --> 00:02:49.660 There's a limit to the number of characters in a URL 59 00:02:49.660 --> 00:02:51.730 so if you attach it using POST, 60 00:02:51.730 --> 00:02:54.880 you can send much more data, much lengthier data, 61 00:02:54.880 --> 00:02:56.220 and also it's more secure. 62 00:02:57.510 --> 00:03:01.580 This endpoint here though is only geared up 63 00:03:01.580 --> 00:03:04.910 to accept GET requests. 64 00:03:04.910 --> 00:03:06.890 If you want to accept a POST request 65 00:03:06.890 --> 00:03:09.460 that has that hidden payload of data, 66 00:03:09.460 --> 00:03:13.910 you must tell Flask that you want to link this root app 67 00:03:13.910 --> 00:03:16.990 with a way to access POST requests. 68 00:03:16.990 --> 00:03:18.640 That's really straightforward. 69 00:03:18.640 --> 00:03:23.640 All you have to do is say methods equal this list here 70 00:03:24.790 --> 00:03:27.420 with the POST string inside it. 71 00:03:27.420 --> 00:03:28.790 Now what we've done is we've told Flask 72 00:03:28.790 --> 00:03:33.180 that this root here will only receive POST requests. 73 00:03:33.180 --> 00:03:35.210 If you try to access it with a GET request, 74 00:03:35.210 --> 00:03:37.020 you'll now get an error and it will say, 75 00:03:37.020 --> 00:03:38.910 "Hey, you didn't say you wanted to access this 76 00:03:38.910 --> 00:03:39.750 "with GET requests. 77 00:03:39.750 --> 00:03:41.570 "You can only do POST requests." 78 00:03:42.784 --> 00:03:43.660 And that's it. 79 00:03:43.660 --> 00:03:46.940 Now when we run our app and we go back to Chrome 80 00:03:46.940 --> 00:03:51.820 and we go over to create, 81 00:03:51.820 --> 00:03:53.040 I'll show you the form, 82 00:03:53.040 --> 00:03:53.900 see this is what you get 83 00:03:53.900 --> 00:03:56.140 if you access it using a GET request. 84 00:03:56.140 --> 00:03:57.270 If you go over to the form, 85 00:03:57.270 --> 00:04:02.270 you'll see this and my second post, hi there, 86 00:04:02.620 --> 00:04:03.980 and when you submit, 87 00:04:05.050 --> 00:04:08.300 you get back here and everything works and I promise you, 88 00:04:08.300 --> 00:04:10.570 even though it was too quick for us to see, 89 00:04:10.570 --> 00:04:14.220 there was nothing sent as query string parameters. 90 00:04:14.220 --> 00:04:17.900 So now we can delete this from there. 91 00:04:17.900 --> 00:04:19.440 Nothing was sent as query string parameters. 92 00:04:19.440 --> 00:04:22.380 Now they're being sent, as you can see here in the logs, 93 00:04:22.380 --> 00:04:25.420 as a POST request instead of a GET request 94 00:04:25.420 --> 00:04:27.680 and the form data is hidden in there. 95 00:04:28.920 --> 00:04:30.070 A little bit safer, 96 00:04:30.070 --> 00:04:32.390 but of course there are still more security implications 97 00:04:32.390 --> 00:04:33.223 you have to think about. 98 00:04:33.223 --> 00:04:35.930 Just sending things via POST isn't safe enough. 99 00:04:35.930 --> 00:04:39.310 Just a little bit better than sending them via GET. 100 00:04:40.510 --> 00:04:41.343 That's it for this video. 101 00:04:41.343 --> 00:04:43.100 I wanted to show you how to do that, 102 00:04:43.100 --> 00:04:46.150 accessing things in the form is very useful. 103 00:04:46.150 --> 00:04:47.750 So I'll see you in the next one.