1
00:00:01,470 --> 00:00:05,280
All right, and the last video I know, I repeated myself several times, I apologize for that.

2
00:00:05,490 --> 00:00:09,690
We eventually came to the conclusion that we don't really need a lot of this security stuff when running

3
00:00:09,690 --> 00:00:10,140
locally.

4
00:00:10,260 --> 00:00:13,680
But we decided, you know what, we're going to include it anyways because we might eventually expand

5
00:00:13,680 --> 00:00:14,400
this application.

6
00:00:14,980 --> 00:00:20,550
So one way that we can implement our app and still have this kind of security separation where content

7
00:00:20,550 --> 00:00:25,410
is being served from different domains or in our case, different ports would be to do something like

8
00:00:25,410 --> 00:00:25,730
this.

9
00:00:26,310 --> 00:00:31,330
So we might have eventually our REACT application hosted at localhost four thousand five.

10
00:00:32,070 --> 00:00:36,780
So whenever a user runs that command of JDBC serve or whatever else, they would open up their browser,

11
00:00:36,780 --> 00:00:40,620
navigate to localist four thousand five and get our main react application.

12
00:00:40,890 --> 00:00:46,620
That would be the main index, not HTML, along with the main JavaScript files to run the react up that

13
00:00:46,620 --> 00:00:47,700
would load up the react up.

14
00:00:47,700 --> 00:00:49,170
The user would see the notebook on the screen.

15
00:00:49,380 --> 00:00:51,150
They would then start to change some code.

16
00:00:51,570 --> 00:00:56,010
You and I would then bundle all the user's code inside the browser or something like that would then

17
00:00:56,010 --> 00:01:01,050
reload the iFrame and when we reload the iFrame that is going to eventually display the user's code

18
00:01:01,050 --> 00:01:03,630
or show the result of it actually execute the code.

19
00:01:04,140 --> 00:01:09,330
We might decide to get the contents for the iFrame or something like from something like localhost four

20
00:01:09,330 --> 00:01:10,090
thousand six.

21
00:01:10,410 --> 00:01:14,970
And again, the entire point of having these different ports here is to make sure that the content inside

22
00:01:14,970 --> 00:01:19,950
the iFrame cannot directly access the content inside of the parent frame or the parent document.

23
00:01:21,150 --> 00:01:24,870
So this is something we could definitely implement, but just one thing I want to remind you about,

24
00:01:25,240 --> 00:01:31,740
remember, we are bundling all of our users code inside the browser, so the browser itself is producing

25
00:01:31,740 --> 00:01:33,120
the code that we are trying to execute.

26
00:01:33,780 --> 00:01:37,920
So this diagram right here is not entirely accurate because there's not really going to be any step

27
00:01:38,130 --> 00:01:43,620
where we somehow match our code from localhost four thousand six if we did eventually create a server

28
00:01:43,770 --> 00:01:44,580
at that ports.

29
00:01:45,180 --> 00:01:48,090
So you and I don't really have that step right there per say.

30
00:01:49,060 --> 00:01:53,890
And that kind of just leaves us with creating this localhost four thousand six server just to serve

31
00:01:53,890 --> 00:01:58,720
up this one single HTML document every single time that user makes a change to code.

32
00:01:59,700 --> 00:02:05,070
So this is kind of a little bit of extra infrastructure that we are putting together just to satisfy

33
00:02:05,070 --> 00:02:10,830
this one security requirement, just to say, hey, Browsr, look, we're getting an HTML document from

34
00:02:10,830 --> 00:02:12,410
localhost four thousand six.

35
00:02:12,420 --> 00:02:13,380
It is a different part.

36
00:02:13,590 --> 00:02:16,220
Therefore, don't allow access to the parent document.

37
00:02:16,800 --> 00:02:23,190
All I mean to say is this is going to be a lot of extra work just to satisfy this one security requirement.

