WEBVTT

0:00:04.120000 --> 0:00:06.960000
 Hello everyone and welcome to this video.


0:00:06.960000 --> 0:00:10.580000
 In this video, we're going to be
 taking a look at HTML encoding.

0:00:10.580000 --> 0:00:14.580000
 So this is going to be building off what
 we took a look at in the previous

0:00:14.580000 --> 0:00:19.560000
 video, which was sort of our introduction
 to character set or character

0:00:19.560000 --> 0:00:24.760000
 encoding. Now, the reason why say it
 builds off on the previous video

0:00:24.760000 --> 0:00:32.460000
 is primarily because from the previous example,
 you may have got a misconstrued

0:00:32.460000 --> 0:00:38.320000
 idea as to what character set encoding
 is with regards to its role in

0:00:38.320000 --> 0:00:41.240000
 web applications and how they function.

0:00:41.240000 --> 0:00:47.780000
 What I mean by that is when we specify
 the character set to be used within

0:00:47.780000 --> 0:00:53.560000
 let's say an HTML page, that is really
 for the content itself or the character

0:00:53.560000 --> 0:00:55.600000
 set itself, right?

0:00:55.600000 --> 0:00:59.220000
 Which means that it only goes so far.

0:00:59.220000 --> 0:01:04.080000
 Now, when it comes down to again, you know,
 front end components or resources

0:01:04.080000 --> 0:01:10.280000
 like HTML, JavaScript, CSS, each of those
 languages, if you will, whether

0:01:10.280000 --> 0:01:14.580000
 they be scripting languages or style
 sheets or in this particular case

0:01:14.580000 --> 0:01:20.140000
 markup languages, have their own standardized
 syntax that follows specific

0:01:20.140000 --> 0:01:25.320000
 rules, which means that in the case
 of HTML, we have, you know, we have

0:01:25.320000 --> 0:01:30.500000
 specific tags or entities, like
 the H one H two headers.

0:01:30.500000 --> 0:01:35.840000
 And the way you specify them within an
 HTML file is you utilize the tags.

0:01:35.840000 --> 0:01:39.020000
 So H one for a header,
 so on and so forth.

0:01:39.020000 --> 0:01:42.760000
 Now HTML encoding is very important
 because of those entities.

0:01:42.760000 --> 0:01:46.900000
 So that begs the question,
 what is HTML encoding?

0:01:46.900000 --> 0:01:50.120000
 And why is it very, very important?

0:01:50.120000 --> 0:01:53.720000
 And again, the practical demo we'll
 be taking a look at will explain all

0:01:53.720000 --> 0:01:59.500000
 of this. But to begin with, HTML encoding,
 also known as HTML entity encoding

0:01:59.500000 --> 0:02:05.380000
 involves converting special characters
 and reserved symbols into their

0:02:05.380000 --> 0:02:11.120000
 corresponding HTML entities to ensure
 that they are displayed correctly

0:02:11.120000 --> 0:02:17.880000
 in web browsers and avoid any unintended
 interpretation as HTML code.

0:02:17.880000 --> 0:02:22.840000
 And this also extends to JavaScript
 and CSS to a certain extent.

0:02:22.840000 --> 0:02:26.980000
 And as I said, the practical demo will
 break things down much better.

0:02:26.980000 --> 0:02:32.360000
 But the point is that in certain cases,
 you may find yourself, you know,

0:02:32.360000 --> 0:02:35.280000
 if you're just getting started out with
 development, you may find yourself

0:02:35.280000 --> 0:02:42.520000
 including some of these special characters
 or symbols that are, you know,

0:02:42.520000 --> 0:02:49.460000
 part of the, for example, HTML entity
 syntax in a particular block of

0:02:49.460000 --> 0:02:56.180000
 text. And as a result, if not encoded,
 your browser or, you know, a client's

0:02:56.180000 --> 0:03:02.340000
 browser will interpret those particular,
 will interpret those particular,

0:03:02.340000 --> 0:03:07.440000
 you know, HTML entities, if you will,
 or will not interpret them based

0:03:07.440000 --> 0:03:10.620000
 on whether or not encoding
 has been performed.

0:03:10.620000 --> 0:03:16.380000
 So HTML encoding is crucial for maintaining
 the integrity of web content

0:03:16.380000 --> 0:03:22.720000
 and preventing issues, such as cross
 site scripting attacks more, more

0:03:22.720000 --> 0:03:25.900000
 commonly. And as I said, I'll
 give you an example of this.

0:03:25.900000 --> 0:03:28.660000
 So HTML entities, what are they?

0:03:28.660000 --> 0:03:33.880000
 Well, HTML entities are sequences of
 characters that represent special

0:03:33.880000 --> 0:03:37.640000
 characters, symbols, and reserved
 characters in HTML.

0:03:37.640000 --> 0:03:42.320000
 To make things simple, these are, you
 know, things like the, the greater

0:03:42.320000 --> 0:03:48.240000
 than symbol, the less than symbol that
 are used to specify the creation

0:03:48.240000 --> 0:03:53.080000
 or the opening of a tag, like an H1
 tag and the closing of an H1 tag,

0:03:53.080000 --> 0:03:58.000000
 where you have the greater than H1, and
 then, you know, you close it with

0:03:58.000000 --> 0:04:03.360000
 the, sorry, you have the less than
 H1 and then the greater than tag.

0:04:03.360000 --> 0:04:07.340000
 Now, you may be thinking to yourself,
 whenever I use those tags, nothing

