In this video, in the next couple, we're going to get a quick refresher on EPHRAM'S and how they work.
We're going to take a look at a lot of different settings around them and really understand some of
the different security aspects of them as well.
So to get started, I can go back over to my code editor.
I'm going to find my public directory, and inside there I can create a new file called test dot HTML.
Then inside there I'm going to put down just the absolute basics to show some stuff inside the browser.
I'll put in an HTML element.
I'll put in a head.
A body.
And an H1 element that just says hi there.
OK, I'm going to save this file then as a very quick reminder, remember inside of a ReachOut project,
any file that we have inside of our public directory, we can very easily access inside the browser.
So if I wanted to load up Testori HTML, I could open up a new browser tab and navigate to localhost
three thousand test HTML.
And then I'll see the content of that document up here on the screen, so our react up is now serving
up two different HTML files.
We've got the test HTML file and our indexed HTML file.
Right now we are loading up indexed HTML to just generally show our app.
Now we're going to create an iFrame element inside of our app component.
We're going to use this iFrame element to embed one HTML document into another.
That's what we usually use Ephram's for.
We are embedding one document into another.
So back inside my code editor, I'm going to find my index file.
I'll go down to the very bottom.
And right after that element, I'm going to add in an iFrame with an S R c property and I'll set it
to slash test HTML.
Well, then save this flip back over.
Refresh and there is the content of our test on file.
And they're going to do my element, inspector, right here and inspect that element.
So here's the iFrame inside the iFrame.
We have clearly loaded up the entire contents of the test file and we are showing all the HTML for it
inside the iFrame.
So that is the absolute basics of Ephram's, we show it or we use them to show one document inside of
another.
Well, at this point, you might be kind of curious, how does this solve any problems around code execution?
Again, it really comes down to understanding some different settings that we can apply to this iFrame
and how we can kind of isolate what is going on inside the iFrame from the outside world.
So we're going to take a pause right here.
As I mentioned in the next couple of videos, we're going to play around with this iframe a little bit
and understand some of the different settings we can change on it to affect the security between the
iFrame and the HTML document that is hosting the iFrame.