1
00:00:00,000 --> 00:00:03,380
I show a search query on my page.

2
00:00:03,380 --> 00:00:06,880
How can a string make the browser run code?

3
00:00:07,060 --> 00:00:10,765
HTML means HyperText Markup Language.

4
00:00:10,765 --> 00:00:15,720
InnerHTML tells the browser to read the string as HTML.

5
00:00:15,720 --> 00:00:18,250
If someone controls that string, they can

6
00:00:18,250 --> 00:00:20,700
include an element with an event handler.

7
00:00:20,880 --> 00:00:24,320
In this local test, the image fails to load.

8
00:00:24,320 --> 00:00:26,520
Its error handler runs and sets

9
00:00:26,520 --> 00:00:28,500
our demo number to one.

10
00:00:28,500 --> 00:00:32,500
Cross-site scripting, or XSS, is when

11
00:00:32,500 --> 00:00:35,960
untrusted input becomes code in your page.

12
00:00:36,140 --> 00:00:37,680
But I only wanted to show

13
00:00:37,680 --> 00:00:39,800
what the person searched for.

14
00:00:39,800 --> 00:00:42,700
I do not need any HTML.

15
00:00:42,880 --> 00:00:44,940
Use textContent.

16
00:00:44,940 --> 00:00:47,260
With the same input, the browser shows

17
00:00:47,260 --> 00:00:49,800
the characters instead of creating an image.

18
00:00:49,800 --> 00:00:53,720
No image is created, so its error handler cannot run.

19
00:00:53,900 --> 00:00:56,840
In React, put the string inside

20
00:00:56,840 --> 00:00:59,160
braces as a text child.

21
00:00:59,160 --> 00:01:01,380
Raw HTML is different.

22
00:01:01,380 --> 00:01:04,100
If you really need rich text, use a

23
00:01:04,100 --> 00:01:08,380
maintained HTML sanitizer with rules for what you allow.

24
00:01:08,560 --> 00:01:11,780
I asked the user for a search term.

25
00:01:11,780 --> 00:01:15,400
Apparently, I also hired them to write our JavaScript.