Well, at this point in time, I think that we really understand why it is beneficial to use an iFrame,
the last thing I want to do is kind of trace out how all these different online coding tools, such
as code pen and code sandbox, jazz fiddle and so on, are implementing this entire iFrame code execution
process thing because we might want to do something very similar inside of our application.
All right.
So quick diagram.
This is how Coachmen is executing your code inside the browser.
Let's walk through this diagram step by step.
The first thing that occurs, we have our front end app, or I should say Copan has our front end up
running inside of your browser.
So pretty much this screen right here.
Then at some point time, a user changes some code, as we saw much earlier inside the course, whenever
we make a change, the code that is sent off to the code pen API hosted at code.
And once there, they do some amount of transpiring on it.
They eventually finish the transpiring process and they send a response back to the front end application.
And we saw this entire flow right here earlier on inside the course.
Just as a quick reminder, if I open up my network inspector.
And then make a very small change, the code that I have there on the screen.
There's the request right there.
Process that is taking the code that I wrote inside that Ed, there's the code down here.
That is what is being sent off to the back API.
And eventually we get a response back that has that transpired code inside of it.
But here's the really interesting thing.
This string right here, this code is not what is actually executed inside that iFrame.
Let me show you what I mean.
Let's keep following this little diagram.
The response is sent back with that transpired code, but that transpired code is not directly used
by the front end application instead.
When we get the response back inside the front end up the iFrame is reloaded, they essentially refresh.
This iFrame down here, when they refresh the iFrame, that means that they are fetching again, an
HMO document to show inside the iFrame.
That document is fetched from a different domain, though, because the main application and the iFrame
are being loaded up from different domains.
There is no direct communication between the front end up and the iFrame, and that's what makes sure
that there's no malicious code being executed inside of your browser when you are making use of Copan.
So we refits that XML document and show it inside the iFrame and inside of that HTML document is some
code to fetch and run the JavaScript code that you had authored and got transpired during this earlier
step.
The request is made to go and fetch some JavaScript and get a response back and that is executed inside
of the iFrame.
So you can really see these all these different steps by looking at your network request log.
I'm going to go back over once again very quickly.
I'm going to clear out my network requests.
I'm going to make a very small change to this code.
And we'll take a look at what occurs, so there's the request right there to process that is doing the
transpiring.
We do get some code back immediately, but that is not necessarily the code that is actually being executed
inside the iFrame.
After we get back that response, we can see we got the indexed HTML file right there.
So this is the file that is being loaded up into the iFrame.
Inside of that e-mail file is some code that is going to make an additional request to NATO.
They're going to try to find some JavaScript file to run this.
Pendergast's file right here is what actually contains your JavaScript.
It's going to click on that.
And sure enough, you'll see unclogged, blah, blah, blah.
So this request for the JavaScript file is being made from the iFrame itself.
I've got my initiator tab being displayed right now.
You can see that the just file, the request for that is coming from the indexed e-mail file running
inside of that iframe.
That's it.
That is what Copan is doing to securely execute your code in the browser.
And once again, this is what just about all these different online coding tools do.
So Code Sandbox, just all just about any other one you can possibly imagine.
So at this point in time, maybe we should do something just like this, you know, this definitely
works and without a doubt, many different providers are doing something just about identical to this.
So clearly, this is evidence that we can use this kind of approach inside of our application.
But, well, we have one or two little special considerations inside of our app that I just want to
think about before we start to implement this flow.
So let's take a pause right here.
Come back next video and see whether or not this is really the best flow for running code inside of
our application.