Welcome to the Web Application Fundamentals series. Before we can learn how to hack web applications, we need to understand how they work, so across these posts we’ll go over the basics of web apps, how they’re built, and how they function.
“Web applications” and “web browsers” are terms we will use all the time in this series, so let’s stop for a second and think about what they mean. In this post, we’ll break it down with a quick refresher. What exactly is a web application? How does a web browser work? And why does understanding the relationship between them matter? Let’s get started.
The Web has been around for more than 40 years, but it was not always as you know it today. A few decades ago, before gaining mainstream popularity, the Web was almost an insignificant technology used only by a handful of universities and military organisations. The first web applications were quite simple, but due to their widespread adoption, the early 2000s saw a shift to more and more complex web applications. Nowadays, they are an essential asset to our society. We use web applications for almost any imaginable purpose: to enrich our social life, to manage our finances, and even to vote for the leaders. But what exactly is a web application?
What is a web application?
Simply put, web applications are applications accessible through the web that generates web pages dynamically, often based on user interactions. Basically, when you use your web browser, you are likely interacting with a web application. They are the most common way to make information and services available on the Internet.
And they are great for a number of reasons.
Availability
First, web applications are available 24/7, and portability is the best word to describe them. All you need is a web browser and an Internet connection, and you are ready to go. That simple, you can access thousands of domains and businesses from any device, regardless of your operating system. That’s awesome, right?
Easy to Maintain
They are easy to maintain from both a consumer and a business perspective. Web applications are stored on servers. Once you have changed the web application code on your server, those changes will be available in the very next second to all your visitors.
Reduce business costs
Web applications give businesses the ability to increase efficiency while reducing costs. That’s why they are the first choice for businesses willing to promote their services online.
Complexity
Nowadays, web applications can get incredibly complex in order to satisfy the needs of users.
Web application vs website. What’s the difference?
The terms web application and website refers to the same thing: a program that runs on a web browser. However, there is a difference between them. A website is a collection of static pages, while a web application consists of dynamic pages that allow the user to interact with the page (e.g., sign in, post a comment, etc.). Too abstract? Let’s have a look at their architecture to get a better picture.
The above diagram illustrates the basic architecture of a website. As you can see, the workflow is pretty simple: your web browser requests a static page from the web server. If the file exists, the web server responds with a success message and displays the content. Otherwise, if the file cannot be fetched, an error is returned (e.g., 404 Not found).
Figure 2 shows a more complex architecture. Not only the number of the components has changed, but the entire workflow seems different. And indeed, it is different.
As we said previously, web applications generate pages on the fly, based on user input. To achieve this, they use HTML files that contain placeholders instead of actual data (templates). When a user sends an HTTP request, the server interprets the request (1) and forwards it to the web application (2). Next, web application fetches the appropriate data from the database, fills the placeholders in the HTML files (3), and returns the newly generated HTML file to the user (4).
What is a web browser?
Web applications use a client-server architecture where the browser is the client, and the application’s servers are the server.
The browser’s job is to intermediate the communication between the user and web application. It translates user requests into a “language” understood by the server and forward messages back-and-forth based on user interactions.
Neither web server nor web client can achieve their purpose independently. Without a web server, the browser would have nothing to show you, while without the browser, a web server would not be able to serve you its content.
Note
You probably use your browser to view other documents, too. For example, PDFs or images. So are these web pages? No. We use the term web page only to describe HTML files. Anything else is simply a document.
How do web applications work?
Even though we already covered this process in the “Web application vs website” section, we mainly focused on what happens at a micro level.
Now, let’s take a look at how web applications work from a holistic perspective. The best way to understand this process is by example, so let’s suppose you want to visit google.com in your browser.
- First, you type google.com in the address bar and hit enter.
- Your web browser verifies if google.com is a valid domain name and initiates a connection with the web server.
- The web browser sends your request to Google’s web server.
- Google’s web server verifies your request and returns the requested information (this can be a page or some data) to your web browser.
- Now, you can see Google’s home page in your browser.
Of course, this is an oversimplified explanation. There are many other processes behind the scenes, but we’ll discuss them in a later post in this series.
Note
Want to know the process to its smallest detail, including physical keyboard actions, the OS interrupts, and how your data actually travels to the web server? Check out this fantastic write-up: An attempt to answer the age old interview question “What happens when you type google.com into your browser and press enter?”
Conclusion
The evolution of web applications has influenced how businesses are run nowadays. Since they handle data of millions of users, web applications must be secure. But in order to identify their weaknesses, you must have a comprehensive understanding of how they work, and how they don’t. In the next posts in this series, we’ll explore the architectures, technologies, and protocols web applications are built on. Next up: what a server actually is, and why the word gets used for two different things.