There are two ways that we can somehow get rid of these span elements that are wrapping our search term,
the first way would be really simple and straightforward before we render out our string right here
or the actual snippet.
We could do a find and replace.
We could find every instance of this ban and the closing span and replace them with an empty string.
So essentially, just remove the span's.
That'll be really easy to implement.
But there is another way that we could approach this problem.
The other way we can approach this is by taking this H.T. e-mail that has been provided to us by Wikipedia
and rendering it out as HD mail inside of our app.
So actually create a span element to wrap that programming and another span right here to wrap program.
The benefit to this is that we could then apply some CSX to style search match and maybe bold this term
or put some italics around it or something like that.
Now, just, you know, whenever we show text with react, as we are doing right now, it is displayed
as plain text.
The only way to create a T-Mobile element normally with react is by writing out some J.S. X, as we
do many times whenever we write a component.
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
hidden feature in react.
Now, I say that it's hidden because the REACT team very purposely kind of doesn't want you to know
that this feature exists.
I want to show it to you anyways.
I'm going to tell you why it is kind of hidden.
Going to find our rended results block.
Then right around ResultSet snippet right here.
I'm going to put in a span.
Now I'm going to assign to it a prop of dangerously set inner H team out now.
Double check your capitalization here.
Make sure you got a capital s, a capital I and H Team L should be fully capitalized or then go into
a passing an object to that.
The key of this object is gonna look all that mysterious.
We're gonna put an underscore underscore HD, HDL to make sure you have two underscores right there.
Then we're going to assign to it result that Lippitt.
I'm then going to remove the old result, that snippet.
And save the file, as is.
Let's go back over to our browser and see what happened.
So now we don't see those Spann elements anymore.
But if we do an inspection on that right there, we'll see that we've got a span.
And inside of it is some spans that have been created out of the H.
T.M. string that we had previously.
This is now an actual aged female element.
All right.
So what's going on here?
Well, first off, you'll notice that to provide this prop name, it is really long.
It's got the word dangerously, which always seems kind of bad.
And then over here on the right hand side for this object we are creating.
We had to assign a very mysterious looking key.
So what's up with this?
Well, anytime do you take a string, which we are doing from a third party, such as the Wikipedia
API, you could be introducing a security hole into your application, specifically a type of security
cold called an X.
S.
S Attack X.
S.
S stands for.
And I say kind of because it's not an exact acronym cross site scripting attack.
That is where we accidentally pick up and render some H.T. mail from an untrusted source that can allow
some hacker or otherwise malicious person to execute some JavaScript inside of our application.
Is that bad?
Oh, yeah, that is definitely bad.
Let me show you how bad it can be.
I can go to you are all right here.
And on my computer only, I have started up another server.
This is another tiny server that is going to send me a payload.
That's going to look very similar to the Wikipedia payload.
But it's got me slightly, slightly different.
You do not need to change your your URL.
I'm just doing this to demonstrate a possible attack that someone could commit against our application.
I'm going to put in here.
HDP, local host, three thousand and one.
And again, don't do this.
You don't have a server probably running on this port like I do.
I'm going to save that and then flip back over.
Now.
I don't see any results right there.
That's totally fine.
But you'll see that if I just change that search term to t the letter T, I've said it everything else.
The letter T is very special.
We see something kind of funny start to appear, so says, hahaha, I control this app now.
So what just happened?
Well, I changed the URL right here.
That's the only change I made.
So now when I make my request to get a list of all these search results, I'm making a request to my
server, which is running some somewhat malicious code that's going to send back a fake set of articles
or a fake set of search results embedded in there is a malicious HGL There's some H.T. mail that has
some embedded JavaScript code.
And whenever that JavaScript code runs, well, he replaces the entire react app with what you see right
here.
Now, maybe this doesn't look so bad if someone can kind of destroy our application.
But what this really represents is that some untrusted party, some bad person would run some JavaScript
code inside of your app.
That is always really bad.
It means that that person could somehow take over someone else's account when they're using your application.
Definitely.
Cross site scripting is something that we always want to be wary of.
And we really open ourselves up to it as soon as we use dangerously set in our age team.
That's why that is now a problem.
The only time that we make use of dangerously set in our H.T. mail, we have to be really, really confident
that the person who is providing this HD email is someone that we really trust.
And so it kind of comes up to you.
Do you trust Wikipedia?
Do you trust them to send you some safe HD mail?
Well, I don't know.
I might not.
Because when you think about it, Wikipedia can be edited by anyone.
So potentially they could inject some kind of nasty content and who knows, maybe that nasty content
could somehow make it into your application.
That's kind of unlikely.
But I just want to throw the risk out there and let you know that it exists.
Voting time that you make use of dangerously set enraged e-mail to take a string and rendered as H.T.
mail, you are opening yourself up for risk unless you are 100 percent confident that the person who
is sending you that each [REMOVED] is someone who can be trusted, such as yourself.
All right.
So now we've seen that they'll exploit in action.
I'm going to change my Eurail back.
And I've got the same thing I had before.
So I'm going to continue using dangerously set in our H.T. e-mail here, because in this case, this
little toy application, really not a lot of risk.
Right.
Who's going to do anything bad here?
There's no account system inside of our application right now.
Nothing bad is gonna happen again.
I just want you to know that this is a feature that exists inside of react.
And there are some security concerns around it.
All right, so let's take a pause here and to you in the next video.
And I think there's one or two more things we should accomplish on this little widget, and then we
will be all set.