38
00:02:24,100 --> 00:02:29,230
Now, if we have to do extra work to satisfy security problems, well, that's OK, but I'm just kind

39
00:02:29,230 --> 00:02:29,770
of curious.

40
00:02:30,220 --> 00:02:33,300
Maybe there might be some other way that we could address this problem.

41
00:02:33,820 --> 00:02:38,320
Maybe there is some other way that we can still have separation between the content inside of our iFrame

42
00:02:38,770 --> 00:02:43,030
and the parent document without having to create this extra server.

43
00:02:43,520 --> 00:02:46,840
That's what I'm kind of curious about, and that's what I kind of want to investigate just a little

44
00:02:46,840 --> 00:02:47,170
bit.

45
00:02:47,710 --> 00:02:53,560
If we could somehow remove that extra server, not only is that one less piece of infrastructure that

46
00:02:53,560 --> 00:02:58,600
we have to put together inside of our project, but also potentially means that whenever a user changes

47
00:02:58,600 --> 00:03:04,780
some code and we need to execute it, we might not need to make an extra request just to fetch in a

48
00:03:04,790 --> 00:03:07,360
HTML document that is largely always going to be the same.

49
00:03:07,900 --> 00:03:12,760
So removing that extra request and removing this extra piece of infrastructure, may that be pretty

50
00:03:12,760 --> 00:03:13,180
nice.

51
00:03:15,380 --> 00:03:21,020
So I'm kind of curious, is there any way that we can still have this separation between documents and

52
00:03:21,020 --> 00:03:22,860
not have to create that extra server?

53
00:03:22,880 --> 00:03:25,320
The answer is technically yes.

54
00:03:25,910 --> 00:03:27,680
Remember this document or this diagram?

55
00:03:27,990 --> 00:03:33,920
Remember, we had said that you only get direct access between frames when and this is what we have

56
00:03:33,920 --> 00:03:36,080
really been focusing on in the last couple of videos.

57
00:03:36,350 --> 00:03:42,190
We only get direct access between these things when an iFrame is loading up content from the same domain

58
00:03:42,200 --> 00:03:44,240
port and protocol as the parent.

59
00:03:44,720 --> 00:03:51,080
You and I have been obsessing over this case where we are loading up content from different ports so

60
00:03:51,080 --> 00:03:53,120
that we do not get any direct access.

61
00:03:53,580 --> 00:03:56,300
But remember, there was another entire condition on here.

62
00:03:56,870 --> 00:04:03,230
If we have an iFrame element that does not have a sandbox property, whereas a sandbox of allow same

63
00:04:03,410 --> 00:04:06,230
origin, then direct access is allowed.

64
00:04:06,870 --> 00:04:10,670
That means that if we do not have that allows same origin property.

65
00:04:10,670 --> 00:04:16,399
If we just put in sandbox equals empty string, there will be no direct access.

66
00:04:17,339 --> 00:04:18,149
So in other words.

67
00:04:19,720 --> 00:04:25,150
To allow some separation between the code that we are going to execute and the parent document, we

68
00:04:25,150 --> 00:04:31,360
can either do this right here, we can create all that extra infrastructure or another way we could

69
00:04:31,360 --> 00:04:36,130
address this without having to go through all this extra stuff is to just make a very small change.

70
00:04:36,130 --> 00:04:42,880
This iFrame on the iFrame, we can add on a sandbox property of pretty much empty string and that is

71
00:04:42,880 --> 00:04:45,660
going to isolate the contents of the iFrame.

72
00:04:45,970 --> 00:04:51,700
We're going to get all the same kind of level of security without having to create all that extra infrastructure.

73
00:04:52,120 --> 00:04:53,900
So kind of a happy middle ground.

74
00:04:54,490 --> 00:04:56,080
So this is what we're going to try to do.

75
00:04:56,110 --> 00:04:57,970
This is going to be our solution.

76
00:04:58,480 --> 00:05:01,360
We're going to have localist four thousand five eventually.

