官方链接

https://www.youtube.com/watch?v=Aa_FAA3v22g&t=1s

Task1 Putting It All Together 将所有内容整合在一起

图片版

文字版

Putting It All Together
将所有内容整合在一起

From the previous modules, you'll have learned that quite a lot of things go on behind the scenes when you request a webpage in your browser.

从前面的模块中，你应该已经了解到，当你在浏览器中请求网页时，背后会发生很多事情。

To summarise, when you request a website, your computer needs to know the server's IP address it needs to talk to; for this, it uses DNS. Your computer then talks to the web server using a special set of commands called the HTTP protocol; the webserver then returns HTML, JavaScript, CSS, Images, etc., which your browser then uses to correctly format and display the website to you.
总结一下，当你请求一个网站时，你的计算机需要知道它需要与之通信的服务器的 IP 地址；为此，它使用 DNS。然后，你的计算机使用一组特殊的命令 (称为 HTTP 协议) 与 Web 服务器通信；Web 服务器随后返回 HTML、JavaScript、CSS、图像等，你的浏览器随后使用这些命令正确地格式化并向你显示网站。

There are also a few other components that help the web run more efficiently and provide extra features.

还有一些其他组件可以帮助 Web 更高效地运行，并提供额外的功能。

问题

答案

点击一下就行

Task2 Other Components 其他组件

图片版

文字版

Load Balancers负载均衡器

When a website's traffic starts getting quite large or is running an application that needs to have high availability, one web server might no longer do the job. Load balancers provide two main features, ensuring high traffic websites can handle the load and providing a failover if a server becomes unresponsive.
当网站的流量开始变得相当大或运行需要高可用性的应用程序时，单个 Web 服务器可能不再能完成这项工作。负载均衡器提供两个主要功能，确保高流量网站能够处理负载，并在服务器变得无响应时提供故障转移。

When you request a website with a load balancer, the load balancer will receive your request first and then forward it to one of the multiple servers behind it. The load balancer uses different algorithms to help it decide which server is best to deal with the request. A couple of examples of these algorithms are round-robin, which sends it to each server in turn, or weighted, which checks how many requests a server is currently dealing with and sends it to the least busy server.
当你使用负载均衡器请求一个网站时，负载均衡器首先会收到你的请求，然后将其转发给它背后的多个服务器之一。负载均衡器使用不同的算法来帮助它决定哪个服务器最适合处理请求。这些算法的一些例子是轮询，它依次将请求发送给每个服务器；或者是加权，它检查一个服务器当前正在处理的请求数量，并将其发送给最不忙的服务器。

Load balancers also perform periodic checks with each server to ensure they are running correctly; this is called a health check. If a server doesn't respond appropriately or doesn't respond, the load balancer will stop sending traffic until it responds appropriately again.
负载均衡器还会对每台服务器进行定期检查，以确保它们正常运行；这称为运行状况检查。如果服务器没有适当响应或没有响应，负载均衡器将停止发送流量，直到它再次适当响应。

CDN (Content Delivery Networks)CDN (内容分发网络)

A CDN can be an excellent resource for cutting down traffic to a busy website. It allows you to host static files from your website, such as JavaScript, CSS, Images, Videos, and host them across thousands of servers all over the world. When a user requests one of the hosted files, the CDN works out where the nearest server is physically located and sends the request there instead of potentially the other side of the world.

CDN 可以是减少繁忙网站流量的绝佳资源。它允许你托管网站的静态文件，如 JavaScript、CSS、图像、视频，并将它们托管在全球数千台服务器上。当用户请求其中一个托管文件时，CDN 会计算出最近的服务器的物理位置，并将请求发送到那里，而不是潜在的世界另一端。

Databases
数据库

Often websites will need a way of storing information for their users. Webservers can communicate with databases to store and recall data from them. Databases can range from just a simple plain text file up to complex clusters of multiple servers providing speed and resilience. You'll come across some common databases: MySQL, MSSQL, MongoDB, Postgres, and more; each has its specific features.
网站通常需要一种为用户存储信息的方式。Web 服务器可以与数据库通信，以存储和调用数据。数据库可以从简单的纯文本文件到复杂的多个服务器集群，提供速度和弹性。你会遇到一些常见的数据库：MySQL、MSSQL、MongoDB、Postgres 等，每个都有其独特的特性。

WAF (Web Application Firewall)WAF (Web 应用层防火墙)

