1
00:00:01,140 --> 00:00:05,250
Well, at this point in time, I think that we really understand why it is beneficial to use an iFrame,

2
00:00:05,580 --> 00:00:10,350
the last thing I want to do is kind of trace out how all these different online coding tools, such

3
00:00:10,350 --> 00:00:16,680
as code pen and code sandbox, jazz fiddle and so on, are implementing this entire iFrame code execution

4
00:00:16,680 --> 00:00:20,850
process thing because we might want to do something very similar inside of our application.

5
00:00:21,570 --> 00:00:22,020
All right.

6
00:00:22,380 --> 00:00:23,280
So quick diagram.

7
00:00:23,310 --> 00:00:27,150
This is how Coachmen is executing your code inside the browser.

8
00:00:27,620 --> 00:00:29,230
Let's walk through this diagram step by step.

9
00:00:29,970 --> 00:00:34,920
The first thing that occurs, we have our front end app, or I should say Copan has our front end up

10
00:00:34,920 --> 00:00:36,240
running inside of your browser.

11
00:00:36,510 --> 00:00:38,370
So pretty much this screen right here.

12
00:00:39,240 --> 00:00:44,490
Then at some point time, a user changes some code, as we saw much earlier inside the course, whenever

13
00:00:44,490 --> 00:00:49,490
we make a change, the code that is sent off to the code pen API hosted at code.

14
00:00:49,530 --> 00:00:53,360
And once there, they do some amount of transpiring on it.

15
00:00:53,400 --> 00:00:57,900
They eventually finish the transpiring process and they send a response back to the front end application.

16
00:00:58,440 --> 00:01:01,620
And we saw this entire flow right here earlier on inside the course.

17
00:01:02,160 --> 00:01:05,010
Just as a quick reminder, if I open up my network inspector.

18
00:01:06,580 --> 00:01:09,490
And then make a very small change, the code that I have there on the screen.

19
00:01:10,460 --> 00:01:11,650
There's the request right there.

20
00:01:11,970 --> 00:01:18,440
Process that is taking the code that I wrote inside that Ed, there's the code down here.

21
00:01:18,440 --> 00:01:20,660
That is what is being sent off to the back API.

22
00:01:20,990 --> 00:01:24,490
And eventually we get a response back that has that transpired code inside of it.

23
00:01:24,890 --> 00:01:26,410
But here's the really interesting thing.

24
00:01:26,660 --> 00:01:31,950
This string right here, this code is not what is actually executed inside that iFrame.

25
00:01:32,630 --> 00:01:33,410
Let me show you what I mean.

26
00:01:33,410 --> 00:01:34,880
Let's keep following this little diagram.

27
00:01:35,540 --> 00:01:41,330
The response is sent back with that transpired code, but that transpired code is not directly used

28
00:01:41,330 --> 00:01:44,000
by the front end application instead.

29
00:01:45,660 --> 00:01:51,930
When we get the response back inside the front end up the iFrame is reloaded, they essentially refresh.

30
00:01:52,930 --> 00:01:58,240
This iFrame down here, when they refresh the iFrame, that means that they are fetching again, an

31
00:01:58,270 --> 00:02:00,580
HMO document to show inside the iFrame.

32
00:02:01,520 --> 00:02:09,470
That document is fetched from a different domain, though, because the main application and the iFrame

33
00:02:09,470 --> 00:02:11,300
are being loaded up from different domains.

34
00:02:11,540 --> 00:02:18,230
There is no direct communication between the front end up and the iFrame, and that's what makes sure

35
00:02:18,230 --> 00:02:23,180
that there's no malicious code being executed inside of your browser when you are making use of Copan.

36
00:02:24,990 --> 00:02:30,240
So we refits that XML document and show it inside the iFrame and inside of that HTML document is some

37
00:02:30,240 --> 00:02:36,330
code to fetch and run the JavaScript code that you had authored and got transpired during this earlier

38
00:02:36,330 --> 00:02:36,670
step.

39
00:02:37,350 --> 00:02:42,450
The request is made to go and fetch some JavaScript and get a response back and that is executed inside

40
00:02:42,450 --> 00:02:43,140
of the iFrame.

41
00:02:43,860 --> 00:02:47,970
So you can really see these all these different steps by looking at your network request log.

42
00:02:48,530 --> 00:02:50,340
I'm going to go back over once again very quickly.

43
00:02:50,610 --> 00:02:52,320
I'm going to clear out my network requests.

44
00:02:52,480 --> 00:02:54,270
I'm going to make a very small change to this code.

45
00:02:55,590 --> 00:03:00,330
And we'll take a look at what occurs, so there's the request right there to process that is doing the

46
00:03:00,330 --> 00:03:00,980
transpiring.

47
00:03:01,350 --> 00:03:06,030
We do get some code back immediately, but that is not necessarily the code that is actually being executed

48
00:03:06,030 --> 00:03:06,810
inside the iFrame.

49
00:03:07,500 --> 00:03:12,720
After we get back that response, we can see we got the indexed HTML file right there.

50
00:03:13,110 --> 00:03:16,590
So this is the file that is being loaded up into the iFrame.

51
00:03:17,190 --> 00:03:22,730
Inside of that e-mail file is some code that is going to make an additional request to NATO.

52
00:03:23,430 --> 00:03:26,700
They're going to try to find some JavaScript file to run this.

53
00:03:26,700 --> 00:03:30,360
Pendergast's file right here is what actually contains your JavaScript.

54
00:03:30,750 --> 00:03:31,560
It's going to click on that.

55
00:03:31,560 --> 00:03:34,080
And sure enough, you'll see unclogged, blah, blah, blah.

56
00:03:35,350 --> 00:03:39,820
So this request for the JavaScript file is being made from the iFrame itself.

57
00:03:40,150 --> 00:03:42,820
I've got my initiator tab being displayed right now.

58
00:03:43,120 --> 00:03:48,610
You can see that the just file, the request for that is coming from the indexed e-mail file running

59
00:03:48,610 --> 00:03:50,050
inside of that iframe.

60
00:03:51,050 --> 00:03:51,600
That's it.

61
00:03:51,770 --> 00:03:55,990
That is what Copan is doing to securely execute your code in the browser.

62
00:03:56,450 --> 00:04:00,080
And once again, this is what just about all these different online coding tools do.

63
00:04:00,380 --> 00:04:04,840
So Code Sandbox, just all just about any other one you can possibly imagine.

64
00:04:05,950 --> 00:04:11,380
So at this point in time, maybe we should do something just like this, you know, this definitely

65
00:04:11,380 --> 00:04:15,550
works and without a doubt, many different providers are doing something just about identical to this.

66
00:04:15,870 --> 00:04:19,870
So clearly, this is evidence that we can use this kind of approach inside of our application.

67
00:04:20,620 --> 00:04:25,750
But, well, we have one or two little special considerations inside of our app that I just want to

68
00:04:25,750 --> 00:04:28,120
think about before we start to implement this flow.

69
00:04:28,740 --> 00:04:29,820
So let's take a pause right here.

70
00:04:29,950 --> 00:04:34,840
Come back next video and see whether or not this is really the best flow for running code inside of

71
00:04:34,840 --> 00:04:35,890
our application.