(Web安全与防御通俗基础二) http架构分析--让网页“跑起

一 文件访问和网络访问

我们所制作的简易网页(我的叫demo1.html)，可以通过鼠标右键->打开方式->使用浏览器打开(我使用的Edge浏览器)。可以看到，虽然显示的依然是正确的网页格式，但是，浏览器里已经给我们显示出来，是以的方式打开。

文件格式打开网页

可以有另一种方式，当我在浏览器中直接输入http://127.0.0.1:8023/demo1.html后，就可以打开网页。打开的当然是与上述同一个网页文档。

http方式打开网页

1.1 以文件方式和以http形式去打开网页，有什么不同？

简单的html页面，使用两种方式打开。就电脑使用者自身而言，感觉不出不同。但如果你的网页 以文件形式打开，那么，它就没“跑在网络上”。我们制作网页的目的，就是为了让别人看见。怎么让别人看见？当然是通过网络，但肯定不是通过某些聊天工具、视频软件分享文档去让别人看见，如果我网站有1T，那还能把1T的内容都发过去吗？还要不要隐私和保密了？
所以，网页以文件的形式，则仅能在自己电脑上使用；而通过网络，则可以进行共享，让别人看见。
我们把跑在网络上，可以让别人浏览的一组网页(当然还有其他东西)，叫做网站、web站点、站点或者网络服务

1.2 网络服务是如何提供的，又是如何被访问的？

我在其他类目的文章中，对这个过程进行过阐述，这里不妨再次简单说明。值得说明的是，此处所做出的说明，与真实情况相去甚远，只能作为概要性的、通俗的理解。

网络的交互

我们以访问百度为例。我们个人的手机，以及百度(想象成一台电脑)，都是网络上隔空相望的两台设备，所有在网络上运行的设备，都需要有一个唯一性的标识，就是IP地址。我们假定极简后的情况下，个人手机的IP地址是192.168.0.10而百度大电脑的IP是192.168.0.123。百度为我们提供了很多不同的服务，比如文库、百度百科、百度知道等等。这些服务所提供的功能是绝对不同的，那么我们可以认为他们都是一个独立的软件。也就是说，有三个不同的软件，运行在同一个电脑上，都需要对外提供服务。那么，如果我想要访问“文库”的服务，应该如何找到它呢？就像是如果教室里坐的都是无名氏，我应该如何找到某个特定的同学呢？我们自然而然的可以想到，我们可以先使用IP地址找到百度大电脑，再通过某种方式找到这个应用。而这里所说的“某种方式”，就是端口。每个应用可以“监听”一个端口，当我通过IP找到百度大电脑后，可以通过端口定位到具体的APP，访问它的服务。
这是基于IP协议的网络通讯的通俗描述。

1.3 我是如何让网页跑在网络上的

在不进行任何其他附加操作的情况下，你是无法让网页跑在网络上的。为什么？以及我是做了什么才让网页跑起来的呢？
类比上面1.2中的描述，我们的网页，以及个人的电脑，可以类比描述中的百度大电脑。我们的网页是服务的提供者，所以想让网页跑在网络上，网页必须具有:

1. 监听端口
2. 处理网络请求

的能力。然而网页本身是不具备这种能力的，它只是一个脚本、一个文档，自己的运行都需要依托于浏览器，哪有能力监听电脑的什么端口。所以，我们需要一个有能力者，来帮忙。

能力者

能力者是运行在个人电脑上一个软件，它有能力监听发向本电脑8023端口(或者其他端口)的所有网络请求，可以读取电脑上的所有文件。当你需要通过网络访问电脑demo1.html时，它会将demo1.html以文件的形式进行读取，之后通过网路向你回馈。这里这个能力者，我们一般叫做web服务器应用，这里是指的一个软件，而非一台电脑。通过这个软件，我们电脑上的html网页就具有了在网络上奔跑的能力。

1.3.1 Nginx

下载地址：http://nginx.org/en/download.html

nginx