A WAF sits between your web request and the web server; its primary purpose is to protect the webserver from hacking or denial of service attacks. It analyses the web requests for common attack techniques, whether the request is from a real browser rather than a bot. It also checks if an excessive amount of web requests are being sent by utilising something called rate limiting, which will only allow a certain amount of requests from an IP per second. If a request is deemed a potential attack, it will be dropped and never sent to the webserver.
WAF 位于你的 Web 请求和 Web 服务器之间；它的主要目的是保护 Web 服务器免受黑客攻击或拒绝服务攻击。它分析 Web 请求以了解常见的攻击技术，包括请求是否来自真实浏览器而非机器人。它还会检查是否使用所谓的速率限制来发送过多的 Web 请求，这种限制每秒只允许来自一定数量的 IP 的请求。如果一个请求被认为是潜在的攻击，它将被丢弃，并且永远不会发送到 Web 服务器。

问题

答案

Task3 How Web Servers WorkWeb 服务器如何工作

图片版

文字版

How Web servers work.Web 服务器是如何工作的。

What is a Web Server?
什么是 Web 服务器？

A web server is a software that listens for incoming connections and then utilises the HTTP protocol to deliver web content to its clients. The most common web server software you'll come across is Apache, Nginx, IIS and NodeJS. A Web server delivers files from what's called its root directory, which is defined in the software settings. For example, Nginx and Apache share the same default location of /var/www/html in Linux operating systems, and IIS uses C:\inetpub\wwwroot for the Windows operating systems. So, for example, if you requested the file http://www.example.com/picture.jpg, it would send the file /var/www/html/picture.jpg from its local hard drive.
Web 服务器是一种软件，它会监听传入的连接，然后使用 HTTP 协议将 Web 内容传递给客户端。你会遇到的最常见的 Web 服务器软件是 Apache、Nginx、IIS 和 NodeJS。Web 服务器从其根目录 (root directory) 传递文件，该目录在软件设置中定义。例如，Nginx 和 Apache 在 Linux 操作系统中共享相同的默认位置 /var/www/html, 而 IIS 在 Windows 操作系统中使用 C:inetpubwwwroot。因此，例如，如果你请求文件 http://www.example.com/picture.jpg, 它会从其本地硬盘驱动器发送文件 /var/www/html/picture.jpg。

Virtual Hosts虚拟主机

Web servers can host multiple websites with different domain names; to achieve this, they use virtual hosts. The web server software checks the hostname being requested from the HTTP headers and matches that against its virtual hosts (virtual hosts are just text-based configuration files). If it finds a match, the correct website will be provided. If no match is found, the default website will be provided instead.
Web 服务器可以托管具有不同域名的多个网站；为了实现这一点，它们使用虚拟主机。Web 服务器软件会检查 HTTP 首部请求的主机名，并将其与其虚拟主机进行匹配 (虚拟主机只是基于文本的配置文件)。如果找到匹配，就会提供正确的网站。如果没有找到匹配，就会提供默认网站。

Virtual Hosts can have their root directory mapped to different locations on the hard drive. For example, one.com being mapped to /var/www/website_one, and two.com being mapped to /var/www/website_two
虚拟主机可以将其根目录映射到硬盘驱动器上的不同位置。例如，one.com 映射到 /var/www/website_one,two.com 映射到 /var/www/web site_two。

There's no limit to the number of different websites you can host on a web server.
你可以在一个 Web 服务器上托管的不同网站数量没有限制。

Static Vs Dynamic Content静态内容与动态内容

Static content, as the name suggests, is content that never changes. Common examples of this are pictures, javascript, CSS, etc., but can also include HTML that never changes. Furthermore, these are files that are directly served from the webserver with no changes made to them.
静态内容，顾名思义，是永远不变的内容。常见的例子包括图片、javascript、CSS 等，但也可以包括永远不变的 HTML。此外，这些文件是直接从 Web 服务器提供的，不需要对其进行任何修改。

Dynamic content, on the other hand, is content that could change with different requests. Take, for example, a blog. On the homepage of the blog, it will show you the latest entries. If a new entry is created, the home page is then updated with the latest entry, or a second example might be a search page on a blog. Depending on what word you search, different results will be displayed.
另一方面，动态内容是指可能随着不同请求而变化的内容。以一个博客为例。在博客的主页上，它会显示最新条目。如果创建了一个新条目，主页就会更新为最新条目，或者第二个例子可能是博客的搜索页面。根据你搜索的词，将显示不同的结果。

These changes to what you end up seeing are done in what is called the Backend with the use of programming and scripting languages. It's called the Backend because what is being done is all done behind the scenes. You can't view the websites' HTML source and see what's happening in the Backend, while the HTML is the result of the processing from the Backend. Everything you see in your browser is called the Frontend.
这些对你最终看到的内容的修改是在所谓的后端中使用编程和脚本语言完成的。它之所以被称为后端，是因为所有正在进行的操作都是在幕后进行的。你无法查看网站的 HTML 源代码，也无法看到后端中发生的事情，而 HTML 是后端处理的结果。你在浏览器中看到的所有内容都被称为前端。

Scripting and Backend Languages脚本语言和后端语言

