All language subtitles for 6. Creating Login Page - Adding Form Tag

Now before we can use this website there is one more thing that you want to make sure that it's done

properly.

So I'm going to come in here on the input.

I'm going to right click it and I'm going to click on inspect element this will show me the code that's

used basically the same old code that we used to see when we open the text editor.

But when I select the input and click inspect element it'll show me the code that's responsible for

rendering this input.

So right here as you can see I have an input tag and if I go on it it highlights the input that's being

displayed in the web page so that's cool.

And what we need to make sure that it exists and the web page is a forum tag.

So if we want to make sure that these inputs the username the password on the logon button are all wrapped

in a form tag.

So if we look in here to show you the hierarchy of the tags in the page and if you literally just keep

going up you want to see.

You should see something called form in here.

Now as you can see I don't see any of that and that's a problem.

So if you did this if you right click your input and click on inspect element and seen that the inputs

are being wrapped in a form in a form tag then you don't need to do what I'm going to do but I'm only

going to do the next steps.

Now I'm going to manually add the forum tag in my web page because it'll make it so much easier for

us to capture the username and read it using a simple sniffer so.

Well I'm going to do right now is I'm going to write click my index again.

I'm going to open it with Genie like we did before and we can also do the same thing that we just did

just to confirm to see if we have a form or not.

I'm just going to go to the start of the document.

I'm going to go on search find and I'm just going to look for a form toxo open the tag and just type

in form.

Now if I hit enter as you can see it says that there is no such thing called form in the web page therefore

that's a problem for me.

Again if you have a form tag then skip this video.

You don't need to do it.

I'm only going to do it because I don't have a form tag so I'm going to manually added.

So it's very easy for me in the future to sniff the username and password and see it through all the

packets now.

Like I said the forum tag needs to wrap the username and password import and logon button so it needs

to be placed before this import right here.

So to look for the import you are going to look for an input tag.

So I'm just going to put in put in here

and I'm going to zoom in a little bit.

And as you can see we have you can see that we have a username here.

I'm just going to hit enter to bring it down.

So we have the user name.

This is what's been displayed on screen.

And then we have the input which is basically the text box that the people enter their username that's

in here.

Now we also need to look for the password input.

So again I'm just going to click on next to go to find the next input in the in the text.

And as you can see we see the password here so this is literally the password the text that you see

on the page.

And then it's followed by the input tag right here.

Now again this is the text box where users enter their password.

The last thing that we want to look for so we already have the user name we have the password.

The last thing that we want to look for is this button the logon button.

So again I'm going to put my mouse here before the input the password the input going to do.

I'm going to type in here Logan

and again as you can see we have the log in text that stuffs the users are seen here and notice in here

that they're actually not using a log in button.

This is literally just a text.

And if you analyze the hasty mail more you'll see that that they're submitting the form using javascript.

And I'm going to modify that in a minute as well.

So I'm just going to bring this down so it's easier for us to see.

And as you can see this is the log in.

This is the end of it.

Usually when you see forwards slash something means this is the end of that tag.

So this is the end of the in that we see.

This is the luggin of a container that contains the logon.

And this is just more code in here.

So I'm just going to hit a number of new lines just so that we have our code separated so the code that

we're interested in is right here.

And as you can see this consists of the username text the username import the password text the password

input and as you can see at the end we have the logon that the users press to literally log in and submit

the username and password so the whole idea the whole thing the whole reason why I'm doing this.

The inputs in here are not wrapped in a form tag.

And this is what I'm going to do.

So I'm going to manually add for I'm going to specify the method that the data will be sent.

And we're going to send this using POST.

This will make it easy for us to see it in Wireshark or in any sniffer later on.

And the action this is basically the web page that the data should be sent to.

Usually if you're actually programming a web application you want this to be sent to a program that

will analyze the username and password and validate them.

But in my case I don't care where it goes.

All I want is I want this data to be sent over post so I can sniff it using my sniffer.

So I'm literally just going to send it back to the same web page that we're in which is indexed so takes

him out.

So I'm going to put a forward slash index Dode HMO and we're done.

And as you can see now when I close the tag it automatically added this for me.

This is again like I said this is the close of detox.

This is the end of the tag.

That's the way TMI is for every open tag.

It should be closed at the end.

So I'm going to do I'm just going to copy this or cut it and I'm just going to put it after my input

so I have my luggage put in here.

And I'm just going to put that here at the end.

Literally after that so I'm just going to make this prettier.

Put that in here just so that you get the idea.

And I'm just going to go over this again.

So we already had all this code in here and the web page and all I wanted to do is I wanted the data

and put it in the username and password text boxes to be sent over hasty ETP use in post so that I can

sniff it easily and see it easily when I sniff the data.

So I did I added a form here.

I said the method to post and I set the action to be sent to the same web page that we're in right now.

And then at the end we closed the form tag.

Now one more time.

If your web page already had the imports wrapped in form in a form tag then you don't need to do this

I'm only doing this because of the way that my target web page was programmed.