0:04:07.340000 --> 0:04:13.300000
 seems to happen in terms of, you know,
 negative effect on the web application.

0:04:13.300000 --> 0:04:16.380000
 That's because the tags are
 being used correctly.

0:04:16.380000 --> 0:04:20.140000
 But there may be cases where you may
 want to use those special symbols

0:04:20.140000 --> 0:04:23.740000
 like the less than within
 a block of text.

0:04:23.740000 --> 0:04:30.320000
 And as a result, if they are in a certain,
 if they are in a certain order,

0:04:30.320000 --> 0:04:35.300000
 the browser may construe
 them as HTML tags.

0:04:35.300000 --> 0:04:39.660000
 And as a result, that will affect
 how the web page is rendered.

0:04:39.660000 --> 0:04:45.500000
 And to go or to take a deeper look at this,
 the best way to sort of understand

0:04:45.500000 --> 0:04:50.000000
 what's going on here is that, for example,
 if we have an application input,

0:04:50.000000 --> 0:04:54.820000
 you know, whether it may be through
 the URL or a particular input field,

0:04:54.820000 --> 0:05:00.400000
 if that particular input field is not
 sanitized or the input from the

0:05:00.400000 --> 0:05:05.280000
 input field is not sanitized to essentially
 encode what has been put in

0:05:05.280000 --> 0:05:11.120000
 there, the inclusion of any tags, like
 a script tag, will result in that

0:05:11.120000 --> 0:05:16.100000
 script, that JavaScript snippet being
 processed by the browser, which

0:05:16.100000 --> 0:05:21.000000
 is what is the primary cause of cross
 site scripting attacks or cross

0:05:21.000000 --> 0:05:22.580000
 site scripting vulnerabilities.

0:05:22.580000 --> 0:05:24.440000
 So that's where it comes from.

0:05:24.440000 --> 0:05:29.160000
 So HTML entities allow you to essentially
 specify or to tell the browser

0:05:29.160000 --> 0:05:33.720000
 that this is that this here is an entity.


0:05:33.720000 --> 0:05:42.000000
 So they essentially state that it's
 an entity, but also tell the tags

0:05:42.000000 --> 0:05:47.720000
 if they are being presented that way,
 instead just display the actual

0:05:47.720000 --> 0:05:52.720000
 characters as they are or display the
 actual symbols as they are and not

0:05:52.720000 --> 0:05:54.220000
 treat it as code.

0:05:54.220000 --> 0:05:58.780000
 So the way they start the way they work
 or the way they look is very simple

0:05:58.780000 --> 0:06:02.660000
 to identify and to understand.

0:06:02.660000 --> 0:06:07.300000
 They start or begin with an ampersand,
 which is the and symbol and end

0:06:07.300000 --> 0:06:10.500000
 with a semi colon.

0:06:10.500000 --> 0:06:15.680000
 And when the browser encounters an entity
 in HTML, it'll show the symbol

0:06:15.680000 --> 0:06:19.940000
 to the user in their browser and will
 not or will never interpret the

0:06:19.940000 --> 0:06:22.860000
 symbol as an HTML language element.

0:06:22.860000 --> 0:06:26.600000
 And as said, this also extends to the
 inclusion of other resources like

0:06:26.600000 --> 0:06:31.780000
 JavaScript, PHP or even CSS.

0:06:31.780000 --> 0:06:34.620000
 And these are the HTML entities here.

0:06:34.620000 --> 0:06:40.460000
 So when you want to use the less than
 symbol, you know, as part of the

0:06:40.460000 --> 0:06:44.840000
 content of the web page and not as part
 of the HTML code, then you would

0:06:44.840000 --> 0:06:50.140000
 utilize the entity ampersand LT, which
 stands for less than and then semi

0:06:50.140000 --> 0:06:54.580000
 colon. And then you'd, you know, do
 the same for the greater than sign

0:06:54.580000 --> 0:06:59.160000
 where it's ampersand GT, which, you
 know, is an abbreviation for greater

0:06:59.160000 --> 0:07:01.640000
 than and semi colon.

0:07:01.640000 --> 0:07:05.540000
 And the same for the ampersand, you'd
 use an the ampersand and then the

0:07:05.540000 --> 0:07:08.520000
 word or the letters AMP.

0:07:08.520000 --> 0:07:10.580000
 So you may have seen this in web pages.

0:07:10.580000 --> 0:07:14.840000
 And this is very important, you know,
 in web pages that are using these

0:07:14.840000 --> 0:07:19.880000
 symbols and want to prevent a user's
 browser or a client's browser from

0:07:19.880000 --> 0:07:25.600000
 interpreting these particular symbols
 as HTML entities or HTML language

0:07:25.600000 --> 0:07:30.540000
 elements. And you may be thinking to
 yourself, well, I'm not really sure

0:07:30.540000 --> 0:07:35.300000
 how this would negatively affect or
 the lack therein of HTML encoding

0:07:35.300000 --> 0:07:40.160000
 will negatively affect the functionality
 of a web application.

0:07:40.160000 --> 0:07:42.380000
 More so a very basic web page.

0:07:42.380000 --> 0:07:46.900000
 And again, the best way to demonstrate why
 this is important, more specifically

0:07:46.900000 --> 0:07:49.900000
 for web app pen testing
 is to give you a demo.

0:07:49.900000 --> 0:07:53.600000
 So this particular demo will not use
 a live lab because it doesn't need

0:07:53.600000 --> 0:07:57.300000
 one. You can easily do this on any
 operating system you're using.

0:07:57.300000 --> 0:07:58.840000
 You just need a text editor.