77
00:05:01,360 --> 00:05:05,980
Remember, right now, everything is technically running on localist 4000 or localhost 3000.

78
00:05:06,850 --> 00:05:08,040
We're going to load everything up.

79
00:05:08,050 --> 00:05:10,000
We're going to allow a user to change some code.

80
00:05:10,000 --> 00:05:12,400
We're going to do all that bundling directly inside the browser.

81
00:05:12,730 --> 00:05:18,940
We're then going to reload the iFrame and the iFrame is going to have that sandbox empty string attribute

82
00:05:18,940 --> 00:05:19,590
assigned to it.

83
00:05:19,600 --> 00:05:23,020
We're going to eventually put some value inside there, but right now it'll just be empty string.

84
00:05:24,550 --> 00:05:29,080
We're then going to reload the iFrame, we're going to fetch some HTML document, load that up inside

85
00:05:29,080 --> 00:05:32,560
the iFrame, we're going to somehow get our bundled JavaScript code inside there.

86
00:05:32,980 --> 00:05:37,930
And because of our settings that we've applied to that iframe, the code that we are executing inside

87
00:05:37,930 --> 00:05:43,480
there will not have access to the external document or that parent document, which is what we have

88
00:05:43,480 --> 00:05:46,090
wanted all along to get that level of security.

89
00:05:47,370 --> 00:05:48,430
So that's what we're going to do.

90
00:05:49,050 --> 00:05:54,270
Now, having said that, I do want to say just throw one very quick note in here with a solution we

91
00:05:54,270 --> 00:06:00,030
are putting in, there is going to be one or two little restrictions to the kind of code that users

92
00:06:00,030 --> 00:06:01,980
are going to be able to write inside of our app.

93
00:06:02,460 --> 00:06:05,160
This is an unfortunate downside to this approach.

94
00:06:05,430 --> 00:06:06,300
There is a downside.

95
00:06:06,580 --> 00:06:12,060
The downside is that the users who are using their application, they are not going to be able to use

96
00:06:12,060 --> 00:06:13,220
local storage.

97
00:06:13,260 --> 00:06:18,450
They're not going to be able to access cookies in a couple of other things in the code that they write.

98
00:06:19,200 --> 00:06:24,540
So in other words, if we eventually implement all this stuff and a user puts in something inside,

99
00:06:24,540 --> 00:06:31,170
if you of like local storage, not yet item of whatever, this code is unfortunately not going to work

100
00:06:31,170 --> 00:06:34,050
as expected with a solution that we are coming up with here.

101
00:06:34,260 --> 00:06:35,300
So it's kind of a tradeoff.

102
00:06:35,730 --> 00:06:37,730
Our solution is can have way less infrastructure.

103
00:06:37,740 --> 00:06:39,750
It's going to run extremely quickly.

104
00:06:39,900 --> 00:06:44,430
It's going be very fast run users code because we don't have to match any extra HTML documents or anything

105
00:06:44,430 --> 00:06:44,800
like that.

106
00:06:45,090 --> 00:06:51,930
The one downside is we lose the ability to access some in browser features like local storage and one

107
00:06:51,930 --> 00:06:53,340
or two or three other things.

108
00:06:54,000 --> 00:06:55,500
So again, it is a tradeoff.

109
00:06:56,370 --> 00:07:01,560
But at the end, the day I decided that this was kind of the most interesting solution, it really forces

110
00:07:01,560 --> 00:07:03,510
us to understand more about Ephram's.

111
00:07:03,780 --> 00:07:07,450
It limits the amount of infrastructure we are creating, which is always good.

112
00:07:07,740 --> 00:07:13,720
So in my opinion, or this app, for the purposes of this course, decent, happy, medium, middle

113
00:07:13,770 --> 00:07:14,160
ground.

114
00:07:15,050 --> 00:07:19,300
All right, so enough discussion, let's start to do some implementation in the next video.