There's not much of a limit to what a backend language can achieve, and these are what make a website interactive to the user. Some examples of these languages (in no particular order :p) are
后端语言可以实现的功能并没有太多限制，这些是使网站与用户交互的因素。这些语言的一些例子 (不按特定顺序：p) 如下：PHP, Python, Ruby, NodeJS, Perl and many more. These languages can interact with databases, call external services, process data from the user, and so much more. A very basic
、Python、Ruby、NodeJS、Perl 等。这些语言可以与数据库交互、调用外部服务、处理用户数据等。一个非常基本的PHP example of this would be if you requested the website
例如，如果你请求网站http://example.com/index.php?name=adamHttp://example.com/index.php?name=adam

If index.php was built like this:
如果 index.php 是这样构建的：

<html><body>Hello <?php echo $_GET["name"]; ?></body></html>

It would output the following to the client:
它会向客户端输出以下内容：

<html><body>Hello adam</body></html>

You'll notice that the client doesn't see any PHP code because it's on the Backend. This interactivity opens up a lot more security issues for web applications that haven't been created securely, as you learn in further modules.
你会注意到，客户端看不到任何 PHP 代码，因为它位于后端。这种交互性为那些尚未安全创建的 Web 应用程序带来了更多安全问题，你将在后续模块中学习。

问题

答案

Task4 Quiz 小测验

图片版

文字版

The Quiz
小测验

Click the "View Site" button on the right. Using everything you've learnt from the other modules, drag and drop the tiles into the correct order of how a request to a website works to reveal the flag.
点击右侧的 “查看网站” 按钮。使用您从其他模块中学到的所有知识，按照向网站发出请求以显示标志的正确顺序拖放磁贴。

Note: When placing a tile in the correct position, it will highlight in green. When a tile is in the wrong spot, it will highlight in red. Make sure not to refresh the page, as it will reset the tiles all to blank again!
注意：当将方块放置在正确位置时，它将以绿色突出显示。当方块放置错误位置时，它将以红色突出显示。请确保不要刷新页面，因为它会将所有方块重置为空白！

问题

答案

理解

所以访问网页的大概流程是这样的（用文字叙述）

1 在网页上搜索网站

2 通过ip地址来检查本地的缓存

3 检查你的递归DNS服务器以获取地址

4 查询跟服务器以查找权威的DNS服务器

5 权威DNS服务器建议网站的ip地址

6 请求通过web应用程序防火墙

7 请求通过负载均衡器

8 连接到端口为80或443的web服务器

9 web服务器接收GET请求

10 web应用程序和数据库通信

11 您的浏览器将HTML渲染为可查看到的网站

以下是访问网页的专业化流程描述

用户发起请求
用户在浏览器地址栏输入目标URL（统一资源定位符）并回车，或通过搜索引擎导航至目标网站。
本地DNS缓存查询
浏览器首先检查本地DNS缓存（包括操作系统缓存及浏览器缓存），若存在有效域名解析记录（域名→IP映射），则直接使用该IP地址，跳过后续DNS解析步骤。
递归DNS服务器查询
若本地无缓存，客户端向配置的递归DNS服务器（Local DNS）发起查询请求。递归DNS服务器检查自身缓存，若有记录则返回IP；若无则代表客户端进行全球DNS层级查询。
根域名与权威DNS服务器定位
递归DNS服务器从根域名服务器开始迭代查询，依次获取顶级域（如.com）、二级域（如example.com）的权威DNS服务器地址，最终定位到目标域名的权威DNS服务器。
权威DNS服务器响应解析记录
权威DNS服务器返回目标域名的解析记录（A记录或CNAME记录），包含其托管服务器的IP地址。递归DNS服务器缓存该记录并返回至客户端。
请求经过安全防护层
客户端向目标IP发送的请求首先经过Web应用防火墙（WAF），进行安全策略检测（如SQL注入/XSS攻击防护），过滤恶意流量。
负载均衡器路由分发
合法请求抵达负载均衡器（如LVS、Nginx）。负载均衡器依据预设算法（轮询、最小连接数等）将请求分发至后端多台Web服务器中的一台，确保集群高可用。
与Web服务器建立连接
客户端与目标Web服务器通过TCP三次握手建立连接。HTTP协议默认使用端口80，HTTPS（TLS加密）使用端口443。
Web服务器处理请求
Web服务器（如Apache、Nginx）接收HTTP GET请求，解析请求头/请求路径，定位静态资源或转发动态请求至应用服务器（如Tomcat、Node.js）。
应用层与数据库交互
动态请求由Web应用程序（如PHP/Python程序）执行业务逻辑，包括查询/更新数据库（如MySQL、Redis），生成动态内容（如用户数据、实时信息）。
客户端渲染与呈现
浏览器接收响应（HTML/CSS/JS），执行以下流程：