0:07:58.840000 --> 0:08:00.540000
 That's pretty much it.

0:08:00.540000 --> 0:08:04.480000
 And what I'll do is I'll be switching
 over to my Kali Linux system.

0:08:04.480000 --> 0:08:08.520000
 And I'll give you some practical examples
 that will illustrate how important

0:08:08.520000 --> 0:08:13.780000
 HTML encoding is to the proper functionality
 of a web application.

0:08:13.780000 --> 0:08:18.520000
 And in the prevention of, you know, particular
 vulnerabilities like cross

0:08:18.520000 --> 0:08:22.340000
-site scripting vulnerabilities or
 cross-site scripting attacks.

0:08:22.340000 --> 0:08:31.960000
 With that being said, let me switch
 over and we'll the best way to get

0:08:31.960000 --> 0:08:36.640000
 started, as I said, is just to give
 you a very basic or brief example,

0:08:36.640000 --> 0:08:44.000000
 right? So to begin with, I'm going
 to create a very simple HTML page.

0:08:44.000000 --> 0:08:47.180000
 So I'll open up a text editor
 like malspad here.

0:08:47.180000 --> 0:08:51.520000
 And I will just, you know,
 provide in the HTML syntax.

0:08:51.520000 --> 0:09:02.580000
 So for example, in this HTML, and that's
 the first tag, and then we create

0:09:02.580000 --> 0:09:04.040000
 an HTML tag, right?

0:09:04.040000 --> 0:09:06.140000
 Very, very simple HTML web page.

0:09:06.140000 --> 0:09:11.120000
 And then in here, we have the head tag
 right over here, and we then close

0:09:11.120000 --> 0:09:15.340000
 it. So these are, you know, the special
 symbols reserved for tags.

0:09:15.340000 --> 0:09:17.340000
 And then within the head,
 we usually have the title.

0:09:17.340000 --> 0:09:21.400000
 So we'll just call this a
 simple HTML page, right?

0:09:21.400000 --> 0:09:23.200000
 And we'll close that tag here.

0:09:23.200000 --> 0:09:26.780000
 So we'll start with a basic example,
 and then we'll move on to a much

0:09:26.780000 --> 0:09:28.980000
 more realistic example.

0:09:28.980000 --> 0:09:33.520000
 And then within the actual body, we'll
 put in right over here just some

0:09:33.520000 --> 0:09:38.620000
 basic tag, you know, so we'll say body,
 we'll in here, we'll put an H1

0:09:38.620000 --> 0:09:45.100000
 and say, this is a simple
 HTML page, all right?

0:09:45.100000 --> 0:09:47.540000
 And we'll close the tag right over here.

0:09:47.540000 --> 0:09:53.620000
 And we can also add in a paragraph,
 and we can say this is, we can say

0:09:53.620000 --> 0:10:01.340000
 this page is written or developed in
 PHP or rather HTML, not PHP, but

0:10:01.340000 --> 0:10:04.540000
 HTML. And we'll close that up there.

0:10:04.540000 --> 0:10:06.060000
 This is a paragraph tag.

0:10:06.060000 --> 0:10:06.760000
 So there we are.

0:10:06.760000 --> 0:10:10.020000
 So I'll now save this, and I'm going
 to save it on my desktop, and we'll

0:10:10.020000 --> 0:10:12.080000
 just call it index dot HTML.

0:10:12.080000 --> 0:10:15.620000
 And again, you can use any web server
 you want, whether it be Apache or

0:10:15.620000 --> 0:10:16.760000
 even the Python module.

0:10:16.760000 --> 0:10:21.120000
 So I'll now navigate into my
 desktop here in my terminal.

0:10:21.120000 --> 0:10:24.640000
 And I'll just create a very
 simple HTTP web server.

0:10:24.640000 --> 0:10:28.240000
 So Python 3M HTTP dot server.

0:10:28.240000 --> 0:10:32.420000
 And I'll say open up the web server
 on port 80, just going to give it

0:10:32.420000 --> 0:10:33.040000
 pseudo permissions.

0:10:33.040000 --> 0:10:36.060000
 And I'll put in my password here.

0:10:36.060000 --> 0:10:41.320000
 And in this particular case, I think
 this may be because I have Apache

0:10:41.320000 --> 0:10:48.080000
 running so system control, I'll just
 say pseudo system control, disable,

0:10:48.080000 --> 0:10:53.240000
 or stop Apache to there we are just
 so that we don't have any conflicts

0:10:53.240000 --> 0:10:54.900000
 of the port. There we go.

0:10:54.900000 --> 0:10:59.000000
 So I'll now open up my browser,
 navigate to localhost.

0:10:59.000000 --> 0:11:00.360000
 And there we are.

0:11:00.360000 --> 0:11:01.360000
 We can see the page.

0:11:01.360000 --> 0:11:04.180000
 So where does the issue come into play?

0:11:04.180000 --> 0:11:09.440000
 The issue comes into play when I, for
 example, within this particular

0:11:09.440000 --> 0:11:15.400000
 page as the developer want to include
 those special characters.

0:11:15.400000 --> 0:11:20.760000
 So for example, I can say, I'll create
 another H one here, and I can say

0:11:20.760000 --> 0:11:26.320000
 the header tag, the header, or rather
 the, yeah, we can just say the header

0:11:26.320000 --> 0:11:30.840000
 was implemented via.

0:11:30.840000 --> 0:11:36.940000
 And we can just say, for example, here,
 if I wanted to essentially display

