Web Computing

In AI & DS - By Vipra
1/
Web Computing
 How does a web browser work?

A web browser takes you anywhere on the internet.

The web browser is an application software to explore www
(World Wide Web)
It retrieves information from other parts of the web and displays it
on your desktop or mobile device.
The information is transferred using the Hypertext Transfer
Protocol, which defines how text, images and video are
transmitted on the web.
The first web browser World Wide Web was invented in the year
of 1990 by Tim Berners-Lee. Later, it becomes Nexus.
In the year of 1993, a new browser Mosaic was invented by Mark
Andreessen and their team. It was the first browser to display text
and images at a time on the device screen.
 How does a web browser work?
A web browser helps us find information
anywhere on the internet.
It is installed on the client computer and
requests information from the web server
such a type of working model is called a
client-server model.
The browser receives information through
HTTP protocol. In which transmission of
data is defined.
When the browser received data from the
server, it is rendered in HTML to user-
readable form and, information is displayed
on the device screen.
Browser examples
HTTP Protocol

HTTP stands for HyperText Transfer Protocol.

●

●It is the main way web browsers and servers

communicate to share information on the internet.
HyperText is the type of text that is specially coded
●

with the help of some standard coding language called

HyperText Markup Language (HTML).
HTTP/3 is the latest version of HTTP, which is
●

published in 2022.

6/
Vipra Dave
 HTTP Protocol
● It is a set of rules for sharing data on the World Wide Web (WWW).
●HTTP helps web browsers and servers communicate, allowing
people to access and share information over the internet.
●Web Browsing: Most websites use HTTP, so when you click on a link
or download a file, HTTP is at work.
●Client-Server Model: HTTP works on a request-response system.
Your browser (client) asks for information, and the website’s server
responds with the data.
Application Layer Protocol: HTTP operates within the Internet
●

Protocol Suite, managing how data is transmitted and received.

7/
Vipra Dave
 HTTP Protocol
When we type the URL of website (e.g., www.google.com ). This
●

URL is now sent to the Domain Name Server (DNS).

●DNS first checks records for this URL in their database, and then
DNS will return the IP address to the web browser corresponding to
this URL.
● Now the browser is able to send requests to the actual server.
●After the server sends data to the client, the connection will be
closed.
●If we want something else from the server we should have to re-
establish the connection between the client and the server.

8/
Vipra Dave
HTTP Connection

9/
Vipra Dave
What is an HTTP Request?
●HTTP request is simply termed as the information or data
that is needed by Internet browsers for loading a website.
This is simply known as HTTP Request.
●There is some common information that is generally
present in all HTTP requests. These are mentioned below:
● HTTP Version
● URL
● HTTP Method
● HTTP Request Headers
● HTTP Body

10 /
Vipra Dave
● HTTP Request Headers
●HTTP Request Headers generally store information in the form of
key-value and must be present in each HTTP Request. The use of
this Request Header is to provide core information about the client’s
information, etc.
● HTTP Request Body
●HTTP Request Body simply contains the information that has to be
transferred. HTTP Request has the information or data to be sent to
these browsers.
● HTTP Method
●HTTP Methods are simply HTTP Verb. In spite of being present so
many HTTP Methods, the most common HTTP Methods are HTTP
GET and HTTP POST. These two are generally used in HTTP
cases. In HTTP GET, the information is received in the form of a
website. 11 /
Vipra Dave
What is HTTP Response?
●HTTP Response is simply the answer to what a Server gets
when the request is raised. There are various things contained
in HTTP Response are:
● HTTP Status Code
● HTTP Headers
● HTTP Body

12 /
Vipra Dave
● HTTP Response Headers
●HTTP Response headers are simply like an HTTP
Request where it has that work to send some important
files and data to the HTTP Response Body.

● HTTP Response Body

●HTTP Responses are the responses that are received
successfully upon the request. Generally, it comes under
the requests generated by the web.
●In most cases, the request is to transfer the HTML data
into a webpage.

13 /
Vipra Dave
 HTTP Status Code
HTTP Status Codes are the 3-digit codes that tell the message or simply tell
us about the HTTP Request whether it has been completed or not.
There are simply 5 types of status codes.
●Informational – 1xx - It means the request has been received and the
process is continuing.
●Successful – 2xx - It means the action was successfully received,
understood, and accepted.
●Re-directional – 3xx - It means further action must be taken in order to
complete the request.
●Client-Error – 4xx - It means the request contains incorrect syntax or
cannot be fulfilled.
●Server-Error - 5xx- It means the server failed to fulfill an apparently valid
request. 14 /
Vipra Dave
 HTTP Status Code
Message Description

100 Continue Only a part of the request has been received by the server, but as long as it
has not been rejected, the client should continue with the request.
101 Switching Protocols The server switches protocol.

200 OK The request is OK

