1 00:00:00,760 --> 00:00:05,110 In this video, in the next couple, we're going to get a quick refresher on EPHRAM'S and how they work. 2 00:00:05,400 --> 00:00:08,350 We're going to take a look at a lot of different settings around them and really understand some of 3 00:00:08,350 --> 00:00:10,540 the different security aspects of them as well. 4 00:00:10,980 --> 00:00:13,390 So to get started, I can go back over to my code editor. 5 00:00:14,290 --> 00:00:20,520 I'm going to find my public directory, and inside there I can create a new file called test dot HTML. 6 00:00:21,190 --> 00:00:26,500 Then inside there I'm going to put down just the absolute basics to show some stuff inside the browser. 7 00:00:27,250 --> 00:00:28,870 I'll put in an HTML element. 8 00:00:30,350 --> 00:00:31,430 I'll put in a head. 9 00:00:33,000 --> 00:00:33,750 A body. 10 00:00:37,140 --> 00:00:40,830 And an H1 element that just says hi there. 11 00:00:41,960 --> 00:00:47,300 OK, I'm going to save this file then as a very quick reminder, remember inside of a ReachOut project, 12 00:00:47,540 --> 00:00:51,700 any file that we have inside of our public directory, we can very easily access inside the browser. 13 00:00:52,100 --> 00:00:58,250 So if I wanted to load up Testori HTML, I could open up a new browser tab and navigate to localhost 14 00:00:58,820 --> 00:01:01,880 three thousand test HTML. 15 00:01:02,830 --> 00:01:07,960 And then I'll see the content of that document up here on the screen, so our react up is now serving 16 00:01:07,960 --> 00:01:09,540 up two different HTML files. 17 00:01:09,550 --> 00:01:13,510 We've got the test HTML file and our indexed HTML file. 18 00:01:13,810 --> 00:01:17,440 Right now we are loading up indexed HTML to just generally show our app. 19 00:01:18,350 --> 00:01:21,860 Now we're going to create an iFrame element inside of our app component. 20 00:01:22,340 --> 00:01:27,320 We're going to use this iFrame element to embed one HTML document into another. 21 00:01:27,650 --> 00:01:29,540 That's what we usually use Ephram's for. 22 00:01:29,540 --> 00:01:32,000 We are embedding one document into another. 23 00:01:33,010 --> 00:01:37,780 So back inside my code editor, I'm going to find my index file. 24 00:01:39,040 --> 00:01:40,240 I'll go down to the very bottom. 25 00:01:41,470 --> 00:01:47,650 And right after that element, I'm going to add in an iFrame with an S R c property and I'll set it 26 00:01:47,650 --> 00:01:50,470 to slash test HTML. 27 00:01:52,220 --> 00:01:54,530 Well, then save this flip back over. 28 00:01:56,120 --> 00:02:00,080 Refresh and there is the content of our test on file. 29 00:02:01,060 --> 00:02:04,870 And they're going to do my element, inspector, right here and inspect that element. 30 00:02:05,620 --> 00:02:07,990 So here's the iFrame inside the iFrame. 31 00:02:07,990 --> 00:02:13,730 We have clearly loaded up the entire contents of the test file and we are showing all the HTML for it 32 00:02:13,750 --> 00:02:14,710 inside the iFrame. 33 00:02:15,620 --> 00:02:22,040 So that is the absolute basics of Ephram's, we show it or we use them to show one document inside of 34 00:02:22,040 --> 00:02:22,430 another. 35 00:02:23,380 --> 00:02:27,760 Well, at this point, you might be kind of curious, how does this solve any problems around code execution? 36 00:02:27,940 --> 00:02:32,680 Again, it really comes down to understanding some different settings that we can apply to this iFrame 37 00:02:32,920 --> 00:02:37,510 and how we can kind of isolate what is going on inside the iFrame from the outside world. 38 00:02:38,260 --> 00:02:39,490 So we're going to take a pause right here. 39 00:02:39,650 --> 00:02:43,690 As I mentioned in the next couple of videos, we're going to play around with this iframe a little bit 40 00:02:43,690 --> 00:02:48,640 and understand some of the different settings we can change on it to affect the security between the 41 00:02:48,640 --> 00:02:52,330 iFrame and the HTML document that is hosting the iFrame.