0:11:36.940000 --> 0:11:41.480000
 the tag as is for purposes of reference
 to the end user to show them how

0:11:41.480000 --> 0:11:48.580000
 to add an H one, I can say H one, and
 I can then say, you know, you know,

0:11:48.580000 --> 0:11:52.140000
 we can just say header, and
 I'll just close the H one.

0:11:52.140000 --> 0:11:55.780000
 And now I'll close the main
 H one right over here.

0:11:55.780000 --> 0:12:01.200000
 Okay, so when I do this, let me reload
 the page, you can see that while

0:12:01.200000 --> 0:12:08.600000
 I did not intend that nested H one tag
 to be included, or to be rendered

0:12:08.600000 --> 0:12:14.000000
 by the web pages and H one tag in in and
 of itself, it was still pro still,

0:12:14.000000 --> 0:12:15.800000
 it was still processed as such.

0:12:15.800000 --> 0:12:20.740000
 So you can see the header was implemented
 via, and then it thinks that

0:12:20.740000 --> 0:12:26.540000
 the inclusion of this H one here is to
 be processed literally by the browser.

0:12:26.540000 --> 0:12:31.080000
 And this text here is to be rendered
 as an H one element.

0:12:31.080000 --> 0:12:33.440000
 So that is the issue here.

0:12:33.440000 --> 0:12:37.000000
 And I can of course get rid of the quote
 there, because it's not really

0:12:37.000000 --> 0:12:40.660000
 important. And if I reload this now,
 you can see that it's causing an

0:12:40.660000 --> 0:12:45.560000
 issue, whereas I wanted that to be
 displayed here on the same line as

0:12:45.560000 --> 0:12:49.680000
 the the original H one tag,
 which was intentional.

0:12:49.680000 --> 0:12:55.120000
 And as I said, this can cause a multitude
 of issues, more of which we

0:12:55.120000 --> 0:12:57.960000
 can actually explore in
 the form of an example.

0:12:57.960000 --> 0:13:03.800000
 So for example, another scenario we
 can explore here is let's get rid

0:13:03.800000 --> 0:13:08.740000
 of this here. And let's take a look
 at something much more realistic.

0:13:08.740000 --> 0:13:12.980000
 So again, just taking the example previously
 where I wanted to include,

0:13:12.980000 --> 0:13:20.780000
 you know, special characters or HTML,
 HTML language set within a tag,

0:13:20.780000 --> 0:13:25.200000
 but I wanted to be rendered literally,
 or not literally, I want it to

0:13:25.200000 --> 0:13:29.240000
 be rendered as text instead of rendered
 literally by the browser.

0:13:29.240000 --> 0:13:34.480000
 So for example, I can say, this is
 a, and I use, I'll use a particular

0:13:34.480000 --> 0:13:36.300000
 tag here like strong.

0:13:36.300000 --> 0:13:39.340000
 So I can say this is a strong paragraph.

0:13:39.340000 --> 0:13:44.600000
 And I'll close the strong tag here,
 strong just makes the text bold.

0:13:44.600000 --> 0:13:49.980000
 And I can say with some, and I wanted
 to, you know, for example, to include

0:13:49.980000 --> 0:13:55.040000
 a script here, a JavaScript, so I can
 say alert, and in here, I can just

0:13:55.040000 --> 0:13:57.860000
 say JavaScript to indicate that.

0:13:57.860000 --> 0:14:00.140000
 And I can close that in here.

0:14:00.140000 --> 0:14:04.740000
 And I can then say, sorry, let me just
 make sure that we have the semi

0:14:04.740000 --> 0:14:09.920000
 colon there. And after that script inclusion,
 I can say content, right?

0:14:09.920000 --> 0:14:14.340000
 So in essence, what I'm trying to say
 is that this is a bold paragraph.

0:14:14.340000 --> 0:14:18.680000
 So I'm using the strong tags
 to bold the word paragraph.

0:14:18.680000 --> 0:14:23.020000
 And then I also want to include, you
 know, just a, an example of what

0:14:23.020000 --> 0:14:25.520000
 a JavaScript snippet would look like.

0:14:25.520000 --> 0:14:29.900000
 So if I save this now and go back in
 here, you can see that the browser

0:14:29.900000 --> 0:14:35.680000
 processes processes this literally,
 and processes that JavaScript, and

0:14:35.680000 --> 0:14:39.920000
 the JavaScript executes successfully,
 and you know, brings up the alert

0:14:39.920000 --> 0:14:43.880000
 or the pop up. And you can see that,
 you know, it pretty much renders

0:14:43.880000 --> 0:14:48.760000
 or processes those tags are literally
 the browser does this.

0:14:48.760000 --> 0:14:51.860000
 So what if we wanted, how
 do we counter this?

0:14:51.860000 --> 0:14:55.600000
 The way we counter this is
 through HTML encoding.

0:14:55.600000 --> 0:14:59.180000
 And there's many resources you can use,
 like for example, this very simple

0:14:59.180000 --> 0:15:04.700000
 web app here, or you can also use cyber chef,
 if you want to do it automatically,

0:15:04.700000 --> 0:15:08.580000
 right? And if you are using a tool like
 Visual Studio Code, then that's

0:15:08.580000 --> 0:15:10.760000
 also useful. But we can
 use cyber chef here.

0:15:10.760000 --> 0:15:13.480000
 I think they have an HTML encoder.

0:15:13.480000 --> 0:15:15.420000
 So you know, just give
 it a couple of seconds.

0:15:15.420000 --> 0:15:20.860000
 And then, you know, we can search
 for HTML encode, there we are.