201 Created The request is complete, and a new resource is created .
204 No Content The browser should clear the form used for this transaction for additional
input.
301 Moved Permanently The requested page has moved to a new url .
305 Use Proxy The requested URL must be accessed through the proxy mentioned in the
Location header.
400 Bad Request The server did not understand the request.

500 Internal Server Error The request was not completed. The server met an unexpected condition.

504 Gateway Timeout The gateway has timed out.

15 /
Vipra Dave
Features of HTTP:
●Connectionless protocol: HTTP is a connectionless protocol. HTTP
client initiates a request and waits for a response from the server.
●When the server receives the request, the server processes the
request and sends back the response to the HTTP client after which
the client disconnects the connection.
●The connection between client and server exist only during the
current request and response time only.
●Media independent: HTTP protocol is a media independent as data
can be sent as long as both the client and server know how to handle
the data content.
●It is required for both the client and server to specify the content type
in MIME-type header. (Multi-purpose Internet Mail Extensions)

16 /
Vipra Dave
 Features of HTTP:
●Stateless: HTTP is a stateless protocol as both the client and
server know each other only during the current request.
●Due to this nature of the protocol, both the client and server do not
retain the information between various requests of the web pages.
●Cookies in HTTP: An HTTP cookie (web cookie, browser cookie)
is a little piece of data that a server transmits to a user’s web
browser.
●When making subsequent queries, the browser may keep the
cookie and transmit it back to the same server. for example,it is
used, to maintain a user’s login state, and to determine whether two
requests originate from the same browser.

17 /
Vipra Dave
Advantages of HTTP
●Memory usage and CPU usage are low because of fewer
simultaneous connections.
●Since there are few TCP connections hence network
congestion is less.
●Since handshaking is done at the initial connection stage,
then latency is reduced because there is no further need
for handshaking for subsequent requests.
● The error can be reported without closing the connection.
● HTTP allows HTTP pipe-lining of requests or responses.

18 /
Vipra Dave
 Disadvantages of HTTP
●HTTP requires high power to establish communication and
transfer data.
●HTTP is less secure because it does not use any encryption
method like HTTPS and uses TLS to encrypt regular HTTP
requests and responses.
● HTTP is not optimized for cellular phones and it is too gabby.
●HTTP does not offer a genuine exchange of data because it is
less secure.
●The client does not close the connection until it receives complete
data from the server; hence, the server needs to wait for data
completion and cannot be available for other clients during this
time.
19 /
Vipra Dave
DNS – Domain Name System

●Allows you to interact with devices on the Internet without

having to remember long strings of numbers.
●Each computer on the Internet has its own unique address,
known as an IP address, just like every home has a unique
address for sending direct mail. 104.26.10.228 is an IP address
consisting of four sets of numbers extending from 0 to 255
separated by a period.
●It’s not easy having to remember this complicated collection of
numbers every time you want to access a website, which is
where DNS comes in handy.

20 /
Vipra Dave
 facebook.com

DNS 162.241.70.62
google.com
www.tsec.edu
twitter.com
nasa.gov
orkut.com

tsec.edu

21 /
Vipra Dave
 TLD,SLD
●TLDs are divided into two categories: gTLDs (generic top-level domains) and
ccTLDs (country code top-level domains).
Historically, the purpose of a common top-level domain (gTLD) was to inform users
●

of the purpose of the domain name; For example, a.com would be for business
purposes, .org for organization, .edu for education, and .gov for the government.
●And a country code top-level domain (ccTLD) was used for geographic purposes,
such as .ca for Canadian sites, .co.uk for UK sites, and so on. As a result of the high
demand, many new gTLDs have emerged, including.online,.club,.website,.biz, and
many others.

●Second-level domains can only contain a-z 0-9 and hyphens and are limited to 63
characters and TLDs when registering a domain name (may not start or end with
hyphens or contain consecutive hyphens).

22 /
Vipra Dave
Generic Domains
●It defines the registered hosts
according to their generic behavior.
●Each node in a tree defines the
domain name, which is an index to
the DNS database.
●It uses three-character labels, and
these labels describe the
organization type.

23 /
Vipra Dave
● Country Domain
●The format of country domain is same as a generic domain, but
it uses two-character country abbreviations (e.g., us for the
United States) in place of three character organizational
abbreviations.

● Inverse Domain
● The inverse domain is used for mapping an address to a name.
●When the server has received a request from the client, and
the server contains the files of only authorized clients. To
determine whether the client is on the authorized list or not, it
sends a query to the DNS server and ask for mapping an
address to the name.

24 /
Vipra Dave
 Working DNS
●When you request a domain name, your
computer first checks its local cache to see
if you have recently visited the address. If
you haven’t, your computer will send a Recursive DNS Server
request to your recursive DNS server.
●Your ISP will typically provide you with a
recursive DNS server, but you can also use
your own.
●A local cache of recently discovered
Root DNS Server
domain names is also kept on this server. If
a local result is discovered, it is returned to
your computer, and your request is
completed.

