• untrusted strings
• image tag
• user input
• ampersand lt
• alert box
• attributes
• html element
• custom elements
• block elements
• web components
• chrome origin
• catastrophic error

Since you hung around.

But those dreams everything and they turned around each other.

Welcome back.

Welcome back.

We always could spot rare.

Welcome back and a smile way, I think and I know you went to see you again.

Learn to me was this song in it?

Favorite come back and Bloodgood ever lead you.

All right, so we are back.

This is the second cipher second.

We're break session of the second cipher.

All right, so, all right, so we didn't have any show-and-tell stuff.

So I am just going to go ahead and talk about something that I thought was pretty cool.

And from what I understand of it.

I am going to just talk about it.

So if anyone is familiar with it, then please let me know more about it, but we're going to talk about Santa's.

Sanitizing sanitization.

Yes.

Yay.

All right, cool.

So, let me share my screen here.

So now as a developer to things that I have learned as my time as a developer is never pushed to production on a Friday and also never let your users just put whatever they want like in your website like in different like elements or what have you and so because like the worst thing, I think you can do and you just ask for your site to be hacked is to put Like any element dot like inner, dot HTML, whatever a user wants to put in there.

So your cuz you're just opening yourself up for all sorts of cross, scripting errors and things.

So because if you do that, then people be able to run all sorts of like programs and JavaScript on your website.

So, if you do anything, you don't take from this, never allow users to determine Whatever to put whatever they want into your website without you, cleaning it up first, you know, making sure everything looks fine.

And so with that comes the sanitizer API.

And so it's a new API in the browser's.

I think I believe it's like Chrome 93 or something, but it's cool.

That something is coming to the browser to help with that.

You know, I mean, so just to make sure so, yeah, so As you can see here, shouts Jack J over at.

I don't know where they wrote the article for web dev.

And so which reminds me.

Let me, I am going to add the link to this article to the site, through the archive page of the video.

So that way you can check it out as well.

So, yeah, so when you go to the archive of this video, you will be able to see the links of the things that we discussed today.

So, Now, all right, so Moscow, all right.

So, now, the new Senate page sanitizer API aims to build a robust processor for arbitrary.

Strings to be safely, inserted into a page, because again, one thing to remember, never let the user just put whatever they want on the page without you taking a look at it first.

I so this is a fairly new one.

So, yeah, so it's updated October 7th.

So it is a few days ago.

And so yeah, so this is applications deal with untrusted strings all the time, but safely rendering that content as part of an HTML, document can be tricky.

So yeah, so like I think they said in here.

Never well, they say okay.

So here's the cross scripting cross-site scripting so you don't want to do that because it will not only affect you like your site but like other users, you know, I mean like so you don't want people just a meal with the put whatever they want on your site.

So now this is something I have never seen before.

It's like, set HTML, has anyone ever I know about inner HTML, like, enter text, text content.

But, like, set HTML, I have never seen that one before.

So that's new to me.

But yeah, so if you wanted to, let us say this is the hello world, you know, italicize with image source, but then see the error is.

This on error is going to pop up an alert that says zero.

And so that's weird that this in this image tag, you know, I mean, so people be able to pass all sorts of things into your website if you just did, right?

That's right here.

Stop doing it.

Inner HTML.

See ya.

We do want to do that.

So like if a user was just putting this, I have seen this in some chat rooms like that super important, especially, like chat rooms.

You want to really as funny.

I think I saw on Twitch.

This guy was working on something, and he forgot to like, Escape, you know, I am saying in sanitized the stuff, people are putting in the chat.

And so you had people doing all sorts of things like you.

Put like emojis this stuff and doing Marquee tag that as well.

But one person actually made like the UI like flip a hundred, eighty degrees.

So like everything was upside down, you know, I mean like so don't let people have, you know, free rein or stuff.

So, so yeah, so this is some about escaping user input.

Now the thing is when you try to like Escape, so that's basically trying to sanitize it.

Like if you try to do some stuff then it will like this Emi.

Think they mentioned it here.

Yes, like if you do text content, well do is because that's a way around it as well.

But if you do like text content, then I think you will get like, you know, like the with it's not a ski but like the entities the HTML entities for like left:.

Now lift: left bracket right bracket, so it will look something like It's like if you have like an ampersand or what like a copyright symbol, it would have like Ampersand copy:, you know if you locate so like the left tag or what have you, it would be like Ampersand LT than e m + + + G + GT kind of thing.

Yeah.

I mean if there're quotes.

So if you were to do like text content, I think that's what would happen.

So that's but you don't want that to happen cuz you want to actually look italicize or what have you?

I am saying, and so, So, yeah, so like I said, the best thing to do here is not escaping because when you escape those characters, that turns them into the Ampersand LT stuff.

And that's what the text content would do.

It would get rid of the on error alert zero.

Like, it would make it, so it can't be executed, but it will make the brackets in e/m, look funny.

And thus, not allowing it to look emphasize or italicize or whatever.