0:15:20.860000 --> 0:15:26.000000
 So we can say to HTML entity, and then
 just copy in what we want to encode.

0:15:26.000000 --> 0:15:32.000000
 So this right over here, and it should
 encode those particular symbols.

0:15:32.000000 --> 0:15:36.040000
 So there we are, we can see that it
 does this for us, where it changes

0:15:36.040000 --> 0:15:40.960000
 the less than symbol to
 ampersand lt semicolon.

0:15:40.960000 --> 0:15:42.680000
 And then it includes that there.

0:15:42.680000 --> 0:15:45.780000
 So this is what HTML encoding
 is all about.

0:15:45.780000 --> 0:15:50.360000
 And within the source code, I can go
 and go ahead and change that there,

0:15:50.360000 --> 0:15:52.200000
 and put the encoded one in here.

0:15:52.200000 --> 0:15:57.880000
 And of course, I'll just put the paragraph
 tags here to essentially render

0:15:57.880000 --> 0:15:59.740000
 it as a as a paragraph.

0:15:59.740000 --> 0:16:01.040000
 And then I'll save this.

0:16:01.040000 --> 0:16:04.240000
 And if I go back to the web page here
 and reload it, you can see that

0:16:04.240000 --> 0:16:07.220000
 it's now displaying the
 content as I intended.

0:16:07.220000 --> 0:16:11.720000
 Now, as I said, this is a very deliberate
 example that sort of explaining

0:16:11.720000 --> 0:16:15.220000
 where the vulnerabilities come from in
 terms of, you know, vulnerabilities

0:16:15.220000 --> 0:16:20.860000
 like HTML injection, or even
 cross site scripting.

0:16:20.860000 --> 0:16:25.820000
 So to now give you a much more realistic
 example, where we'll be utilizing

0:16:25.820000 --> 0:16:31.720000
 PHP to take a value from an input field
 from a user, and then display

0:16:31.720000 --> 0:16:36.560000
 it on the web page, the point is that
 if the input is not HTML encoded

0:16:36.560000 --> 0:16:43.220000
 to essentially not treat tags or symbols
 literally, then it will process

0:16:43.220000 --> 0:16:47.440000
 that code. So for an example, if an attack
 included a script, a JavaScript

0:16:47.440000 --> 0:16:51.440000
 snippet, it would be processed
 by the browser.

0:16:51.440000 --> 0:16:55.900000
 And I'll show you how to implement HTML
 encoding to sort of mitigate this

0:16:55.900000 --> 0:16:57.520000
 particular issue.

0:16:57.520000 --> 0:17:02.720000
 So I'm just going to now, I'm just
 going to close this up here.

0:17:02.720000 --> 0:17:08.200000
 And for this to work, you'll now need
 a web server that supports PHP.

0:17:08.200000 --> 0:17:12.420000
 And again, you can easily do this on
 Kali Linux by just installing Apache

0:17:12.420000 --> 0:17:15.300000
 to, and I'll show you how to do this.

0:17:15.300000 --> 0:17:21.780000
 So you can easily, you know, just say,
 sudo apt get install Apache to.

0:17:21.780000 --> 0:17:26.460000
 So on moment, there we are Apache to,
 and you can see I've already installed

0:17:26.460000 --> 0:17:28.360000
 it, you then need to start it.

0:17:28.360000 --> 0:17:34.540000
 So system sudo system control, start
 Apache to, and then you can say sudo

0:17:34.540000 --> 0:17:42.280000
 systemctl or system control status Apache
 to, like so, if I can type in

0:17:42.280000 --> 0:17:44.780000
 Apache to, and you can see it's loaded
 and active, and this will start

0:17:44.780000 --> 0:17:47.360000
 an Apache web server on port 80.

0:17:47.360000 --> 0:17:53.560000
 And you can put in the actual code for
 your web page, under var www HTML.

0:17:53.560000 --> 0:17:56.060000
 There we are, I've already cleared
 that folder of the defaults.

0:17:56.060000 --> 0:18:01.140000
 And now what I'll do is I'll just switch
 to the root user, and I'll navigate

0:18:01.140000 --> 0:18:02.840000
 to that directory.

0:18:02.840000 --> 0:18:06.640000
 And of course, you can use whatever,
 you know, text editor you want.

0:18:06.640000 --> 0:18:08.500000
 In this case, I'll just use vim.

0:18:08.500000 --> 0:18:11.820000
 So I'll say we'll call this index.php.

0:18:11.820000 --> 0:18:13.760000
 Or actually, let's be a
 bit more descriptive.

0:18:13.760000 --> 0:18:17.640000
 We'll just call this HTML encode dot PHP.


0:18:17.640000 --> 0:18:23.220000
 Okay, so within this, this is going
 to just be a simple, for the front

0:18:23.220000 --> 0:18:24.740000
 end, we'll utilize HTML.

0:18:24.740000 --> 0:18:28.660000
 So I'll say, Doc type HTML,
 I'll bring up the tags here.

0:18:28.660000 --> 0:18:33.120000
 So HTML, HTML, and it'll
 contain some PHP here.

0:18:33.120000 --> 0:18:37.200000
 And within this, we'll put
 in the head tags here.

0:18:37.200000 --> 0:18:40.400000
 And there we are, just close that there.

0:18:40.400000 --> 0:18:45.120000
 And then we're going to have the body,
 like so, so very, very simple.

0:18:45.120000 --> 0:18:49.260000
 And we'll just put that in there,
 and I'll close the body tag.

0:18:49.260000 --> 0:18:53.420000
 And now within the head, let's
 just put in the title.

0:18:53.420000 --> 0:18:55.100000
 And there we are.

0:18:55.100000 --> 0:19:01.540000
 And I'll just say, HTML encoding, just
 to keep things nice and simple.

0:19:01.540000 --> 0:19:04.060000
 This is the title, not the h1.

0:19:04.060000 --> 0:19:05.000000
 And there we are.

0:19:05.000000 --> 0:19:09.280000
 So from this point on, the web application
 is very simple in terms of

0:19:09.280000 --> 0:19:10.060000
 the functionality.

0:19:10.060000 --> 0:19:14.560000
 We're just going to take text from
 a user or from an input field, and

0:19:14.560000 --> 0:19:16.100000
 then display it back.

0:19:16.100000 --> 0:19:20.060000
 And then I'll show you the vulnerability
 or what can happen if HTML is

0:19:20.060000 --> 0:19:23.020000
 not encoded from an input.

0:19:23.020000 --> 0:19:26.180000
 And then I'll show you how to fix
 it or what should be in place.

0:19:26.180000 --> 0:19:29.420000
 And this will tie into the filtering
 section that we'll take a look at

0:19:29.420000 --> 0:19:34.220000
 later on in this particular,
 in this particular course.

0:19:34.220000 --> 0:19:39.280000
 So to begin with, now that we've done
 this, what we can do within the

0:19:39.280000 --> 0:19:44.760000
 body is just say, in here, you know,
 let's put an let's put in an h1 here,

0:19:44.760000 --> 0:19:50.920000
 and we'll say, welcome to our website,
 you know, something very, very

0:19:50.920000 --> 0:19:51.860000
 simple like that.

0:19:51.860000 --> 0:19:55.500000
 And we'll then include
 our PHP code in here.

0:19:55.500000 --> 0:19:58.660000
 So we'll just say, you know, PHP.

0:19:58.660000 --> 0:20:01.260000
 And within this, we're going
 to put in our PHP code.

0:20:01.260000 --> 0:20:03.300000
 So I'll just put it in here.

0:20:03.300000 --> 0:20:05.280000
 So we'll create a new variable.

0:20:05.280000 --> 0:20:11.220000
 And in this case, we'll take input from
 the URL in the form of a GET request.

0:20:11.220000 --> 0:20:14.700000
 So we'll say, user input, the variable
 is going to be called user input

0:20:14.700000 --> 0:20:17.620000
 is equal to get request.

0:20:17.620000 --> 0:20:23.740000
 So the information from GET, and in here,
 we'll put in the parameter name,

0:20:23.740000 --> 0:20:26.300000
 which we can just call input.

0:20:26.300000 --> 0:20:29.460000
 Right? And that's going to, we're going
 to be taking the input from the

0:20:29.460000 --> 0:20:32.860000
 URL. So the user would have
 to put it in manually.

0:20:32.860000 --> 0:20:34.940000
 And we'll then close that up there.

0:20:34.940000 --> 0:20:41.260000
 And now we can say echo with PHP,
 in the form of a paragraph.

0:20:41.260000 --> 0:20:49.740000
 So we'll open up a paragraph tag here,
 the user input from the URL is

0:20:49.740000 --> 0:20:54.320000
 going to be equal to, and then we just
 put in the variable user input.

0:20:54.320000 --> 0:20:57.360000
 So very, very simple in terms
 of its functionality.

0:20:57.360000 --> 0:21:01.620000
 And then we'll close the paragraph tag
 there, and the actual double quotes

0:21:01.620000 --> 0:21:07.600000
 there. Okay. And we'll use a semicolon,
 because that's PHP syntax.

0:21:07.600000 --> 0:21:11.120000
 And then we'll close the
 PHP tag right over here.

0:21:11.120000 --> 0:21:12.820000
 So very, very simple web app.

0:21:12.820000 --> 0:21:17.880000
 And then we'll put in maybe some, a paragraph
 tag here to just say, thank

0:21:17.880000 --> 0:21:22.380000
 you for visiting, you know,
 just very, very simple.

0:21:22.380000 --> 0:21:27.500000
 So this is the importance
 of HTML encoding.

0:21:27.500000 --> 0:21:33.240000
 And this is a very formal rudimentary
 input sanitization of filtering.

0:21:33.240000 --> 0:21:35.060000
 So I'll save it now.

0:21:35.060000 --> 0:21:39.600000
 And if I now navigate to again, local
 host, it should bring up there,

0:21:39.600000 --> 0:21:41.160000
 we are HTML and code.

0:21:41.160000 --> 0:21:45.740000
 So I click on it, and you can see it
 is a, this is an example of a web

0:21:45.740000 --> 0:21:52.360000
 app that gets or utilizes PHP or essentially
 HTML and PHP work together

0:21:52.360000 --> 0:21:57.780000
 to get input. And then HTML dynamically
 displays that input.

0:21:57.780000 --> 0:22:02.400000
 So the point is to use it, we would
 need to put in the input from the

0:22:02.400000 --> 0:22:06.660000
 parameter. And in this case, the parameter
 name is just called input as

0:22:06.660000 --> 0:22:11.820000
 we coded it in. And the value is going
 to be anything that the user provides.

0:22:11.820000 --> 0:22:13.640000
 So I can say Alexis.

0:22:13.640000 --> 0:22:17.180000
 And you can now see that the web application
 just says user input from

0:22:17.180000 --> 0:22:19.400000
 the URL is Alexis.

