Open in app

Sign in

Write

Sign in

How the Internet Works. Browsers. Protocols.

Vlad Antsitovich
15 min readFeb 17, 2022

The Web connects people. It’s a good and bad place. But let’s not philosophize. We live in a world where we can’t imagine our life without the Web. For basic users, it just works and they don’t need to care about it. But for us, developers, it’s what we should understand and know how it works.

Of course, we can’t learn everything about the Web, because it’s huge. However, we can become pretty confident with some topics.

The Internet and the Web

The Internet is a global network comprised of smaller networks that are interconnected using standardized communication protocols. The Internet standards describe a framework known as the Internet protocol suite. This model divides methods into a layered system of protocols.

These layers are as follows:

  1. Application layer (highest) — concerned with the data(URL, type, etc.). This is where HTTP, HTTPS, etc., comes in.
  2. Transport layer — responsible for end-to-end communication over a network.
  3. Network layer — provides data route.

The Web is the only way to access information through the Internet. It’s a system of Internet servers that support specially formatted documents.

More about the Internet and the Web:

Clients and Servers

Client typically refers to the Web browser in the user’s machine or mobile device. It may also refer to another program or device.

Server is a computer program or device that provides a service to another computer program.

Server is just a pice of software that serves web content. It’s not about hardware.

Learn more about Clients and Servers:

Browsers

A Web browser or browser is a program that retrieves and displays pages from the Web, and lets users access further pages through hyperlinks. A browser is the most familiar type of user agent.

Every page on the web that you visit is built using a sequence of separate instructions, one after another. Your browser (Chrome, Firefox, Safari, and so on) is a big actor in translating code into something we can see on our screens and even interact with.

The browser’s main components are:

  1. The user interface: this includes the address bar, back/forward button, bookmarking menu, etc. Every part of the browser display except the window where you see the requested page.
  2. The browser engine: marshals actions between the UI and the rendering engine.
  3. The rendering engine : responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen. Different browsers use different rendering engine.
  4. Networking: for network calls such as HTTP requests, using different implementations for different platform behind a platform-independent interface.
  5. UI backend: used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods.
  6. JavaScript interpreter. Used to parse and execute JavaScript code.
  7. Data storage. This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem.

How does the browser actually render a website

High level flow

It’s a pretty big topic, do for better understanding how browsers work, please, check out More section.

Learn more about browsers:

HTML, CSS, & JavaScript

  • HTML provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript.
  • CSS is used to control presentation, formatting, and layout.
  • JavaScript is used to control the behavior of different elements.

HTML and CSS are actually not technically programming languages; they’re just page structure and style information. But before moving on to JavaScript and other true languages, you need to know the basics of HTML and CSS, as they are on the front end of every web page and application.

Check out CS50 HTML, CSS and JavaScript explanation video.

URL, Origin, Link

URL

URL stands for Uniform Resource Locator. A URL is nothing more than the address of a given unique resource on the Web. In theory, each valid URL points to a unique resource.

A URL is a string that allows you to locate a resource.

Here are some examples of URLs:

https://developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/
https://developer.mozilla.org/en-US/search?q=URL

A URL is composed of different parts, some mandatory and others optional. The most important parts are highlighted on the URL below:

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL

Origin

Web content’s origin is defined by the scheme (protocol), hostname (domain), and port of the URL used to access it. Two objects have the same origin only when the scheme, hostname, and port all match.

Link

Link is an element that is in the form of an electronic document that links to some other place in the same or different document. It is a short form of Hyperlink. So, simply when you click or tap it, they allow you to move to a new location and that location is called a URL.

Learn more about URL, URI, Origin and Link:

Protocols

A protocol is a system of rules that define how data is exchanged within or between computers. Communications between devices require that the devices agree on the format of the data that is being exchanged. The set of rules that defines a format is called a protocol.

When communication happens without protocols involved, it’s inevitable that messages either won’t be interpreted correctly or won’t be understood at all.

More:

OSI Model

The Open Systems Interconnection (OSI) model is a concept for describing the relationship between different layers of network protocols. Officially there are seven layers.

https://www.cloudflare.com/learning/ddos/glossary/open-systems-interconnection-model-osi/

Each layer of the OSI Model handles a specific job and communicates with the layers above and below itself.

In plain English, the OSI provides a standard for different computer systems to be able to communicate with each other.

More:

IP

IP stands for Internet Protocol, which is the set of rules that makes it possible for devices to communicate over the Internet. With billions of people accessing the Internet every day, unique identifiers are necessary to keep track of who is doing what. The Internet Protocol solves this by assigning IP numbers to every device accessing the Internet.

What’s the difference between IPv4 and IPv6?

IPv4 and IPv6 are different versions of the Internet Protocol.

The format for IPv4 addresses is four sets of numbers separated by dots, for example: 74.125.224.72. This is a 32-bit format, which means that it allows for 232, or about 4.3 billion, unique IP addresses, which it turns out is not enough for the amount of devices that are now on the Internet. The need for more IP addresses led to the implementation of IPv6.* IPv6 addresses use a more complex format that utilizes sets of numbers and letters separated by single or double colons, for example: 2607:f860:4005:804::200e.

