1
00:00:01,200 --> 00:00:06,000
There are two ways that we can somehow get rid of these span elements that are wrapping our search term,

2
00:00:06,450 --> 00:00:11,790
the first way would be really simple and straightforward before we render out our string right here

3
00:00:11,820 --> 00:00:12,870
or the actual snippet.

4
00:00:13,140 --> 00:00:14,850
We could do a find and replace.

5
00:00:15,720 --> 00:00:20,730
We could find every instance of this ban and the closing span and replace them with an empty string.

6
00:00:21,030 --> 00:00:23,040
So essentially, just remove the span's.

7
00:00:23,910 --> 00:00:25,350
That'll be really easy to implement.

8
00:00:25,500 --> 00:00:27,480
But there is another way that we could approach this problem.

9
00:00:28,200 --> 00:00:34,230
The other way we can approach this is by taking this H.T. e-mail that has been provided to us by Wikipedia

10
00:00:34,770 --> 00:00:37,650
and rendering it out as HD mail inside of our app.

11
00:00:38,340 --> 00:00:44,810
So actually create a span element to wrap that programming and another span right here to wrap program.

12
00:00:46,590 --> 00:00:52,800
The benefit to this is that we could then apply some CSX to style search match and maybe bold this term

13
00:00:52,830 --> 00:00:55,110
or put some italics around it or something like that.

14
00:00:55,980 --> 00:01:00,510
Now, just, you know, whenever we show text with react, as we are doing right now, it is displayed

15
00:01:00,570 --> 00:01:01,890
as plain text.

16
00:01:02,400 --> 00:01:08,910
The only way to create a T-Mobile element normally with react is by writing out some J.S. X, as we

17
00:01:08,910 --> 00:01:11,310
do many times whenever we write a component.

18
00:01:12,250 --> 00:01:18,200
But in this case, we have a string that we want to turn into G.S. ex to do so, we have to use a little

19
00:01:18,200 --> 00:01:19,910
hidden feature in react.

20
00:01:21,450 --> 00:01:26,920
Now, I say that it's hidden because the REACT team very purposely kind of doesn't want you to know

21
00:01:27,130 --> 00:01:28,390
that this feature exists.

22
00:01:28,850 --> 00:01:29,980
I want to show it to you anyways.

23
00:01:30,090 --> 00:01:32,110
I'm going to tell you why it is kind of hidden.

24
00:01:33,080 --> 00:01:35,040
Going to find our rended results block.

25
00:01:36,690 --> 00:01:38,970
Then right around ResultSet snippet right here.

26
00:01:39,180 --> 00:01:40,530
I'm going to put in a span.

27
00:01:42,430 --> 00:01:49,890
Now I'm going to assign to it a prop of dangerously set inner H team out now.

28
00:01:49,990 --> 00:01:51,560
Double check your capitalization here.

29
00:01:51,620 --> 00:01:58,070
Make sure you got a capital s, a capital I and H Team L should be fully capitalized or then go into

30
00:01:58,070 --> 00:01:59,930
a passing an object to that.

31
00:02:00,660 --> 00:02:03,170
The key of this object is gonna look all that mysterious.

32
00:02:03,200 --> 00:02:08,660
We're gonna put an underscore underscore HD, HDL to make sure you have two underscores right there.

33
00:02:09,930 --> 00:02:13,480
Then we're going to assign to it result that Lippitt.

34
00:02:14,470 --> 00:02:16,780
I'm then going to remove the old result, that snippet.

35
00:02:17,730 --> 00:02:19,260
And save the file, as is.

36
00:02:20,520 --> 00:02:22,740
Let's go back over to our browser and see what happened.

37
00:02:23,650 --> 00:02:25,770
So now we don't see those Spann elements anymore.

38
00:02:26,100 --> 00:02:30,360
But if we do an inspection on that right there, we'll see that we've got a span.

39
00:02:30,530 --> 00:02:34,420
And inside of it is some spans that have been created out of the H.

40
00:02:34,460 --> 00:02:36,360
T.M. string that we had previously.

41
00:02:37,140 --> 00:02:39,360
This is now an actual aged female element.

42
00:02:40,290 --> 00:02:40,530
All right.

43
00:02:40,620 --> 00:02:41,460
So what's going on here?

44
00:02:42,820 --> 00:02:47,200
Well, first off, you'll notice that to provide this prop name, it is really long.

45
00:02:47,590 --> 00:02:50,200
It's got the word dangerously, which always seems kind of bad.

46
00:02:51,040 --> 00:02:54,010
And then over here on the right hand side for this object we are creating.

47
00:02:54,040 --> 00:02:56,230
We had to assign a very mysterious looking key.

48
00:02:56,710 --> 00:02:57,880
So what's up with this?

49
00:02:58,570 --> 00:03:03,280
Well, anytime do you take a string, which we are doing from a third party, such as the Wikipedia

50
00:03:03,310 --> 00:03:09,530
API, you could be introducing a security hole into your application, specifically a type of security

51
00:03:09,530 --> 00:03:10,890
cold called an X.

52
00:03:11,040 --> 00:03:11,370
S.

53
00:03:11,510 --> 00:03:13,180
S Attack X.

54
00:03:13,240 --> 00:03:13,480
S.

55
00:03:13,600 --> 00:03:15,200
S stands for.

56
00:03:15,250 --> 00:03:19,330
And I say kind of because it's not an exact acronym cross site scripting attack.

57
00:03:19,870 --> 00:03:25,870
That is where we accidentally pick up and render some H.T. mail from an untrusted source that can allow

58
00:03:25,870 --> 00:03:31,060
some hacker or otherwise malicious person to execute some JavaScript inside of our application.

59
00:03:31,660 --> 00:03:32,320
Is that bad?

60
00:03:32,680 --> 00:03:34,420
Oh, yeah, that is definitely bad.

61
00:03:35,020 --> 00:03:36,400
Let me show you how bad it can be.

62
00:03:38,490 --> 00:03:39,780
I can go to you are all right here.

63
00:03:40,260 --> 00:03:43,830
And on my computer only, I have started up another server.

64
00:03:44,070 --> 00:03:47,490
This is another tiny server that is going to send me a payload.

65
00:03:47,820 --> 00:03:49,950
That's going to look very similar to the Wikipedia payload.

66
00:03:49,990 --> 00:03:51,900
But it's got me slightly, slightly different.

67
00:03:52,500 --> 00:03:53,970
You do not need to change your your URL.

68
00:03:54,060 --> 00:03:58,740
I'm just doing this to demonstrate a possible attack that someone could commit against our application.

69
00:03:59,520 --> 00:04:00,390
I'm going to put in here.

70
00:04:02,920 --> 00:04:05,830
HDP, local host, three thousand and one.

71
00:04:05,860 --> 00:04:07,090
And again, don't do this.

72
00:04:07,480 --> 00:04:09,970
You don't have a server probably running on this port like I do.

73
00:04:10,640 --> 00:04:13,090
I'm going to save that and then flip back over.

74
00:04:14,110 --> 00:04:14,380
Now.

75
00:04:14,440 --> 00:04:15,760
I don't see any results right there.

76
00:04:15,850 --> 00:04:16,600
That's totally fine.

77
00:04:16,780 --> 00:04:24,340
But you'll see that if I just change that search term to t the letter T, I've said it everything else.

78
00:04:24,340 --> 00:04:25,660
The letter T is very special.

79
00:04:26,970 --> 00:04:31,470
We see something kind of funny start to appear, so says, hahaha, I control this app now.

80
00:04:31,920 --> 00:04:33,030
So what just happened?

81
00:04:33,690 --> 00:04:35,400
Well, I changed the URL right here.

82
00:04:35,460 --> 00:04:36,810
That's the only change I made.

83
00:04:37,760 --> 00:04:42,380
So now when I make my request to get a list of all these search results, I'm making a request to my

84
00:04:42,380 --> 00:04:49,250
server, which is running some somewhat malicious code that's going to send back a fake set of articles

85
00:04:49,250 --> 00:04:55,730
or a fake set of search results embedded in there is a malicious HGL There's some H.T. mail that has

86
00:04:55,730 --> 00:04:57,770
some embedded JavaScript code.

87
00:04:58,260 --> 00:05:03,380
And whenever that JavaScript code runs, well, he replaces the entire react app with what you see right

88
00:05:03,380 --> 00:05:03,710
here.

89
00:05:04,640 --> 00:05:08,690
Now, maybe this doesn't look so bad if someone can kind of destroy our application.

90
00:05:08,930 --> 00:05:15,080
But what this really represents is that some untrusted party, some bad person would run some JavaScript

91
00:05:15,080 --> 00:05:16,460
code inside of your app.

92
00:05:16,790 --> 00:05:18,230
That is always really bad.

93
00:05:18,560 --> 00:05:23,330
It means that that person could somehow take over someone else's account when they're using your application.

94
00:05:24,020 --> 00:05:24,470
Definitely.

95
00:05:24,470 --> 00:05:27,260
Cross site scripting is something that we always want to be wary of.

96
00:05:27,740 --> 00:05:32,780
And we really open ourselves up to it as soon as we use dangerously set in our age team.

97
00:05:33,200 --> 00:05:35,120
That's why that is now a problem.

98
00:05:37,650 --> 00:05:42,490
The only time that we make use of dangerously set in our H.T. mail, we have to be really, really confident

99
00:05:42,520 --> 00:05:46,360
that the person who is providing this HD email is someone that we really trust.

100
00:05:46,910 --> 00:05:47,860
And so it kind of comes up to you.

101
00:05:47,890 --> 00:05:49,180
Do you trust Wikipedia?

102
00:05:49,270 --> 00:05:51,610
Do you trust them to send you some safe HD mail?

103
00:05:52,030 --> 00:05:52,930
Well, I don't know.

104
00:05:53,080 --> 00:05:53,680
I might not.

105
00:05:54,040 --> 00:05:57,040
Because when you think about it, Wikipedia can be edited by anyone.

106
00:05:57,370 --> 00:06:02,830
So potentially they could inject some kind of nasty content and who knows, maybe that nasty content

107
00:06:02,830 --> 00:06:04,870
could somehow make it into your application.

108
00:06:05,350 --> 00:06:06,280
That's kind of unlikely.

109
00:06:06,310 --> 00:06:09,670
But I just want to throw the risk out there and let you know that it exists.

110
00:06:10,640 --> 00:06:15,620
Voting time that you make use of dangerously set enraged e-mail to take a string and rendered as H.T.

111
00:06:15,620 --> 00:06:21,890
mail, you are opening yourself up for risk unless you are 100 percent confident that the person who

112
00:06:21,890 --> 00:06:25,700
is sending you that each [REMOVED] is someone who can be trusted, such as yourself.

113
00:06:27,070 --> 00:06:27,310
All right.

114
00:06:27,430 --> 00:06:29,350
So now we've seen that they'll exploit in action.

115
00:06:29,710 --> 00:06:31,330
I'm going to change my Eurail back.

116
00:06:32,690 --> 00:06:34,160
And I've got the same thing I had before.

117
00:06:34,800 --> 00:06:39,710
So I'm going to continue using dangerously set in our H.T. e-mail here, because in this case, this

118
00:06:39,770 --> 00:06:42,890
little toy application, really not a lot of risk.

119
00:06:42,950 --> 00:06:43,280
Right.

120
00:06:43,520 --> 00:06:44,660
Who's going to do anything bad here?

121
00:06:44,720 --> 00:06:47,420
There's no account system inside of our application right now.

122
00:06:47,660 --> 00:06:49,490
Nothing bad is gonna happen again.

123
00:06:49,490 --> 00:06:52,610
I just want you to know that this is a feature that exists inside of react.

124
00:06:52,880 --> 00:06:55,190
And there are some security concerns around it.

125
00:06:56,230 --> 00:06:58,630
All right, so let's take a pause here and to you in the next video.

126
00:06:58,820 --> 00:07:03,070
And I think there's one or two more things we should accomplish on this little widget, and then we

127
00:07:03,070 --> 00:07:04,030
will be all set.