0:22:19.400000 --> 0:22:23.420000
 So you can already tell where the vulnerabilities
 are coming from, from

0:22:23.420000 --> 0:22:28.580000
 this point on. So, you know, if I put
 in a decimal value or a numerical

0:22:28.580000 --> 0:22:31.140000
 value, it'll also display that.

0:22:31.140000 --> 0:22:36.620000
 Now, what happens if we use, we perform
 what you'd call HTML injection,

0:22:36.620000 --> 0:22:38.460000
 which we've already covered.

0:22:38.460000 --> 0:22:43.340000
 But I say, I want to start playing
 around with the way the, the, with

0:22:43.340000 --> 0:22:46.120000
 the way the web page displays content.

0:22:46.120000 --> 0:22:50.940000
 I can say strong to make this bold,
 whatever input I can make it bold.

0:22:50.940000 --> 0:22:52.040000
 And I hit enter.

0:22:52.040000 --> 0:22:57.660000
 And sure enough, because there is no
 HTML encoding of the input, as a

0:22:57.660000 --> 0:23:02.600000
 result, that will also not be encoded
 or HTML will essentially treat it

0:23:02.600000 --> 0:23:05.580000
 as literal and will display
 it as literal.

0:23:05.580000 --> 0:23:08.880000
 So the point is that I can
 also change this to H one.

0:23:08.880000 --> 0:23:10.720000
 And by the way, this should
 not be happening.

0:23:10.720000 --> 0:23:14.280000
 The web application developer does not
 want this to be happening because

0:23:14.280000 --> 0:23:16.960000
 it's changing how the
 web application works.

0:23:16.960000 --> 0:23:20.600000
 But to make it even more dangerous,
 I can say script.

0:23:20.600000 --> 0:23:22.940000
 And I can say alert.

0:23:22.940000 --> 0:23:28.060000
 And I can say pawned, you know, and this
 is some of the earliest examples

0:23:28.060000 --> 0:23:32.760000
 of cross site scripting vulnerabilities,
 where input is not sanitized.

0:23:32.760000 --> 0:23:48.520000
 And the most basic version would
 come in the form of code.

0:23:48.520000 --> 0:23:59.760000
 And so the point is, how do we fix
 this or how would you, by analyzing

0:23:59.760000 --> 0:24:04.780000
 source code as a web app pen tester,
 how do you identify whether HTML

0:24:04.780000 --> 0:24:09.920000
 encoding or even a rudimentary form
 of encoding or input sanitization

0:24:09.920000 --> 0:24:15.540000
 is present, that is would essentially
 mean that, you know, basic cross

0:24:15.540000 --> 0:24:18.700000
 site scripting payloads like
 this one would not work.

0:24:18.700000 --> 0:24:22.780000
 Well, the way this would
 look is as follows.

0:24:22.780000 --> 0:24:25.180000
 So I'll go back into the code here.

0:24:25.180000 --> 0:24:30.000000
 And what the web application developer
 should have done is after they

0:24:30.000000 --> 0:24:33.880000
 have created the original
 or the initial variable.

0:24:33.880000 --> 0:24:37.320000
 So I'll just indent this correctly.

0:24:37.320000 --> 0:24:42.260000
 Once they've done this, they should
 have created probably another input

0:24:42.260000 --> 0:24:43.740000
 or another variable.

0:24:43.740000 --> 0:24:48.040000
 So I'll call this variable
 sanitized input.

0:24:48.040000 --> 0:24:53.900000
 And I'll say that's equal to, and this
 is where you'd call on HTML special

0:24:53.900000 --> 0:25:00.200000
 characters. This is a PHP specific,
 I'll explain what this is, but you

0:25:00.200000 --> 0:25:05.380000
 can see HTML special, special characters.


0:25:05.380000 --> 0:25:09.340000
 And in this case, it would
 be just HTML special chars.

0:25:09.340000 --> 0:25:13.000000
 And in here, we would take the initial
 variable that stores the input.

0:25:13.000000 --> 0:25:17.160000
 So that's going to be user input, because
 it is a variable, we can just

0:25:17.160000 --> 0:25:18.600000
 parse it in here.

0:25:18.600000 --> 0:25:26.220000
 And then we would specify ENT,
 ENT underscore quotes.

0:25:26.220000 --> 0:25:32.120000
 And then we would specify the character
 encoding schema, in this case,

0:25:32.120000 --> 0:25:38.240000
 UTF-8. So UTF-8, just to ensure
 that this standardization.

0:25:38.240000 --> 0:25:42.160000
 And then from this point on, we would
 just need to replace what is rendered

0:25:42.160000 --> 0:25:48.480000
 or processed by the browser as the whatever
 value stored in the sanitized

0:25:48.480000 --> 0:25:54.400000
 input variable. So we'll just change
 this to sanitized input.

0:25:54.400000 --> 0:25:58.060000
 And now, we'll just write the changes.

0:25:58.060000 --> 0:26:00.640000
 So I'll just say, right.

0:26:00.640000 --> 0:26:04.020000
 And I'll now reload the page.

0:26:04.020000 --> 0:26:08.640000
 And now you can see that that same JavaScript
 code is displayed as intended

0:26:08.640000 --> 0:26:11.200000
 and is not processed by the browser.

0:26:11.200000 --> 0:26:15.180000
 So it's not processed literally
 because it has been encoded.

0:26:15.180000 --> 0:26:19.520000
 So that means that whatever input is
 coming from the GET request, will

0:26:19.520000 --> 0:26:28.400000
 be if it includes any characters or
 symbols from the HTML language, or