What’s the difference between static IPs and dynamic IPs?

The limited supply of IPv4 addresses led to the introduction of dynamically assigning IP addresses, which is still a very common practice. Most devices connected to the Internet are assigned temporary IP addresses.

For example, when a home user connects to the Internet on their laptop, that user’s ISP assigns them a temporary IP address from a pool of shared IP addresses. This is known as a dynamic IP address. This is more cost-effective for the ISP than assigning each user a permanent, or static, IP address.

https://www.cloudflare.com/learning/dns/glossary/what-is-my-ip-address/

More:

DNS

The Domain Name System (DNS) protocol is an important part of the web’s infrastructure, serving as the Internet’s phone book: every time you visit a website, your computer performs a DNS lookup. Complex pages often require multiple DNS lookups before they start loading, so your computer may be performing hundreds of lookups a day.

In the world of networking, computers don’t have names like humans, they have numbers 192.168.1.1, that’s how they identify each other.

And for us, it’s not a good way to remember all these numbers. So to fill the communication gap between us and computers we need to introduce some bridge. And at this point, DNS comes to us. DNS stands for Domain Name System. Basically, DNS resolves names to numbers google.com → 142.250.74.142.

More:

TCP/IP

Internet Protocol (IP) is a connectionless protocol, which means that each unit of data is individually addressed and routed from the source device to the target device, and the target does not send an acknowledgement back to the source. That’s where protocols such as the Transmission Control Protocol (TCP) come in.

Transmission Control Protocol (TCP) manage internet connections. It is used in conjunction with IP in order to maintain a connection between the sender and the target and to ensure packet order.

TCP/IP is a suite of communication protocols used to interconnect network devices on the internet. TCP/IP is also used as a communications protocol in a private computer network (an intranet or extranet).

When you type an address such as https://google.com into your browser you are commanding to open a TCP channel with the server and when the server sends you a response it closes the TCP connection.

More:

TLS and SSL

Transport Layer Security (TLS), formerly known as Secure Sockets Layer (SSL), is a protocol used by applications to communicate securely across a network, preventing tampering with and eavesdropping on email, web browsing, messaging, and other protocols. Both SSL and TLS are client / server protocols that ensure communication privacy by using cryptographic protocols to provide security over a network. When a server and client communicate using TLS, it ensures that no third party can eavesdrop or tamper with any message.

The main differences between Secure Socket Layer and Transport Layer Security is that in SSL (Secure Socket Layer), message digest is used to create master secret and it provides the basic security services which are Authentication and confidentiality, while in TLS (Transport Layer Security), pseudo-random function is used to create master secret.

HTTP

HTTP stands for Hypertext Transfer Protocol. It’s the protocol used to transfer data over the web. Hypertext is the content you’re viewing in your web browser. HTTP sends all this information in clear, it’s not encrypted between you and a web server.

HTTP Messages

HTTP messages are how data is exchanged between a server and a client. There are two types of messages: requests sent by the client to trigger an action on the server, and responses, the answer from the server.

Requests and Responses structure (https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages)

HTTP Request methods

  • GET retroeve an existing record.
  • POST create a new record.
  • PUT if the record exists, update else, create a new record.
  • PATCH update part of exists record.
  • DELETE remove record.
  • OPTIONS is essentially a preflight request. Whenever we do something like PUT or DELETE we’re going to need to do OPTIONS request (browsers send this request automatically) to make sure we’re allowed to do these operations.

Learn more about HTTP Requests methods:

HTTP status codes

HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes:

  1. Informational responses (100–199)
  2. Successful responses (200–299)
  3. Redirection messages (300–399)
  4. Client error responses (400–499)
  5. Server error responses (500–599)

HTTP Headers

HTTP Headers let the client and the server pass additional information (metadata) with an HTTP request or response.

Headers can be grouped according to their contexts:

  • Request headers contain more information about the resource to be fetched, or about the client requesting the resource.
  • Response headers hold additional information about the response, like its location or about the server providing it.
  • Representation headers contain information about the body of the resource, like its MIME type, or encoding/compression applied.
  • Payload headers contain representation-independent information about payload data, including content length and the encoding used for transport.

HTTP Cookies

An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to a user’s web browser. The browser may store the cookie and send it back to the same server with later requests.

Content Security Policy

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft, to site defacement, to malware distribution.

The Content-Security-Policy response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.

HTTPS

HTTP clients usually use TCP (Transmission Control Protocol) connections to communicate with servers.

HTTPS where S stands for Secure and that means is that it uses essentially a different protocol that encrypts that transmission to and from the server. HTTPS works similar to HTTP the biggest difference between the two protocols is: with HTTP the data being transferred is not encrypted and therefore the data transfer is not secured, with HTTPS a layer of security is being added using TLS (Transport Layer Security) or SSL (Secure Socket Layer).