web服务器应用有很多，这里我使用的软件，叫做Nginx。这是一款轻量级、高性能的服务器，据(W3Techs)统计，截至2023年9月，市场占有率33.8%，排名第二，仅次于Apache。但在高流量(繁忙)网站上，其使用率为41.5%，位居第一，远超过Apache(28.2%)。
Nginx无需安装，压缩包解压后，简单配置一下，即可直接使用。整体的目录结构如下：
其中，第一个黄色文件夹conf里面存放着配置文件，是我们必须要编辑的文件。配置完成后，绿色的nginx.exe双击可以运行。
注意：当已经运行后，再次修改配置文件，需要杀死进程后再次运行软件，或者执行指令nginx -s reload。否则无论点多少遍nginx.exe都不会生效

nginx目录结构

打开conf文件夹下的nginx.conf进行简单快速配置

nginx.conf

其他配置项可以暂时不去管，只看直接端口监听部分:

server {
        listen       8023;
        server_name  localhost;
        location / {
            root D:/html5_code_injection/;
        }
    }

配置是分很多级的，每一级都是用一个{}包裹。

1. 本段代码的最顶级为server,意思是一个web服务，或者你可以理解为一个网络站点，一个网站。其实这个软件可以同时提供多个站点的服务。
2. 向下listen 8023;, 代表这个web服务是通过8023端口向网络提供服务的，也就是说，我这个软件要监听8023端口的网络请求。
3. 继续向下server_name localhost;，这个不特别重要，是指的给你的web服务一个名字。
4. 继续向下，又出来了新的一个级别。这里location是指的当你在浏览器上访问我的网站时，你所输入的地址；/是指的从根目录开始匹配。整个这一级的意思，是当你访问我的网站时，你输入不同的地址，我可以对应到我不同的文件夹里。当然此处只配置了一个映射地址，实际可以通过多个location配置多个映射，现在先不做考虑。就像下图，当我们访问http://127.0.0.1:8023/demo1.html,根目录后的地址是/demo1.html,Nginx会根据我们的配置项，把你对demo1.html网络请求，转变为Nginx对文件D:/html5_code_injection/demo1.html的访问。
   网络请求路径

二 IP和端口以外的东西，TCP/IP 和 http的第一步

上面的文章中，我们说到，让网页跑在网络上的两组必备数字，一个是IP，一个是端口。但Nginx Web应用服务所做的，远非直接基于IP和端口的无脑信息交互，IP和端口只是给你提供了一个网络连接的通道，在这个通道里面，你可以做自由的信息交互。但你并不一定就能基于这个通道获取到页面了。这个通道是TCP/IP协议给你的。
下面的图，是使用TCP/IP协议进行通讯的过程情况。都是同一个软件，我打开了两次。右侧红字标的，它监听了一个端口(8080)，充当服务端(TCP Server)。左侧蓝字标的，它连接了服务端的8080端口，充当客户端(TCP Client)。可以看到，它其实可以算作聊天工具了，可以随意收发字母。这其实就是TCP/IP通道给予我们的能力--随意的信息交换。这也是我们网络的基础。

tcp通讯

在这个基础上，我是怎么通过网络拿到网页的呢，直接使用这个工具，是否能拿到网页呢？回顾我们从浏览器上看到网页时，是直接在浏览器上输入了http://127.0.0.1:8023/demo1.html。那么我们尝试以下步骤：

1. 使用上面的软件，连接网页的8023端口
2. 向服务器发送/demo1.html
   结果就向下面这张图，我们的网站对我们的请求是有返回的。，仔细观察返回内容，可以发现，与我们写的demo1.html源码并不一样。说明，其实Nginx 服务器应用并没有正确执行我们的请求。这是正常的，因为我们发起的，并不是合法的请求。
   直接请求网页

demo1.html部分源码

如何发起合法的请求？尝试如下过程：

1. 依然是使用上面的软件，连接网页的8023端口
2. 向服务器发送的内容有变化，改为：

   GET /demo1.html HTTP/1.1\r\nHost: 127.0.0.1:8023\r\n\r\n
   

下图中，左侧为demo1.html的源码，右侧为发送上述内容后，服务器的返回。因为有汉字，会造成乱码。但比较后，你可以发现他们是正确的内容。

http请求返回