0:26:28.400000 --> 0:26:34.020000
 the HTML syntax, it will not be treated
 as HTML or even JavaScript.

0:26:34.020000 --> 0:26:39.640000
 It will be essentially encoded and displayed
 on the web page, you know,

0:26:39.640000 --> 0:26:44.420000
 as part of the actual output and
 not be executed by the browser.

0:26:44.420000 --> 0:26:45.780000
 So it'll just be rendered.

0:26:45.780000 --> 0:26:48.360000
 So again, now, now it's
 working correctly.

0:26:48.360000 --> 0:26:51.720000
 So input equals Alexis,
 and that's working now.

0:26:51.720000 --> 0:26:54.020000
 And if I now say one, that'll still work.


0:26:54.020000 --> 0:26:59.960000
 But if I try and even use a basic HTML
 tag like strong or even H one,

0:26:59.960000 --> 0:27:02.160000
 that will not work at all as well.

0:27:02.160000 --> 0:27:06.700000
 So H one, like so, you can see
 it just displays it back.

0:27:06.700000 --> 0:27:08.840000
 So this is how to protect
 the web application.

0:27:08.840000 --> 0:27:13.220000
 And again, from the perspective of
 the web app pen tester, you always

0:27:13.220000 --> 0:27:19.940000
 want to look for application inputs,
 and then analyze how the input is

0:27:19.940000 --> 0:27:24.560000
 being processed, if there
 is any encoding going on.

0:27:24.560000 --> 0:27:30.440000
 So in terms of this basic web application
 and the PHP, the inclusion of

0:27:30.440000 --> 0:27:34.540000
 PHP here, you may be wondering
 what's this segment here.

0:27:34.540000 --> 0:27:40.800000
 Well, HTML special chars is
 essentially native to PHP.

0:27:40.800000 --> 0:27:46.060000
 And what this does, this is a particular
 PHP function that is used for

0:27:46.060000 --> 0:27:49.740000
 HTML encoding. And the way
 it works is very simple.

0:27:49.740000 --> 0:27:53.480000
 It just converts the special characters
 in a string to the corresponding

0:27:53.480000 --> 0:27:58.620000
 HTML entity. So it's essentially performing
 the HTML encoding automatically.

0:27:58.620000 --> 0:28:01.460000
 And you already know what
 HTML entities are.

0:28:01.460000 --> 0:28:05.100000
 So it's pretty self-explanatory,
 what's going on.

0:28:05.100000 --> 0:28:11.420000
 And as I said, this is an example of
 how, you know, of how dangerous the

0:28:11.420000 --> 0:28:15.080000
 lack of encoding can be, because you know,
 you may have thought to yourself,

0:28:15.080000 --> 0:28:16.720000
 well, this doesn't look that dangerous.

0:28:16.720000 --> 0:28:21.540000
 But you know, the inclusion of the script
 tag makes things very interesting,

0:28:21.540000 --> 0:28:26.040000
 because without encoding, it's immediately
 going to be processed as JavaScript.

0:28:26.040000 --> 0:28:30.000000
 And as you know, JavaScript is processed
 by the browser or on the client

0:28:30.000000 --> 0:28:35.440000
 side. So you're now starting to understand
 how encoding plays into the

0:28:35.440000 --> 0:28:40.260000
 functionality of web applications, and
 more so what to look out for when

0:28:40.260000 --> 0:28:43.860000
 you are performing a web application
 penetration test, or when you are,

0:28:43.860000 --> 0:28:47.140000
 you know, performing a web
 application security test.

0:28:47.140000 --> 0:28:50.560000
 With that being said, that is going to
 conclude the practical demonstration

0:28:50.560000 --> 0:28:52.700000
 side of this video.

0:28:52.700000 --> 0:28:57.180000
 All right, so that is HTML
 encoding in a nutshell.

0:28:57.180000 --> 0:29:00.380000
 Hopefully, you're now starting to see
 how everything connects with regards

0:29:00.380000 --> 0:29:03.820000
 to the functionality of web applications.


0:29:03.820000 --> 0:29:07.760000
 Of course, I didn't want to give you
 such a complex demo, but I did anyway

0:29:07.760000 --> 0:29:13.080000
 that, you know, essentially explains
 where all the role encoding plays,

0:29:13.080000 --> 0:29:17.800000
 again, not even taking into account
 the transmission of, you know, files

0:29:17.800000 --> 0:29:24.780000
 or data, but more so just how encoding
 or the role encoding plays in user

0:29:24.780000 --> 0:29:29.880000
 input, and even in the, you
 know, or input sanitization.

0:29:29.880000 --> 0:29:33.900000
 So we've gotten a little bit ahead of
 ourselves within this course with

0:29:33.900000 --> 0:29:37.220000
 regards to where we currently
 are or the section we're in.

0:29:37.220000 --> 0:29:41.120000
 But regardless, it'll again help clarify
 the next section of the scores

0:29:41.120000 --> 0:29:43.740000
 that focuses on filtering.

0:29:43.740000 --> 0:29:47.060000
 With that being said, in the next video,
 we're going to turn our attention

0:29:47.060000 --> 0:29:52.080000
 to URL encoding, which is again important,
 but even simpler to understand.

0:29:52.080000 --> 0:29:56.520000
 And again, we'll utilize a a demo
 to help make things clear.

0:29:56.520000 --> 0:29:58.500000
 With that being said,
 thank you very much.

0:29:58.500000 --> 0:30:01.020000
 And I'll be seeing you in the next video.