●If the request cannot be met locally, a

journey begins with the Internet’s root DNS
server to locate the appropriate response. Authoritative
DNS Server
25 /
Vipra Dave
Root servers act as the DNS backbone of the Internet, leading you to the
●

appropriate top-level domain servers based on your request.

The root server will recognize the .org top-level domain and direct you to the
●

appropriate TLD server for addresses.

●The TLD server keeps track of where to look for authoritative servers that respond
to DNS requests.
Authoritative servers are sometimes referred to as domain nameservers.
●

Multiple nameservers for one domain name are often used as backups in case they
●

go down.
An authoritative DNS server is the server that stores the DNS records for a domain
●

name and where any modifications are made to the DNS records for that domain
name.
●The DNS record is then transmitted to the recursive DNS server, where a local
copy is cached for future queries and later sent back to the originating client making
the request based on the record type.
26 /
Vipra Dave
 TLS – Transport Layer Security
• TLS was derived from a security protocol called Secure Socket Layer (SSL).
TLS ensures that no third party may eavesdrop or tampers with any message.
• TLS is a cryptographic protocol that provides end-to-end security of data sent
between applications over the Internet.
• IT encrypts data sent over the Internet to ensure that eavesdroppers and
hackers are unable to see what you transmit which is particularly useful for
private and sensitive information such as passwords, credit card numbers, and
personal correspondence.
• It should be noted that TLS does not secure data on end systems. It simply
ensures the secure delivery of data over the Internet, avoiding possible
eavesdropping and/or alteration of the content.
• TLS is normally implemented on top of TCP in order to encrypt Application Layer
protocols such as HTTP, FTP, SMTP and IMAP, although it can also be
implemented on UDP, DCCP and SCTP
27 /
Vipra Dave
TLS

Without TLS, sensitive information such as logins,

credit card details and personal details can easily be
gleaned by others, but also browsing habits, e-mail
correspondence, online chats and conferencing calls
can be monitored.
By enabling client and server applications to support
TLS, it ensures that data transmitted between them is
encrypted with secure algorithms and not viewable by
third parties.

28 /
Vipra Dave
 TLS - Benefits
• Encryption: TLS/SSL can help to secure transmitted data
using encryption.
• Interoperability: TLS/SSL works with most web browsers,
including Microsoft Internet Explorer and on most operating
systems and web servers.
• Algorithm flexibility: TLS/SSL provides operations for
authentication mechanism, encryption algorithms and hashing
algorithm that are used during the secure session.
• Ease of Deployment: Many applications TLS/SSL temporarily
on a windows server 2003 operating systems.
• Ease of Use: Because we implement TLS/SSL beneath the
application layer, most of its operations are completely
invisible to client.
 TLS Handshake
• A Transport Layer Security (TLS) connection is established via
handshake.
 Working of TLS:
• The client connect to server (using TCP), and sends number of specifications which
include:

 Version of SSL/TLS.
 which cipher suites, compression method it wants to use.

• The server checks what the highest SSL/TLS version that is supported by them both,
picks a cipher suite from one of the clients option (if it supports one) and optionally
picks a compression method.

• After this the basic setup is done, the server provides its certificate.
• Having verified the certificate and being certain this server really is who he claims to be
(and not a man in the middle), a key is exchanged.

• This can be a public key, “PreMasterSecret” or simply nothing depending upon cipher
suite.

• Both the server and client can now compute the key for symmetric encryption. The
handshake is finished and the two hosts can communicate securely.
Enhanced Security Features:

TLS employs a variety of cryptographic algorithms to provide a secure

communication channel like:
 AES (Advanced Encryption Standard) - symmetric encryption
 asymmetric algorithm RSA
 asymmetric algorithm Diffie-Hellman key exchange.

Additionally, TLS supports various hash functions for message

integrity, such as SHA-256, ensuring that data remains confidential
and unaltered during transit.

Certificate-Based Authentication:
When a client connects to a server, the server presents its digital
certificate, which includes its public key and other identifying
information.
The client verifies the authenticity of the certificate using trusted root
certificates stored locally or provided by a trusted authority, thereby
establishing the server’s identity.
TLS

Forward Secrecy:

TLS supports forward secrecy, a crucial security feature that ensures

that even if an attacker compromises the server’s private key in the
future, they cannot decrypt past communications.
This is achieved by generating ephemeral session keys for each
session, which are not stored and thus cannot be compromised
retroactively.
XML
• XML stands for eXtensible Markup Language
• XML is a markup language much like HTML
• XML was designed to store and transport data
• XML was designed to be self-descriptive
• It has sender information
• It has receiver information
• It has a heading
• It has a message body
• XML is just information wrapped in tags.
XML
XML Does Not Use Predefined Tags
• It has no predefined tags.
• The tags in the example (like <to> and <from>) are not defined in any
XML standard. These tags are "invented" by the author of the XML
document.
• HTML works with predefined tags like <p>, <h1>, <table>, etc.

