1 00:00:00,710 --> 00:00:04,910 Let's take a look at the other condition that must be true in order for us to have direct access between 2 00:00:04,910 --> 00:00:11,720 frames so we can only have direct access between frames if we fetch the parent document and the iFrame 3 00:00:11,720 --> 00:00:16,650 XML document from the exact same domain and port and protocol. 4 00:00:17,240 --> 00:00:21,020 This is currently true inside of our application if we go back over to our browser. 5 00:00:23,010 --> 00:00:29,760 And open up the network inspector tab and then going to refresh and I'm going to find the initial request 6 00:00:29,760 --> 00:00:33,330 to localhost, this is our index, not HTML document. 7 00:00:33,540 --> 00:00:37,880 If I click on that request and go to response, I can very clearly see that is indexed HTML. 8 00:00:38,520 --> 00:00:44,760 If I mouse over the request, you'll notice it says that we made a request to http localhost PT. three 9 00:00:44,760 --> 00:00:45,240 thousand. 10 00:00:47,040 --> 00:00:50,280 Our iFrame is loading up a HTML document as well. 11 00:00:50,730 --> 00:00:52,210 It is called test on HTML. 12 00:00:52,230 --> 00:00:53,850 There's the request for it right there. 13 00:00:54,450 --> 00:01:00,180 The test file is being loaded from HTTP localhost or three thousand to. 14 00:01:01,490 --> 00:01:07,160 So because we are loading up both documents from the exact same domain, the exact same port and the 15 00:01:07,160 --> 00:01:10,550 same protocol, we are allowed to have direct access. 16 00:01:11,120 --> 00:01:14,570 If any of these three scenarios right here are these three conditions are not true. 17 00:01:14,700 --> 00:01:16,310 We don't get direct access. 18 00:01:16,850 --> 00:01:20,280 So let me show you a very quick example of how we could simulate this very easily. 19 00:01:20,780 --> 00:01:23,180 You do not have to go through what I'm about to do. 20 00:01:23,180 --> 00:01:25,250 As a matter of fact, I would recommend you not make the change. 21 00:01:25,460 --> 00:01:30,560 I'm going to change some settings on my local computer to allow me to load up that test on HTML document 22 00:01:30,740 --> 00:01:31,850 from a different domain. 23 00:01:32,390 --> 00:01:34,910 So again, you do not have to make the change I'm about to make. 24 00:01:36,080 --> 00:01:41,630 I'm going to very quickly open up my terminal, I'm going to open up my Etsy hosts file inside my code 25 00:01:41,630 --> 00:01:44,600 editor, if you're on Windows, this file does not exist. 26 00:01:44,750 --> 00:01:48,470 So if you're on Windows in particular, I would recommend just kind of hanging out for just a moment 27 00:01:48,650 --> 00:01:50,060 and taking a look at what happens. 28 00:01:50,990 --> 00:01:52,490 So inside of here, I'm going to say. 29 00:01:54,350 --> 00:02:00,650 That if I ever make a request to nothing dot localhost, I want that request to be rerouted back to 30 00:02:00,650 --> 00:02:01,550 my local computer. 31 00:02:02,030 --> 00:02:07,220 So we essentially treat localhost as like the exact same thing as nothing dot localhost. 32 00:02:07,790 --> 00:02:11,840 These two domains localhost and nothing dot localhost are essentially identical now. 33 00:02:11,870 --> 00:02:15,740 But as far as the browser is concerned, they are in fact different domains. 34 00:02:16,710 --> 00:02:17,730 I'm going to save this file. 35 00:02:21,200 --> 00:02:28,780 And then I can go over to my browser now, open up another tab, navigate to nothing dot localhost or 36 00:02:28,790 --> 00:02:33,470 three thousand, and that will still load up my application because again, nothing dot localhost is 37 00:02:33,470 --> 00:02:36,260 still routing requests back to my local machine. 38 00:02:37,300 --> 00:02:43,000 Now, I'm going to go back to my code editor and I'm going to try to load up my index, not HTML file 39 00:02:43,000 --> 00:02:48,790 still from localhost, I'm going to change the source of that iFrame to try to load up the test html 40 00:02:48,850 --> 00:02:52,270 file from this new different domain of nothing that localhost. 41 00:02:54,310 --> 00:02:56,320 So back inside my index TSX file. 42 00:02:57,600 --> 00:03:02,850 I'm going to remove that sandbox just to say, hey, not any conflict here or anything like that. 43 00:03:03,150 --> 00:03:10,950 I'll then change the source to http ohlin nothing localhost or three thousand. 44 00:03:13,690 --> 00:03:21,190 I'll save that back over, I can still load up that document, but now if I mouseover my localhost request, 45 00:03:21,190 --> 00:03:27,760 so that's for indexed HMO, I still have localhost three thousand and if I go down to test TML, I now 46 00:03:27,760 --> 00:03:29,470 have a different domain. 47 00:03:30,100 --> 00:03:37,030 So because I am loading up my test file from a different domain, communication or direct access between 48 00:03:37,030 --> 00:03:42,200 these frames is not allowed and we could very easily confirm that by going over to our console. 49 00:03:43,080 --> 00:03:48,760 I'll change my context to test HTML and then again I'll do a parent dot whatever. 50 00:03:49,420 --> 00:03:53,890 And again, I see we have blocked a frame from accessing a cross origin frame. 51 00:03:55,100 --> 00:03:56,390 OK, so that is it. 52 00:03:56,600 --> 00:04:02,990 These are the scenarios or the conditions that must be true to allow direct access between frames now 53 00:04:02,990 --> 00:04:06,680 that we understand all this, while it's kind of related back to the world of the application that we 54 00:04:06,680 --> 00:04:10,010 are trying to build and see why all this stuff is so relevant.