And so, what you want to do is not Escape them.

You want to sanitize them?

So that's the difference.

And so that's why they have the sanitizer API.

So yes, you want to sanitize.

Yeah, could see Escape them.

You get the HTML entities.

Oh, by the way, let me since I mentioned it going to put this link.

Into so you can see it later when the video is up archived video.

Alright, cool.

So, So yes, we're like right here.

So that image on error, this one here.

It causes the error Handler to be executed.

But if the on error handler was removed, it would be possible to safely expand it in the Dom while leaving e/m intact, right?

So what they're saying is can't do this.

So This dot in your HTML is going to run this on error, which is going to cause the alert box to open up, which is where we don't want.

But now, if we sanitize, It then we could remove that on error.

And so there would be no problem.

So that's that.

Let us see.

So, the satellite sanitized correctly.

It is necessary to parse the input string as HTML, emit tags, and attributes that are considered harmful and keep the harmless ones.

Cool.

And so, then they have that.

So now here is the actual API and how it works.

Right?

So you have this div, right?

This random element that's on your site.

And, you know, you choose the document query selector div.

Then you have the user inputs, which is that same emphasizes hello world with the image tag, The Source being blank, but you have that on error and I think it will give you the on error because this source is not, there's nothing in the source.

So that will throw an error, right?

And that's why you get like a little block instead of your image.

Sometimes you get a little square so that would launch the on error and it would pop up with alert 0 on your computer.

You don't want that.

Right.

So then you're going to create a new instance of the sanitizer by doing new sanitizer.

Cool.

And again, with this set HTML.

I have never seen that.

Is that something new?

I don't know.

But so you will take the div element that the reference to the element.

You will do a set HTML of the user input and the sanitizer.

So that looks similar to what we had.

Up here.

So it's pretty much this so that same new sanitizer.

We just abstract it into a variable, and we abstracted this whole text string into the user input variable.

So it's a little bit, you know, cleaner to see.

All right, cool.

So that makes sense.

And so then what will happen is that keep going cool?

So what will happen?

What will be set on your in the Dom will be just a div or rats would be the Divya looking for that you have there, right?

So, so it's kind of like inner HTML but not.

So you have the div that's your element that you call, they get a reference to and the inside of that you place in.

This new sanitized part of the text string from the user input, so it strips out the on error.

So it automatically does notes to do that, which is cool.

Yes, that's good.

So you don't have to really worry about it.

That's cool.

Alright, so here we go.

So it is worth noting that set HTML is defined on elements being a method of elements.

So I guess it's a method in there that I wasn't familiar with the context to parse is self-explanatory.

Div in this case the parsing Is done once internally and the result is directly expanded into the Dom, so they fix it.

They clean it up, and then they put it into the Dom.

All right.

So now, if you don't want to expand directly into the Dom, you can also get the result as an HTML element.

Okay, so what they're doing here now?

So instead of actually doing it directly onto like putting it into the element.

Let us say you just want to clean it and get something from there.

You can do the same thing user input sanitizer, but instead of getting a reference to a Dom element to get to do sanitizer, dot sanitizer for and then you have a div.

And then the user input so instead of the reference to the so.

So it's a little bit different from here interesting.

So I guess this would create the HTML div element that.

So I guess you could put whatever you want here.

So it could be like a P tag or whatever and then it would be whatever elements.

All right, so, okay.

Cool, then if you want to get the result of sanitizing of a string, so okay, you can use inner HTML from HTML elements.

You got here.

Okay, so, okay.

Okay.

Okay, okay.

Yeah, okay, so you get the sanitizer 10 times or for, so I guess you just get the div here.

You don't get this stuff into it.

You just get the div.

All right, cool.

And then you get the div so the same thing as up here, you get the div, but then you do the dot inner HTML, which then takes the user input and put it into the div that was created, which gives you this.

All right, and so there're different ways of doing it.

That's cool.

And then if you already have a user controlled document fragment, so if you already have something there and you want to remove only the harmful stuff, okay, so all right.

So then you have the div and then you replace the children with that.

They're so okay.

So replace what we're doing is they're okay interesting cool.

Now what's also cool is that you can actually customize it.

So they have this configuration here.

So they have the allow elements, block elements, drop elements allow attributes Dropout, but tributes allow custom Elements, which is pretty cool.

So if you want to have like a web component or don't have a web component, you can set that I think so.

So if you just want to just strictly, you know, like regular HTML elements, you could do that if you want to allow custom elements, so you can strip out like web components if you wanted to.

That's cool.

And then comments.

All right.

Well, I guess if you wanted to, you know, get rid of like comments like these.

All right.

So the following options specify how the sanitation result.

All right, so allow elements.

Like I said, name of elements that it's n times.

R should retain block elements, is the opposite.

Drop elements names of elements of sanitizers should remove along with their children.

Okay, so block elements would keep the children from the element.

So if you have like a P tag and then a span tag, you just want to get rid of the P tag, you would keep the span tags, but then if you had P tag and the children of the P tag being span tags, that you could drop the P tags, drop elements, and I will get rid of the span tags.

It looks like that's cool.

So let us say, for example, you have the string here.

And then you want to sanitize it.

Sanitized for div.

Then what you will get is the hello be.

So you'd get the same thing, but just wrapped in a div.

Now, if you want to allow to be and you put that allow elements, the Bold tags.

Then what you get is.

Okay, so you get everything?

Except the you get everything.

No, you don't you only get the bees.

So you see there's like italicized you don't get that because it wasn't allowed?

So it's trips that out.

That's cool.

And if you want to block, it is two opposite where it got rid of the bees.

What kept the eyes.

That's cool.

And then if you wanted to allow elements, but left it blank, then it would take out the bees and eyes.

That's cool.

So take that anything.

That's not there.

That's cool.

You can control whether the sanitizer will allow our denies specified attributes with the following options.

So yes, attribute stuff.

Pretty much the same thing.

So, for example, you have the ID Foo class bar style tag here, right?

So if you wanted to send a ties it you just leave everything the same.

But then if you wanted to allow attributes of style, it would get rid of everything else.

We got rid of the ID, the class, but kept the style.

Cool, and if you want to allow the P, same thing allow the attributes, the P, but there is no P tag.

Oh, so then that means it got rid of everything in the span because there was no P, huh?

All right, cool.

And then now the style star?

Oh, so you can even get down into what you want to show or don't show inside of the style.

Interesting.

So this is allowing everything in the style to be shown.

All that's cool.

So if you wanted to just let us say you have like color and then me like background color.

So if you just put color here, maybe you would strip out the background color.

That's pretty cool.

And then also then you could drop attributes like the ID which was what was it fou?

It would if you drop that tributes and gets rid of it.

So it's no longer ID food here.

And then allow attributes if you left it blank like the last one.

He gets rid of all attributes interesting and even got rid of the span.

Okay.

Cool, and then here's the custom elements.

Like we're saying like custom elements would be like, had like a web component or whatever.

So surrounding it.

If you did it, sanitized for div.

It just gets rid of it.

Interesting.

But then if you allow it, And so oh, so you can allow custom elements true.

And then I guess you have to say allow Elements which ones you want.

So it would be the div and the custom elements and then it will allow you to keep the divs and the custom elements.

That's cool.

So like they're saying here, the sanitized API designed to be safe by default.

So if you try to do like allow elements script that will work.

It will actually strip out the scripts, ship out the scripts and then other talking about this other one, like there's another Library called Dom purify, which is this one here.

Add that to the list of links to the video and check that out.

So that is another one that you could do.

So they're so basically they're taking with that Library can do and putting it into the browser like natively, which is cool.

So, so Dom purify can serve as a fallback, when the sanitizer API is not implemented into the browser because, again, I will think this is fully in the browser yet.

At least not multiple browsers, manufacturers or what have you?

And, yeah.

It's pretty cool.

So, yeah, so that's pretty much everything.

That's as far as I know with the.

So, yeah, so you can see its Chrome origin, trial, ready for trial, but the launch hasn't started yet.

So it's something that's cool.

That's coming to the browser's.

I think it's said that.

Oh, yeah.

So this is how you can enable it.

We're just cool.

And then Firefox also implements the sanitizer API as an experimental feature.

So you could do that.

So looks like Chrome and Firefox.

I am not sure about anyone.

See it though, but you can see here.

It was tagged for Chrome 93, and I think we're like Chrome 90.

I am not sure or maybe 92, so, might be the next one.

But yeah, so something kind of look out for.

I think that's pretty cool.

All right, so, let me stop sharing my screen.

I am get you all back to work.

Yes, the app screen, share.

All right.

So what y'all think the sanitizer API?

Seems pretty cool.

And something that's like very needed for like a safer.

Because you know, people sometimes forget and things you know, and so we don't want to have any sort of catastrophic error just because somebody accidentally forgot something and so yeah, I think that's pretty cool.

So again, let me know what y'all think, have you?

Well if you have used it, like if you set all the flags and stuff, what do you think if you're watching this in the future and it's already been implemented in the browser?

What do you think?

So yeah, let me know always interested.

All right.

I am just trying to make sure I don't click.

Thing where I met stuff up.

All right, so I am going to get you all back to work.

I am going to send you off with some tunes.

This is new Jabez.

One of my favorite producers, featuring a Pawnee be the track is called.

Thank you.

And yeah, thanks for hanging out.

So from screen, and then we will be back 15 minutes after the hour for the final break session, and then we will if we don't have any show and tells will go over an artist's website.

And you will listen to some tunes.

All right, cool.

Thank you all for hanging out.

Oh, I almost forgot to do this thing here.

And I think that is it.

Thank you all.

Once again, for hanging out.

Yeah, thing, that's it.

Yes.

All right.

See you later.