XML Simplifies Things

• XML simplifies data sharing
• XML simplifies data transport
• XML simplifies platform changes
• XML simplifies data availability

XML stores data in plain text format. This provides a software- and
hardware-independent way of storing, transporting, and sharing data.

XML also makes it easier to expand or upgrade to new operating systems,

new applications, or new browsers, without losing data.

With XML, data can be available to all kinds of "reading machines" like
people, computers, voice machines, news feeds, etc.
XML
XML is Extensible
• Most XML applications will work as expected even if new data is added
(or removed).

An application designed to display the original version of note.xml (<to>

<from> <heading> <body>).

Then a newer version of note.xml with added <date> and <hour>

elements, and a removed <heading>.
The way XML is constructed, older version of the application can still work:
JSON Introduction
• JSON stands for JavaScript Object Notation.
• It is a format for structuring data.
• This format is used by different web applications to communicate
with each other.
• JSON is the replacement of the XML data exchange format in
JSON.
• It is easy to struct the data compare to XML.
• It supports data structures like arrays and objects and the JSON
documents that are rapidly executed on the server.
• It is also a Language-Independent format that is derived
from JavaScript.
• The official media type for the JSON is application/json and to
save those file .json extension.
• JSON Syntax Rules: Data is in name/value pairs and they are
separated by commas. It uses curly brackets to hold the objects
and square brackets to hold the arrays.
JSON Introduction

Features of JSON:
Easy to understand: JSON is easy to read and write.
Format: It is a text-based interchange format. It can store any kind of data in an array of
video, audio, and image anything that you required.
Support: It is light-weighted and supported by almost every language and OS. It has a wide
range of support for the browsers approx each browser supported by JSON.
Dependency: It is an Independent language that is text-based. It is much faster compared to
other text-based structured data.
JSON Introduction
Example:
{
"Courses": [
{
"Name" : "Java Foundation",
"Created by" : “tsec",
"Content" : [ "Java Core", "JSP",
"Servlets", "Collections" ]
},

{
"Name" : "Data Structures",
"also known as" : "Interview Preparation Course",
"Topics" : [ "Trees", "Graphs", "Maps" ]
}
]
}
JSON Introduction

Advantages of JSON:
• JSON stores all the data in an array so data transfer makes easier. That’s why
JSON is the best for sharing data of any size even audio, video, etc.

• Its syntax is very easy to use. Its syntax is very small and light-weighted that’s the
reason that it executes and response in a faster way.

• JSON has a wide range for the browser support compatibility with the operating
systems, it doesn’t require much effort to make it all browser compatible.

• On the server-side parsing the most important part that developers want, if the
parsing will be fast on the server side then the user can get the fast response, so
in this case JSON server-side parsing is the strong point compare tot others.
JSON Introduction
Disadvantages of JSON:
• The main disadvantage for JSON is that there is no error handling in JSON, if
there was a slight mistake in the JSON script then you will not get the structured
data.

• JSON becomes quite dangerous when you used it with some unauthorized
browsers. Like JSON service return a JSON file wrapped in a function call that has
to be executed by the browsers if the browsers are unauthorized then your data
can be hacked.

• JSON has limited supported tools that we can use during JSON development.
DOM – Document Object Model
With the HTML DOM, JavaScript can access and change all the elements of an HTML
document.
When a web page is loaded, the browser creates a Document Object Model of the
page.
The HTML DOM model is constructed as a tree of Objects:
DOM – Document Object Model
The DOM defines a standard for accessing documents:
"The Document Object Model (DOM) is a platform and language-neutral interface
that allows programs and scripts to dynamically access and update the content,
structure, and style of a document."

The DOM standard is separated into 3 different parts:

• Core DOM - standard model for all document types
• XML DOM - standard model for XML documents
• HTML DOM - standard model for HTML documents

With the object model, JavaScript gets all the power it needs to create dynamic
HTML:
• JavaScript can change all the HTML elements in the page
• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the page
• JavaScript can create new HTML events in the page
What is the HTML DOM?
The HTML DOM is a standard object model and programming interface for
HTML. It defines:
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add,
or delete HTML elements.
The HTML DOM defines a standard way for accessing and manipulating
HTML documents. It presents an HTML document as a tree-structure.
The XML DOM defines a standard way for accessing and manipulating XML
documents. It presents an XML document as a tree-structure.
All HTML elements can be accessed through the HTML DOM.
This example changes the value of an HTML element with
id="demo":
Example:
<h1 id="demo">This is a Heading</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello
World!'">Click Me!
</button>