The HTTPS protocol has three important additions:

  1. Encryption: At the start of a connection, your browser and a server set session keys to protect data in transit.
  2. Authentication: Users get assurances that they’re truly connecting with the server they requested.
  3. Protection: Data can’t be altered in transit.

Advantages of HTTPS include:

  • Enhanced security. Visitors to your site can exchange data with confidence.
  • Compliance. If your site accepts sensitive information (such as credit card data), your regulatory environment may require you to use HTTPS.
  • Global assistance. If sites with small amounts of sensitive data are protected, their work helps more sensitive sites too. Improved security on every site dissuades hackers from continuing their work.

In simple terms HTTP running over TLS or SSL becomes HTTPS. See diagram below. Security is the main difference between HTTP vs. HTTPS.

Learn more about HTTP:

API

Application Programming Interface: a piece of software that can be used by another piece of software, in order to allow applications to talk to each other.

Jeff Bezos mandated in the early 2000s that Amazon services must expose APIs over the network. This is credited as transforming Amazon from a simple bookstore to the cloud behemoth that is AWS. This pattern is now embraced by tech companies everywhere, allowing teams to access data and innovate at an unprecedented rate.

APIs can be private (for internal use only), partnered (shared with specific partners to provide additional revenue streams), or public (allowing third parties to develop apps that interact with your API to foster innovation).

There are four different ways that APIs can work depending on when and why they were created.

  • SOAP APIs use Simple Object Access Protocol. Client and server exchange messages using XML. This is a less flexible API that was more popular in the past.
  • RPC APIs or Remote Procedure Calls APIs
  • Websocket APIs uses JSON objects to pass data. A WebSocket API supports two-way communication between client apps and the server.
  • REST APIs most popular and flexible APIs found on the web today

More:

REST API

Representational state transfer (REST) is a set of architectural principles attuned to the needs of lightweight web services and mobile applications. It’s not a specification, it’s a set of guidelines, which leaves the implementation of these recommendations to developers.

REST API concepts and examples

REST APIs provide a flexible, lightweight way to integrate applications, and have emerged as the most common method for connecting components in microservices architectures.

A REST API is an API that conforms to the design principles of the REST, or representational state transfer architectural style. An API that follows REST standards is called a RESTful API. For this reason, REST APIs are sometimes referred to RESTful APIs.

REST APIs communicate via HTTP requests to perform standard database functions like creating, reading, updating, and deleting records (also known as CRUD) within a resource.

REST APIs can return messages in a variety of formats: HTML, XML, plain text, and JSON. JSON (JavaScript object notation) is favored as a message format because it can be read by any programming language (despite the name), is human- and machine-readable, and is lightweight. In this way, REST APIs are more flexible and can be easier to set up.

An application is said to be RESTful if it follows 6 architectural guidelines. A RESTful application must have:

  1. A client-server architecture composed of clients, servers, and resources.
  2. Stateless client-server communication, meaning no client content is stored on the server between requests. Information about the session’s state is instead held with the client.
  3. Cacheable data to eliminate the need for some client-server interactions.
  4. A uniform interface between components so that information is transferred in a standardized form instead of specific to an application’s needs. This is described by Roy Fielding, the originator of REST, as “the central feature that distinguishes the REST architectural style from other network-based styles.”
  5. A layered system constraint, where client-server interactions can be mediated by hierarchical layers.
  6. Code on demand, allowing servers to extend the functionality of a client by transferring executable code (though also reducing visibility, making this an optional guideline).

Learn more about API:

CDN

A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. The primary purpose of CDN is to reduce latency, or reduce the delay in communication between websites (servers) and their users (clients).

Learn more about CDN:

CORS

Cross-Origin Resource Sharing (CORS) is the mechanism that allows a website with one origin to request data from a different origin.

When browsers make a request it adds an Origin header to the request method, and if that request goes to a server on the same origin that it’s allowed by a browser with no questions. However, if that request goes to a different origin then it’s known as CORS.

There are two types of CORS request: “simple” requests, and “preflight” requests, and it’s the browser that determines which is used.

When the browser makes a simple request to server the browser adds Origin header to the request, this Origin header contains the origin of the resource seeking to share the other domain’s resources. When sending a response server will add the Access-Control-Allow-Origin header. Its value needs to match the Origin header on the request, if it's a mismatch though a browser will prevent the response data from being shared with the client.

If a request does not meet the criteria for a simple request, the browser will instead make an automatic preflight request using the OPTIONS method. This call is used to determine the exact CORS capabilities of the server, which is in turn used to determine whether or not the intended CORS protocol is understood. If the result of the OPTIONS call dictates that the request cannot be made, the actual request to the server will not be executed.

The solution for CORS “error” lies on the server.

CORS and SOP are something applied by web browsers and do not take effect in other applications. So a Node.js console app would be able to access an API even though it is not from the same origin.

Learn more about CORS:

Apache and NGINX web servers

Learn more about Apache and NGINX:

Web
Web Development
Internet
Browsers
Protocol

--

--

Vlad Antsitovich

Written by Vlad Antsitovich

72 Followers

Software Developer

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams