1 00:00:00,120 --> 00:00:01,730 So now let's talk about CORS, 2 00:00:01,730 --> 00:00:03,750 or Cross-Origin Resource Sharing 3 00:00:03,750 --> 00:00:05,610 and this is a complicated concept, 4 00:00:05,610 --> 00:00:08,720 but it does come up by the exam in very simple use cases, 5 00:00:08,720 --> 00:00:10,390 but I want to go deep into CORS 6 00:00:10,390 --> 00:00:12,010 to really explain to you how it works, 7 00:00:12,010 --> 00:00:15,370 because it will make answering the question extremely easy. 8 00:00:15,370 --> 00:00:17,160 So what is an origin? 9 00:00:17,160 --> 00:00:19,392 An origin is a scheme, so a protocol, 10 00:00:19,392 --> 00:00:21,970 a host, a domain, and a port. 11 00:00:21,970 --> 00:00:23,810 In English, what that means is that 12 00:00:23,810 --> 00:00:28,550 for example, if you do https://www.example.com, 13 00:00:28,550 --> 00:00:32,900 this is an origin where the scheme is HTTPS, 14 00:00:32,900 --> 00:00:36,040 the host is www.example.com, 15 00:00:36,040 --> 00:00:38,860 and the port is port 443. 16 00:00:38,860 --> 00:00:39,693 Why? 17 00:00:39,693 --> 00:00:42,190 Because as soon as you have HTTPS, it is port 443 18 00:00:42,190 --> 00:00:43,930 as an implied port. 19 00:00:43,930 --> 00:00:47,600 Okay, so CORS means Cross-Origin Resource Sharing. 20 00:00:47,600 --> 00:00:49,760 So that means we want to get resources 21 00:00:49,760 --> 00:00:51,760 from a different origin. 22 00:00:51,760 --> 00:00:55,390 The Web Browser are having this security in place 23 00:00:55,390 --> 00:00:58,766 CORS basically saying as soon as you visit a website, 24 00:00:58,766 --> 00:01:01,780 you can make request to other origins 25 00:01:01,780 --> 00:01:06,020 only if the other origins allow you to make these request. 26 00:01:06,020 --> 00:01:08,340 This is a browser-based security. 27 00:01:08,340 --> 00:01:11,430 So what is the same origin and what is a different origin? 28 00:01:11,430 --> 00:01:13,550 Well for example, same origin is this, 29 00:01:13,550 --> 00:01:15,630 where you go on example.com/app1 30 00:01:15,630 --> 00:01:17,350 or example.com/app2. 31 00:01:17,350 --> 00:01:20,150 This is the same origin, so we can make requests 32 00:01:20,150 --> 00:01:23,480 from the web browser from the first URL to the second URL 33 00:01:23,480 --> 00:01:25,780 because this is the same origin. 34 00:01:25,780 --> 00:01:27,880 But if you visit, for example, 35 00:01:27,880 --> 00:01:32,210 www.example.com and then you're asking your web browser 36 00:01:32,210 --> 00:01:35,840 to make a request to other.example.com, 37 00:01:35,840 --> 00:01:38,550 this is what's called a cross-origin request 38 00:01:38,550 --> 00:01:40,080 and your web browser will block it 39 00:01:40,080 --> 00:01:42,730 unless you have the correct CORS headers 40 00:01:42,730 --> 00:01:44,940 and we'll see what these are in a second. 41 00:01:44,940 --> 00:01:47,250 So now that we now what is the same origin 42 00:01:47,250 --> 00:01:49,240 and what is a different origin, 43 00:01:49,240 --> 00:01:51,530 we know that the request will not be fulfilled 44 00:01:51,530 --> 00:01:54,410 unless the other origin allows for the request 45 00:01:54,410 --> 00:01:55,760 using the CORS Headers. 46 00:01:55,760 --> 00:01:57,770 And the CORS Headers is this one you will see 47 00:01:57,770 --> 00:02:01,780 in the hands-on called Access-Control-Allow-Origin. 48 00:02:01,780 --> 00:02:03,390 Okay, so that's just for the theory, 49 00:02:03,390 --> 00:02:04,340 now let's go in the diagram 50 00:02:04,340 --> 00:02:06,030 and it will make a lot more sense. 51 00:02:06,030 --> 00:02:07,880 So here's our web browser 52 00:02:07,880 --> 00:02:10,940 and it visits our first web server. 53 00:02:10,940 --> 00:02:12,760 And because this is the first visit we do, 54 00:02:12,760 --> 00:02:14,290 it's called the origin. 55 00:02:14,290 --> 00:02:17,720 So for example, our web server is at https://www.example.com 56 00:02:21,040 --> 00:02:22,270 Okay, great. 57 00:02:22,270 --> 00:02:25,940 And there is a second web server called a cross-origin 58 00:02:25,940 --> 00:02:27,810 because it has a different url, 59 00:02:27,810 --> 00:02:32,810 which is https://www.other.com. 60 00:02:33,260 --> 00:02:37,020 So a web browser visits our first origin 61 00:02:37,020 --> 00:02:39,590 and it's going to be asked from the files 62 00:02:39,590 --> 00:02:41,090 that are uploaded from the origin 63 00:02:41,090 --> 00:02:44,040 to make a request to the cross-origin. 64 00:02:44,040 --> 00:02:45,850 So what the web browser will do, 65 00:02:45,850 --> 00:02:48,590 is that it will do what is called a preflight request. 66 00:02:48,590 --> 00:02:50,730 And this preflight request is going to ask 67 00:02:50,730 --> 00:02:54,480 the cross-origin if it is allowed to do a request on it. 68 00:02:54,480 --> 00:02:55,313 So it's going to say, 69 00:02:55,313 --> 00:03:00,313 "Hey cross-origin, the website https://www.example.com 70 00:03:00,400 --> 00:03:03,260 is sending me to you, can I make a request 71 00:03:03,260 --> 00:03:04,450 onto your website?" 72 00:03:04,450 --> 00:03:08,410 and the origin is saying, "yes, here is what you can do." 73 00:03:08,410 --> 00:03:11,420 so the Access-Control-Allow-Origin is saying 74 00:03:11,420 --> 00:03:12,680 is this website allowed or not? 75 00:03:12,680 --> 00:03:14,510 So yes, it is allowed because now we have 76 00:03:14,510 --> 00:03:16,430 the same origin here, the green one, 77 00:03:16,430 --> 00:03:18,100 as we had on the left hand side. 78 00:03:18,100 --> 00:03:20,170 And the methods that are authorized 79 00:03:20,170 --> 00:03:22,580 is GET, PUT, and DELETE. 80 00:03:22,580 --> 00:03:26,510 So we can get a file, delete a file, or update the file. 81 00:03:26,510 --> 00:03:29,000 Okay, so this is what the cross-origin 82 00:03:29,000 --> 00:03:31,660 is allowing our web browser to do. 83 00:03:31,660 --> 00:03:34,420 So this is the CORS method, and therefore, 84 00:03:34,420 --> 00:03:37,610 because our web browser has been authorized to do so, 85 00:03:37,610 --> 00:03:39,760 then it can issue, for example, 86 00:03:39,760 --> 00:03:43,670 a GET to this url, and it will be allowed 87 00:03:43,670 --> 00:03:45,600 because the CORS Headers received previously 88 00:03:45,600 --> 00:03:48,350 allowed the web browser to make this request. 89 00:03:48,350 --> 00:03:49,710 Okay, so this may be new to you, 90 00:03:49,710 --> 00:03:51,733 this may be a lot, but you need to understand this 91 00:03:51,733 --> 00:03:53,660 before we go into the next use case, 92 00:03:53,660 --> 00:03:56,320 which is the S3 CORS. 93 00:03:56,320 --> 00:03:59,990 So if a client does a cross-origin request 94 00:03:59,990 --> 00:04:02,700 on our S3 bucket enabled as a website, 95 00:04:02,700 --> 00:04:05,650 then we need to enable the right CORS headers. 96 00:04:05,650 --> 00:04:08,310 It's a very popular exam question, okay? 97 00:04:08,310 --> 00:04:09,520 So you need to understand 98 00:04:09,520 --> 00:04:11,090 when we need to enable CORS headers, 99 00:04:11,090 --> 00:04:13,380 and where we need to enable CORS headers. 100 00:04:13,380 --> 00:04:15,540 So we'll see this in the hands-on as well. 101 00:04:15,540 --> 00:04:18,970 So we can allow for a specific origin by specifying 102 00:04:18,970 --> 00:04:20,550 the entire origin name, 103 00:04:20,550 --> 00:04:22,760 or as star * for all origins. 104 00:04:22,760 --> 00:04:23,980 So let's have a look. 105 00:04:23,980 --> 00:04:27,810 The web browser for example, is getting HTML files 106 00:04:27,810 --> 00:04:29,000 from our bucket. 107 00:04:29,000 --> 00:04:31,920 And our bucket is enabled as a website. 108 00:04:31,920 --> 00:04:34,390 But there is second bucket that is going to be 109 00:04:34,390 --> 00:04:35,726 our cross-origin bucket, 110 00:04:35,726 --> 00:04:37,540 also enabled as a website, 111 00:04:37,540 --> 00:04:39,900 that contains some files that we want. 112 00:04:39,900 --> 00:04:43,580 So, we're going to do GET index.html 113 00:04:43,580 --> 00:04:47,280 and the website will say, okay here is your index.html 114 00:04:47,280 --> 00:04:49,900 and that file is going to say you need to perform 115 00:04:49,900 --> 00:04:54,360 a GET for another file on the other origin. 116 00:04:54,360 --> 00:04:57,770 And if the other bucket is configured 117 00:04:57,770 --> 00:04:59,320 with the right CORS headers, 118 00:04:59,320 --> 00:05:01,880 then web browser will be able to make the request, 119 00:05:01,880 --> 00:05:04,770 if not it will not be able to make that request 120 00:05:04,770 --> 00:05:06,700 and that is the whole purpose of CORS. 121 00:05:06,700 --> 00:05:10,110 So as we can see here, the CORS headers have to be defined 122 00:05:10,110 --> 00:05:12,210 on the cross-origin bucket, 123 00:05:12,210 --> 00:05:14,830 not the first origin bucket, okay? 124 00:05:14,830 --> 00:05:16,260 So this is just for theory, 125 00:05:16,260 --> 00:05:17,720 we're going to go into the hands-on 126 00:05:17,720 --> 00:05:19,455 to see how we can explain these concepts 127 00:05:19,455 --> 00:05:21,900 in a much more practical way. 128 00:05:21,900 --> 00:05:23,110 So that was it for the lecture. 129 00:05:23,110 --> 00:05:24,860 I will see you in the next lecture.