1 00:00:00,360 --> 00:00:01,730 Okay, so let's demonstrate 2 00:00:01,730 --> 00:00:04,450 how the CORS settings work in AWS. 3 00:00:04,450 --> 00:00:08,290 So if we go to this index.html file, 4 00:00:08,290 --> 00:00:10,130 we can see that there is a CORS demo part, 5 00:00:10,130 --> 00:00:11,550 which was commented out 6 00:00:11,550 --> 00:00:12,910 but I want to uncomment it out. 7 00:00:12,910 --> 00:00:15,180 So if I take it from line 13, 8 00:00:15,180 --> 00:00:17,800 and I remove this part right here 9 00:00:17,800 --> 00:00:19,770 and I remove this part right here 10 00:00:19,770 --> 00:00:22,560 this is going to uncomment the code. 11 00:00:22,560 --> 00:00:24,180 And so what is this code doing? 12 00:00:24,180 --> 00:00:26,700 Well this code launches a script 13 00:00:26,700 --> 00:00:29,740 and the script is going to fetch a page 14 00:00:29,740 --> 00:00:33,940 called extra-page.html and then return the response text 15 00:00:33,940 --> 00:00:35,530 of that extra-page.html. 16 00:00:35,530 --> 00:00:37,100 So something very simple. 17 00:00:37,100 --> 00:00:42,100 We make the index.html load another HTML document. 18 00:00:42,380 --> 00:00:46,480 And this other HTML document is extra-page.html 19 00:00:46,480 --> 00:00:50,300 and it says, "This extra-page has been successfully loaded!" 20 00:00:50,300 --> 00:00:52,220 Okay, so this is great. 21 00:00:52,220 --> 00:00:56,480 Now we want to upload these new file versions 22 00:00:56,480 --> 00:00:59,160 onto our S3 buckets, so let's do it right now. 23 00:00:59,160 --> 00:01:02,010 We're going to go into our S3 buckets 24 00:01:02,010 --> 00:01:04,620 and I'm going to upload a file, add files 25 00:01:04,620 --> 00:01:07,100 and I will upload both the extra page 26 00:01:07,100 --> 00:01:10,203 and the index.html that I just modified. 27 00:01:11,300 --> 00:01:13,890 I will upload these two files. 28 00:01:13,890 --> 00:01:15,920 This is working, great. 29 00:01:15,920 --> 00:01:17,900 Let me go back to my bucket. 30 00:01:17,900 --> 00:01:21,493 And I closed my website so I'm going to reopen it. 31 00:01:22,660 --> 00:01:24,870 And if you look at my first webpage now, 32 00:01:24,870 --> 00:01:26,080 it says, "I love coffee, hello world!" 33 00:01:26,080 --> 00:01:27,007 But at the bottom it says, 34 00:01:27,007 --> 00:01:29,380 "This extra page has been successfully loaded!" 35 00:01:29,380 --> 00:01:31,610 And this is exactly what we wanted. 36 00:01:31,610 --> 00:01:36,270 And if I do /extra-page.html, press enter, 37 00:01:36,270 --> 00:01:37,397 we just get that little bit, 38 00:01:37,397 --> 00:01:39,970 "This extra page has been successfully loaded!" 39 00:01:39,970 --> 00:01:44,970 So this has worked because both my index.html 40 00:01:45,160 --> 00:01:48,290 and my extra-page.html files are on the same bucket. 41 00:01:48,290 --> 00:01:51,690 So they are what's called same origin, okay. 42 00:01:51,690 --> 00:01:55,653 But now we want to test for a CORS query, okay. 43 00:01:56,870 --> 00:01:58,350 So different origin. 44 00:01:58,350 --> 00:02:01,853 So for this, we are going to create a new bucket. 45 00:02:02,740 --> 00:02:05,130 So let's go back into Amazon history. 46 00:02:05,130 --> 00:02:07,630 And I'm going to create a bucket. 47 00:02:07,630 --> 00:02:10,926 And this one, I'll call it demo-stephane-cors-2020. 48 00:02:14,290 --> 00:02:17,027 Okay. And I will choose a region, so EU (Ireland). 49 00:02:18,670 --> 00:02:22,800 And then I will unblock the public access 50 00:02:22,800 --> 00:02:23,633 because we want to be, 51 00:02:23,633 --> 00:02:26,040 the files within the bucket to be publicly readable. 52 00:02:26,040 --> 00:02:28,440 So I acknowledge this, this is good. 53 00:02:28,440 --> 00:02:29,663 And create the bucket. 54 00:02:30,620 --> 00:02:32,970 So I'm going to configure that bucket to be a website 55 00:02:32,970 --> 00:02:34,750 so we'll scroll down. 56 00:02:34,750 --> 00:02:37,570 And at the very bottom, I will say, "You are a website." 57 00:02:37,570 --> 00:02:40,710 So I enable it, host a static website. 58 00:02:40,710 --> 00:02:43,320 And I will just have the same settings as before. 59 00:02:43,320 --> 00:02:45,440 Even though we're not specifying these files, 60 00:02:45,440 --> 00:02:47,180 this doesn't really matter. 61 00:02:47,180 --> 00:02:48,760 So this is good. 62 00:02:48,760 --> 00:02:50,290 The next thing we have to do, 63 00:02:50,290 --> 00:02:52,670 so if I go to the website right now, it's not going to work. 64 00:02:52,670 --> 00:02:55,810 The next thing I have to do is to, under permissions, 65 00:02:55,810 --> 00:02:58,630 create a bucket policy and make it public. 66 00:02:58,630 --> 00:03:01,700 So I'll go again to my policy generator 67 00:03:01,700 --> 00:03:03,870 or I can just copy it from the one I have here. 68 00:03:03,870 --> 00:03:07,313 So let's copy this bucket policy, it's going to be easier. 69 00:03:08,160 --> 00:03:12,320 I paste it and please make sure to change the resource ARN, 70 00:03:12,320 --> 00:03:14,890 right here, by the one we have just created. 71 00:03:14,890 --> 00:03:16,930 Okay. So this is good. 72 00:03:16,930 --> 00:03:18,940 This has made my bucket public. 73 00:03:18,940 --> 00:03:23,940 And so if I go now to this bucket URL /extra-page.html, 74 00:03:26,420 --> 00:03:28,050 we are getting a 404 not found. 75 00:03:28,050 --> 00:03:30,480 This makes sense because I haven't uploaded the file yet. 76 00:03:30,480 --> 00:03:34,973 So let's upload the file, extra-page.html. 77 00:03:35,930 --> 00:03:39,300 And upload, here we go, this has been uploaded. 78 00:03:39,300 --> 00:03:43,010 So now if I try to finally reload, that's, 79 00:03:43,010 --> 00:03:45,970 we get, "This extra spread has been successfully loaded!" 80 00:03:45,970 --> 00:03:48,340 So what I've done is that I've set up two websites. 81 00:03:48,340 --> 00:03:49,530 I've set up my first website 82 00:03:49,530 --> 00:03:51,940 and my second website which just contains 83 00:03:51,940 --> 00:03:54,380 the extra-page.html. 84 00:03:54,380 --> 00:03:58,050 And now I'm going to go back into my main bucket 85 00:03:58,050 --> 00:04:02,636 and I'm going to, first of all remove this extra-page.html. 86 00:04:02,636 --> 00:04:05,697 So I'm going to delete it and type, "Delete". 87 00:04:07,420 --> 00:04:11,800 Okay. And so now if I exit and go to my first webpage 88 00:04:11,800 --> 00:04:14,170 and refresh this, I'm going to get an error 89 00:04:14,170 --> 00:04:17,940 because yes, it can't load the extra-page.html. 90 00:04:17,940 --> 00:04:20,243 And the second thing I have to do is to, 91 00:04:21,149 --> 00:04:26,150 to edit my index.html file to fetch this document 92 00:04:26,190 --> 00:04:28,140 from the new bucket URL. 93 00:04:28,140 --> 00:04:30,880 So let's copy the full URL right here 94 00:04:32,660 --> 00:04:34,780 and paste it here. 95 00:04:34,780 --> 00:04:38,340 Okay, so now we have HTTP, the name of the target bucket 96 00:04:38,340 --> 00:04:42,593 we want to load our assets from, /extra-page.html. 97 00:04:43,430 --> 00:04:47,110 Now I'm going to reupload that file into our main bucket. 98 00:04:47,110 --> 00:04:52,110 So I will upload it, add the file, and it's the index.html. 99 00:04:54,440 --> 00:04:57,710 Press upload and it has been successfully uploaded. 100 00:04:57,710 --> 00:05:00,780 So now, you know, if you were to be intuitive, 101 00:05:00,780 --> 00:05:03,150 you're saying, "Fetch this file from this new bucket." 102 00:05:03,150 --> 00:05:04,920 So it should definitely work. 103 00:05:04,920 --> 00:05:07,120 And this is where CORS come into play. 104 00:05:07,120 --> 00:05:10,050 So to demonstrate CORS, what I need to do 105 00:05:10,050 --> 00:05:12,640 is to actually show you the Chrome developer tools. 106 00:05:12,640 --> 00:05:14,250 So on the top right corner, 107 00:05:14,250 --> 00:05:18,630 there is more tools and then developer tools. 108 00:05:18,630 --> 00:05:20,040 And this is something I'd like to have 109 00:05:20,040 --> 00:05:22,590 on the right-hand side, just to show you what happens 110 00:05:22,590 --> 00:05:26,240 in the console and in the network while we do this request. 111 00:05:26,240 --> 00:05:28,933 So let me refresh this page right here. 112 00:05:30,030 --> 00:05:31,410 And I refreshed it. 113 00:05:31,410 --> 00:05:33,710 There was no more error, but now we're getting 114 00:05:33,710 --> 00:05:34,917 an error message saying, 115 00:05:34,917 --> 00:05:38,250 "Access to fetch this page from this origin," 116 00:05:38,250 --> 00:05:41,627 so the second bucket from the first bucket, 117 00:05:41,627 --> 00:05:44,090 "has been blocked by the CORS policy 118 00:05:44,090 --> 00:05:47,250 because no Access-Control-Allow-Origin header is present 119 00:05:47,250 --> 00:05:48,730 on the requested resource." 120 00:05:48,730 --> 00:05:51,770 So this is where we need to set the CORS policy 121 00:05:51,770 --> 00:05:53,720 on the second bucket. 122 00:05:53,720 --> 00:05:56,000 Okay? So this is the error we get. 123 00:05:56,000 --> 00:05:58,830 And now let's change the CORS in the second bucket 124 00:05:58,830 --> 00:06:02,320 to allow the first bucket to make a request to it. 125 00:06:02,320 --> 00:06:04,450 So, how do we do this? 126 00:06:04,450 --> 00:06:08,900 Well, we go to the second bucket, so this one, 127 00:06:08,900 --> 00:06:12,440 and under permissions, I will scroll down 128 00:06:12,440 --> 00:06:16,700 and find the cross-origin resource sharing, CORS, settings. 129 00:06:16,700 --> 00:06:20,150 And now we have to define it in JSON, so I will edit this. 130 00:06:20,150 --> 00:06:22,570 It used to be XML, but now it's JSON. 131 00:06:22,570 --> 00:06:25,130 So we need to paste in the correct CORS 132 00:06:25,130 --> 00:06:27,590 to allow my webpage to work. 133 00:06:27,590 --> 00:06:30,070 So, thankfully enough, I have coded this for us. 134 00:06:30,070 --> 00:06:35,070 So CORS_CONFIG.json, copy it and paste it. 135 00:06:36,370 --> 00:06:38,940 And you need to, for allowed origin, 136 00:06:38,940 --> 00:06:42,210 put the URL of the first bucket with HTTP, 137 00:06:42,210 --> 00:06:44,320 without the slash at the end. 138 00:06:44,320 --> 00:06:48,450 So let's take this website, which is the one we're doing. 139 00:06:48,450 --> 00:06:52,400 And we paste it right here. 140 00:06:52,400 --> 00:06:55,780 So we do have the http://, 141 00:06:55,780 --> 00:06:58,820 and then please remove the last slash at the end. 142 00:06:58,820 --> 00:07:01,620 So we allow this origin to make a request 143 00:07:01,620 --> 00:07:03,243 onto the second bucket. 144 00:07:04,400 --> 00:07:07,640 I understand this is a bit advanced, obviously. 145 00:07:07,640 --> 00:07:09,890 If you don't want to follow the hands-on, that's fine. 146 00:07:09,890 --> 00:07:12,400 But just remember the idea of CORS, obviously. 147 00:07:12,400 --> 00:07:13,410 But let's finish this hands-on. 148 00:07:13,410 --> 00:07:17,030 So CORS has been edited and that should be it. 149 00:07:17,030 --> 00:07:21,270 Now, if I go back to my first webpage and refresh this, 150 00:07:21,270 --> 00:07:22,750 now we get no more errors, 151 00:07:22,750 --> 00:07:25,810 and yes, "This extra-page has been successfully loaded," 152 00:07:25,810 --> 00:07:28,340 thanks to the CORS setting, okay. 153 00:07:28,340 --> 00:07:29,600 The other way we can check this 154 00:07:29,600 --> 00:07:32,267 is if we go to the networks tab, as we can see, 155 00:07:32,267 --> 00:07:36,160 "This extra-page.html has been successfully loaded!" 156 00:07:36,160 --> 00:07:38,470 And if we look at the headers of this request 157 00:07:38,470 --> 00:07:41,720 and the response, we can see that in the response headers, 158 00:07:41,720 --> 00:07:45,500 we have the Access-Control-Allow-Origin header, 159 00:07:45,500 --> 00:07:49,290 which contains the full HTTP URL of the first bucket. 160 00:07:49,290 --> 00:07:52,730 And these headers are what is allowing the browser 161 00:07:52,730 --> 00:07:56,160 to load the second URL from the second bucket. 162 00:07:56,160 --> 00:07:57,170 Okay? 163 00:07:57,170 --> 00:07:59,730 So I understand this is quite an advanced hands-on 164 00:07:59,730 --> 00:08:02,900 and you may not be an IT expert, and this is fine. 165 00:08:02,900 --> 00:08:05,310 You don't need you to remember all the steps of what I did. 166 00:08:05,310 --> 00:08:08,510 Just remember that if website number one 167 00:08:08,510 --> 00:08:11,350 needs to access a resource on website number two, 168 00:08:11,350 --> 00:08:14,330 through a web browser, then website number two 169 00:08:14,330 --> 00:08:17,260 needs to have a CORS setting, okay, 170 00:08:17,260 --> 00:08:18,920 to allow the request to be done. 171 00:08:18,920 --> 00:08:21,340 Otherwise the web browser is going to block it. 172 00:08:21,340 --> 00:08:24,040 And this is what I wanted to demo you through this hands-on. 173 00:08:24,040 --> 00:08:25,780 So that's it, I hope you liked it. 174 00:08:25,780 --> 00:08:27,730 And I will see you in the next lecture.