Welcome to the third and last part of World Wide Web
fundamental session. In this last part. We
will discuss what happens behind the scenes since you type a website address
into your browser's address bar until the content gets
rendered on the screen. We will focus
the World Wide Web architecture clients server.
And the workflow. We will then look to the
HTTP protocol in detail and close the session with
a brief overview of core web Technologies.
Using the World Wide Web requires three major components clients
web browser, smartphones wearables cars,
but with Internet of Things Advance any
connected device, you can come up with servers, a
bunch of remote computers running different software pieces that
together are responsible to listen and satisfy client requests
and the communication Channel, where client-server conversation
happens.
Let's consider. Our client is a web browser. We type
the others and what then. Well first
the browser needs to translate the website address, for example, Code
Red Dot, ec-council dot-org into an IP address.
The IP address is required to open a communication Channel
between the client and the right server. You can think
of this as a Yellow Pages search. This translation is
done, clearing special servers called DNS or domain name
servers. There are plenty of them, but one doesn't know
how to translate every website address.
When that happens, then it will ask another DNS server
until it gets a response which is in turn return
to our clients. After that. Our client
is ready to dial in the right server to request a page. You've typed
into the browser's address bar, all these within a
few milliseconds and behind the scene, but there's a
lot more only after accepting the client called the client and
server start talking HTTP to each other.
The client says, I want Code Red Dot, easy console,
dot orc home page. The server rates this
message and does whatever it needs to return the page to the client.
Meanwhile, the client is waiting when
the server is ready to return codes. Reds home page, then
it sends the response saying everything was okay with your
request HTML below to get the complete code.
Reds homepage, several requests and responses may be required, whether
other resources are required, is
a decision made by the client while processing the first and
subsequent responses. The
HTTP protocol is like a grammar establishing. How words
should be composed together to form meaningful sentences. The
HTTP protocol establishes, two main sections
for both requests and responses Heather's and
body separated by an empty line. In
this case. The body is empty. Meaning that client has no content to
send to the server, get is the HTTP request
method. Also known as verb, there are several methods
with different meanings when the client has information to
send to the server.
For instance to submit a form. Then the web browser, using
the post method in the link below. You'll
find a list with HTTP methods and what they are
aimed. For the forward slash means the homepage or
servers main resource. If you're looking for
cold-read login page, then this becomes / account,
slash login as you may expect. HTTP
has evolved since it was first proposed by Sir.
Tim berners-lee back in 1991. One
is the protocol version of this message. The
First HTTP version was 0.9 then 1.0 1.1.
And now there's http2, I
recommend you to research the differences, especially those
introduced by http2 nowadays. A
single server can host hundreds or even thousands of
websites. So the client has to explicitly, say, what
website it wants to page from. This is what the
host header is for. There are several standard Heather's and
all of them. Follow the host. Other format Heather
name, followed by a colon and then, Heather.
Value the HTTP. Request method is an exception, HTTP
responses have the same format as requests. They
also have Heather's Fault by an empty line, and then the
content if any the first other in
the response is special, as in the request and
it is called status. Heather. It includes the protocol version
HTTP, 1.1 and the status code
200 and the correspondent message. Okay.
Again, there's a list of
standard status codes and messages that.
Should know about and you'll find them in the link below the
content type. Header is used to indicate the media type of
the body. In this case. The server is returning HTML, but
there are several other formats like jpeg or PNG
for graphics mp3 for audio or even
Json and XML for datak changing. This
header provides some guidance to the client so that it knows how
it should handle the response for the
sake of completeness. Let's talk about post requests as
said before the HTTP post.
Third is used when the client wants to send content to the server. It
has the exact same structure we discussed before. First
the Heather's followed by an empty line. And then the
request body. Let's keep the request and host Heather,
since we have already discussed them in great detail. The
content-type request header tells the server. What type
of data is actually being sent. In this case. We're
sending data in the xw, w w for
URL. Encoded format looking to
the request body. We will understand how this format.
Works variable name user followed by an
equal sign. And then the variable value John to
send multiple variables. We should repeat this pattern and
concatenate everything together. Using a percent as
a separator. When a variable value has special
characters, then the value has to be URL encoded.
Exactly what happened with the path? Variable
value percentage to 6 corresponds to
an ampersand character, which we saw before has a special
meaning as variable separator, please.
Note that encoding is different from encryption. Your
passwords are not encrypted when sent to the server as
part of a standard HTTP post request, even when
you're using HTTP, https is
in fact, HTTP over TLS or SSL. The
word over is very important. Meaning
that what is encrypted is the communication channel, the
protocol Remains the hold plain HTTP as
described until now.
The content length, header indicates the size of
the entity body in B. We should have 30 characters in
the request body. There's a lot more
about HTTP, you should know, but it is out of scope. What
we have discussed until now is a good starting point
to help you understand, most of the web application vulnerabilities out
there. I strongly recommend you to read more about the
HTTP protocol. Let us now briefly discuss World
Wide Web core, Technologies HTML
stands for
Hypertext markup language and it is used to
describe documents to be displayed in a web browser. Let's
have a look. How on a sample HTML page.
What we have here is a simple text file. With some
HTML enclosed within angle brackets. We have
tag names. Each tag name has a special meaning in
the browser knows what to do with them to render a page. For
example, H1 H2 and
H3 are having sex and they should appear on
the screen. We different font sizes.
Let's have a look here.
They are our headings H1 H2 and
H3 from top to bottom.
Nowadays webpages are far more complex than simple, text and
HTML has several other elements. Let's add
some to our page so that we can welcome visitors.
We have just added an input, text field and the button with
the say hi label. Let's see how they look like
in the browser.
We have both elements on the screen and input field
where we can type our name and the button.
The button does nothing by default, but we will fix it later
first. Let's see how to add some color to our page.
CSS stands for cascading style sheets. It is a
style sheet language used for describing the presentation of a document written
in a markup language like HTML. Let's see
how to use it.
First, we will need to create a new style sheet file.
We all save it as Green, Dot CSS, then
we will need to link it to our HTML page.
To paint the word red in red. We will
enclose it within a span tag with glass red.
Then we will need to go back to our style sheet and write
the class definition.
In this case, we want elements with glass red to have the
red color.
Let's now see how it looks like in the browser.
Now, just the buttons behavior is missing for
that. We will need some JavaScript.
JavaScript is a programming language. That enables interactive
web pages. The vast majority of websites use
it for client-side page behavior, and all major
web browsers have a dedicated JavaScript engine to execute
it.
Again, we will create a new file.
This time, we'll call it main.js.
This simple JavaScript function gets the value typed in
the input field and then shows a model saying hello to
our guests.
Using the script tag. We load the JavaScript file into our HTML page.
Then using the one click attribute in the button tag, we
can bind the say hi function. We have just written.
Let's now play with our button.
We're done with the World Wide Web fundamentals. You
now have the basic knowledge of all web application building
blocks. Remember that. There's a lot more about all
these topics in the next session. We will jump into the WASP
top 10 with our first risk injection flaws. See
you there.