Browser/Server

Communication

by Ayesha Nazir Chaudhary

Introduction to
Browser/Server
Communication
Browser/Server communication is a fundamental concept in web engineering,
encompassing the processes and protocols that enable interaction between a
client (browser) and the server. It involves various mechanisms for data
exchange, security, and real-time updates.
Understanding the Client-Server Model

Client Server Communication

The client refers to the end-user
system (such as a web browser)
that requests and consumes
resources from the server. It
initiates communication by
sending requests for web
content.
The server houses and manages
web resources. It responds to
client requests by sending back
the requested data, typically
including HTML, CSS,
JavaScript, and media files.
The client-server model forms
the foundation of web
architecture, enabling seamless
communication and data transfer
between web clients and servers.
HTTP Protocol and Its Role in
Communication
1 Stateless Protocol
HTTP operates as a stateless protocol, meaning that each request from the client to the server
is independent. The server does not retain any information about previous requests,
enhancing scalability.

Since the server doesn't need to store information about the client's state
between requests, it can handle a large number of clients concurrently
without the burden of maintaining session information.
Data Exchange

HTTP enables the exchange of various types of data, including text, images, videos, and other media, contributing
to the dynamic and interactive nature of the web.
Request-Response Cycle

It follows a request-response cycle, where the client sends a request to the server, and the server responds with the
requested resources along with an appropriate status code.
lets explore example.com
• GET requests a specific resource in its entiret
• POST adds content, messages, or data to a new page under an existing web resource
• PUT directly modifies an existing web resource or creates a new URI if need be
• DELETE gets rid of a specified resource
• PATCH partially modifies a web resource
Request Methods and Status Codes
GET Requests data from a specified resource

POST Submits data to be processed to a specified

resource

200 OK Indicates that the request has succeeded

404 Not Found Indicates that the requested resource is not found
http messages
https://www.w3schools.com/tags/ref_httpmess
ages.asp
http vs https
what if?
Security: HTTPS is a secure version of
HTTP. It uses encryption protocols such as
SSL (Secure Sockets Layer) or its successor,
TLS (Transport Layer Security), to encrypt
the data transmitted between the client and
server. This encryption helps protect the
confidentiality and integrity of the
information.
so check before adding your bank account
credentials is it an http or https
URL Structure and Parameters
Uniform Resource Locator (URL)
URLs specify addresses for various
resources on the web, allowing clients to
locate and request specific content from
servers.
Parameters
Parameters within URLs enable clients to
send additional information to the server,
facilitating dynamic content generation and
personalized experiences.
Cookies and Session Management
1 Cookies
Cookies are small pieces of data stored in the client's browser. They are used for tracking,
authenticating, and storing user preferences.

2 Session Management
Session management involves the creation and maintenance of user sessions, allowing servers to
keep track of user interactions and login states.
cookies are a mechanism for storing small amounts of data on the client side,
while session management involves maintaining the state of a user's
interaction with a web application on the server side. Cookies are often used
as part of session management to associate a client with a specific session on
the server.
enough for today:)
json:
JSON stands for "JavaScript Object Notation," and it's a lightweight data interchange format. In easy terms, JSON
is a way to organize and structure data so that it can be easily shared between programs.

Data Format: JSON is a text-based format for representing structured data. It looks a lot like the way objects
and arrays are written in JavaScript.
Key-Value Pairs: Data in JSON is organized into key-value pairs. Each pair consists of a key (a string) and a
value. The key and value are separated by a colon, and pairs are separated by commas.

3. Example:
4. { "name": "John",
5. "age": 25,
6. "city": "Exampleville" }
why json?
Web APIs (Application Programming Interfaces): JSON is a popular format for exchanging data between web
servers and web browsers. Many web APIs, including those provided by popular platforms like Twitter, GitHub,
and Google, use JSON as the data interchange format.

Human-Readable Format:JSON is easy for humans to read and write. Its syntax is simple and straightforward,
making it accessible for both developers and non-developers.

Lightweight and Efficient: JSON has a minimalistic structure, which makes it lightweight. This simplicity
contributes to efficient data transmission and processing, especially in scenarios where bandwidth and speed are
important considerations.
AJAX and Asynchronous Communication

Asynchronous JavaScript (AJAX)

AJAX enables the exchange of data between the client and server without requiring a full page refresh, leading
to faster and more dynamic web experiences.
Cross-Origin Resource Sharing (CORS)

Security Measures Access Controls

CORS is a security feature that controls how web It allows servers to specify who can access its
pages can interact with resources from different resources, enhancing data protection and
origins, mitigating cross-site request forgery preventing unauthorized cross-origin requests.
(CSRF) and other vulnerabilities.
Imagine you're on a website, let's call it SiteA.com, and you want to make a request to get some information from
another website, say SiteB.com. Normally, web browsers have a rule called the "same-origin policy," which means
a web page can only make requests to the same domain it came from.

Requesting Data from Another Site: If a web page on SiteA.com tries to fetch data directly from SiteB.com,
the browser might block it. CORS is like a set of rules that helps the browser decide whether it's okay for
SiteA.com to make that request to SiteB.com.

CORS Headers: SiteB.com needs to tell the browser that it's okay for SiteA.com to access its resources. It
does this by including specific information, called CORS headers, in its responses to requests. These headers
say things like, "Hey, SiteA.com is allowed to use my stuff."

In simple terms, CORS is like a security agreement between websites. It allows them to share information safely
and helps prevent unauthorized access to data across different websites.
Best Practices for Secure Communication

3 1
Encryption Authentication
Utilize strong encryption algorithms to protect data Implement robust authentication mechanisms to verify
during transmission and storage. the identity of users and servers.

2 4
Access Control Regular Audits
Employ strict access controls to regulate resource Conduct regular security audits to identify and address
permissions and prevent unauthorized access. potential vulnerabilities in the communication
processes.