【HTTP协议】HTTP协议初体验,深入浅出网络协议_http协议可以访问服务器文件吗

在这里插入图片描述

前言

本文全文2w字左右阅读完成需要二十分钟左右文章介绍了HTTP和HTTPS以及抓包软件fiddler的基本使用工程了解基本网络协议对以后编程有莫大好处本文不像高校《计算机网络》教程上所头头是道文章以丰富的例子问答形式代码实验来解决问题对于入门的朋友可以值得一看欢迎大家积极提出问题会一一改正的。


一、HTTP是什么

HTTP (全称为 “超文本传输协议”) 是一种应用非常广泛的 应用层协议.

HTTP协议也可以说是前后端交互的桥梁

我们要先搞明白为什么当前我们的网站 / 浏览器,一点击就可以访问一个页面

其实这都是HTTP协议的功劳我们可以看看下面的图

在这里插入图片描述
可以看见用户的浏览器(客户端)发出一个请求 服务器就给出相对的响应

名词介绍
客户端主动发起网络请求的一端
服务器被动接受网络请求的一端
请求客户端给服务器发的数据.
响应服务器给客户端返回的数据

这些操作都是基于 “网络” 来进行的.


协议让传递消息的双方能够对上号就像暗号那样~

HTTP重要的特点: 一发一收的模式

在这插入图片描述

网络编程中除了一发一收之外还有其他的模式场景

多发一收上传大文件
一发多收看直播
多发多收串流~~


二、Fiddler软件抓包

我们如果想看见浏览器和服务器之间的交互数据可以使用浏览器自带的开发工具但是那样数据并不详细

1.下载安装Fiddler

下载地址连接~
在这里插入图片描述

2.关于Fiddler的使用

左侧窗口显示了当前所有的请求是啥
会记录下机器上每个程序和服务器之间的http请求~ 不仅仅记录浏览器的 因为后台还有许多程序
也会访问服务器。

在这里插入图片描述

如何清空Fiddler的窗口

1.选中一条如何按ctrl+a 然后按delete


我们如何去使用这个工具呢?

我们可以试试 百度搜索页
请添加图片描述

在这里插入图片描述
然后我们想看到得发出的HTTP请求 可以先上面的那样~

也可以变成文本 直观的看
详细格式

看HTTP响应也是一样

右下角完整的HTTP响应

在这里插入图片描述


那么为什么Fiddler可以获取这个请求呢
Fiddler之所能够获取这些HTTP请求的详细情况主要是因为此处的Fiddler相当于一个 “代理”程序如下图
在这里插入图片描述


三、HTTP协议格式

1.HTTP的请求格式

  1. 首行

    可以看见这里是HTTPS
    在这里插入图片描述

    那么HTTP和HTTPS有什么区别呢

    HTTPS是HTTP的加强版~当前网站上的很多网站都是HTTPS
    HTTPS和HTTP相比非常相似,只是多了个 “加密层”


    注意如果我们第一次使用发现没有HTTTPS 的可以像下面图片一样设置一下
    在这里插入图片描述
    要勾选上并且按照提示安装证书。


大家来看看首行

GET https://www.baidu.com/ HTTP/1.1

在这里插入图片描述


  1. 协议头(header)
    在这里插入图片描述
    里面都是键值对 结构每一个键值对占一行键和值之间使用空格来分割

  1. 空行
    空行是协议头的结束标记
    在这里插入图片描述

  1. 协议正文Body
    空行后面的部分有的请求有有的没有
    在这里插入图片描述

2.HTTP的响应格式

响应的格式在这里看

在这里插入图片描述

  1. 首行
    在这里插入图片描述

  2. 协议头header
    在这里插入图片描述

  3. 空行

    协议头结束的标记 在这里插入图片描述

  4. 响应正文
    响应的正文往往就是被显示在浏览器上的最常见的响应正文格式就是html在这里插入图片描述
    但是大家看上面是不是看不出来是HTML 因为这里是压缩了我们解压缩一下就可以了
    在这里插入图片描述
    然后打开就看的清楚了
    在这里插入图片描述
    为什么要压缩呢

    压缩之后网络传输的数据量就变少了然后更节省网络


3.HTTP格式总结

使用以下的图来看

在这里插入图片描述


四、HTTP 请求 (Request)

1、认识 URL

  1. URL 基本格式

平时我们俗称的 “网址” 其实就是说的 URL (Uniform Resource Locator 统一资源定位符).

互联网上的每个文件都有一个唯一的URL它包含的信息指出文件的位置以及浏览器应该怎么处理它.

URL 的详细规则由 因特网标准RFC1738 进行了约定.点击查看

最完整的URL如下
> GET https://www.sogou.com/ HTTP/1.1

URL不仅仅是使用在HTTP/HTTPS里面很多协议也可以使用URL
比如JDBC 编程也使用URL只是协议方案名不一样。

登录信息
现在我们很少看见这样的格式了


服务器地址

地址可以是一个IP地址也可以是域名

ip地址:就是描述网络上的一个具体位置

因为ip地址有点长不容易记所以我们大部分时候使用域名


端口

分别是哪一个应用程序

ip地址可以定位到是哪一个主机一个主机上有许多应用程序同时在跑具体把请求交给谁使用端口号来区分
每个程序在访问网络的时候都会关联上一个或者多个端口号~

通过端口号就能区分出当前的请求给谁

平时在上网的时候地址栏里一般看不到端口号不是说没有而是有时候如果端口号不是特殊的那么浏览器会加上默认端口

对于HTTPS的请求浏览器会自动加上443端口 因为一般的HTTPS服务器都是用443

对于HTTP的请求浏览器会自动加上80的端口

一般的HTTP服务器都是用80的端口

当然我们也可以手动的加上其他的端口如果服务器使用的别的端口的话


PATH 路径

dir / index.html

访问该服务器程序上的哪个资源. 比如是要访问哪个html访问哪个图片


查询字符串 QueryString

在这里插入图片描述
一般网址的查询词具体关键的有。

其实这个后面许多也是键值对
大就可以看见搜狗以&作为键值对之间的分割符
以 =作为键和值之间的分隔符。
在这里插入图片描述
这些键值对都是搜狗自己程序员定义的百度也有自己的。


片段标识符

能让我们跳转到哪一部分html里面有 A标签的 #


上面许多内容会省略大家要认识出来常见情况

如果省略域名继续访问当前网站的其他资源
如果省略端口号浏览器自动填充默认端口(80 / 443)
如果是省略带层次的路径 表示访问 /目录
如果省略query String 这个本来就是可选的客户端可以给浏览器传递参数也可以不传递
如果省略片段标识符这个经常没有


URL中的url encode

在浏览器看见的地址我们复制下来回你发现他不一样了
在这里插入图片描述
复制下来
在这里插入图片描述
是不是中文变成其他的了为什么呢

因为queryString 里面如果包含了特殊的符号或者中文符号就需要进行urlencode。

例如 / # ? & 等等

万一querystring 里面也存在特殊符号就可能导致URL格式错误 因此就需要对这些符号进行转义。

对特殊符号的转义叫做urlencode反过来解析叫做urldecode。

这里的转义就是直接取当前的字符/字符串 的内存的16进制 把每个字节前加上一个%

我们看看c++ 的转义:
在这里插入图片描述
C%2B%2B 其实 这里的+ 就是 %2B 在内存的16进制中

大家还有要注意这个的 有的浏览器会自动进行encode有的不会~

关于解析 我们可以去网上找一下urlencode解析


2、认识 “方法” (method)

2.1 什么是方法

HTTP的方法就是请求报文中的首行的第一个部分~~

设计这个HTTP方法协议是希望不同的方法有不同的“语义”
在这里插入图片描述

比如GET是获得从服务器获取资源。

POST传输文件实体作者是希望大家这样使用但是我们现在程序员使用这些方法是‘’非常随心所欲‘’的并不会按照规定的那样。


下面我们来介绍两个常用方法: GET \ POST

2.1.1 介绍GET

在此之前介绍一下HTTP的协议版本 1.01.1以及 2 3但是2和3 版本还没有普及以下介绍的是1.1版本的

  1. 在浏览器中直接输入 URL, 此时浏览器就会发送出一个 GET 请求.

比如打开搜狗的主页
在这里插入图片描述

2.HTML 中的 link, img, script 等标签, 也会触发 GET 请求.

img的scr属性写了一个url浏览器会自动根据img的src构造出一个HTTP的请求

3.还可以使用JS,直接在浏览器前端构造HTTP GET 请求(ajax)

4.各种编程语言只要能够访问网络就可以构造HTTP请求


GET 请求特点

  1. 首行里面的第一个部分是GET

  2. URL里面query string 可以为空也可以不为空
    在这里插入图片描述
    不为空
    在这里插入图片描述
    3.GET 请求里面有很多组header键值对~

  3. GET 请求一般body是空的 GET请求也可以有body但是很少见


注意网上是GET 请求有长度限制这个上限主要是因为URL的长度存在上限还有的把长度标出来了其实这些都是错误的

在这里插入图片描述
RFC这个文档里面约定了很多和网络协议相关的标准


2.1.2 介绍Post

POST请求特点

最常见的场景就是 登录

输入 用户名和密码之后就会产生一个post请求
在这里插入图片描述
特点
1.首行的第一个部分就是post
2.URL后面没有query string (一般都没有个别情况会有)
3.header这里也是有若干的键值对结构
4.body一般不为空这里的具体数据格式由请求header中的Content-Type来描述 Body的具体长度,由请求header中的Content来描述
图片第四行有 。

其实互联网的信息并不是很安全我们访问的各种数据都是在网络上要经过各种的硬件设备进行传输在这些设备上进行“抓包”可以看见具体内容。

我们解决的方案就是“加密”不用明文传输密码而是在客户端这边对密码进行加密以密文进行传输。

类似于你上课叫妹纸中午去干饭你写纸条给她但是有点距离,你又不好意思让其他的同学知道你们之间的小秘密以特殊的字符代替关键字
在这里插入图片描述


2.1.3Get和Post的区别

回答这个问题首先要盖棺定论没有本质上的区别使用Get的场景也可以使用Post
但是在具体使用上,还是存在一些细节上的区别的

  1. 最经典Get习惯上吧客户端的数据通过query String 来传输body部分是空post习惯上把客户端的数据通过body来传输,(query string)是空的 习惯上不是必须更不是百分之百
  2. 语义上的区别Get习惯上用于从服务器获取数据post习惯上客户端给服务器提交数据
  3. Get方法程序员一般情况下程序员会实现成为“幂等”post请求不要求实现幂等请求如果重复被发送了不会产生负面效果

正面影响比如你要去抢一个物品打开页面的时候发送一个请求,这里打开的是否是开始买的状态刷新一次发送一个请求但是这个请求不会影响因为只是是否可以购买 没有其他操作

负面影响现在我进行下单服务器正卡着我不知道是否成功退出又重新下单重复3次问题来了这几个请求会不会产生负面效果到底是一个单还是3个单呢

所以我们Get一般实现幂等重复不会出现影响下单post一般不实现幂等可能会出现问题。也是“标准文档”的建议也不是程序员必须要遵守的
在这里插入图片描述

  1. Get请求可以缓存可以被浏览器保存到收藏夹中但是post不行

对于这个问题网上有些说法也是不准确的

 1. Post比Get更安全
 
 	问因为Get实现登录习惯上是把参数放到queryString 此时浏览器的url显示了用户的用户名和密码这样就感觉不安全post实现登录把参数放在body里此时不显示在浏览器里不就更加安全吗
 	答其实安全和不安全取决于是否加密以及加密算法的强度和你的东西在url还是body里没有啥关系毕竟一抓包都一目了然。

2.传输的数据量比Get的更多~~原因Get的URL上有上限

	答其实RFC标准中明确说了不对URL长度做限制

3.Get只能传输文本数据POST可以传输文本和二进制数据

	答Get完全可以传输二进制数据只要对二进制数据进行urlencode就可以放到url里面了,Get大不了也可以直接把数据放到body


3、其他方法

  • PUT 与 POST 相似只是具有幂等特性一般用于更新
  • DELETE 删除服务器指定资源
  • OPTIONS 返回服务器所支持的请求方法
  • HEAD 类似于GET只不过响应体不返回只返回响应头
  • TRACE 回显服务器端收到的请求测试的时候会用到这个
  • CONNECT 预留暂无使用

了解即可能说出来就可以了


4、认识请求 “报头” (header)

1、Host

在这里插入图片描述

表示请求所对应的服务器的地址地址里面可以是域名也可以是IP也可以是手动指定的端口号有人就会问那host信息在url里面是不是也存在其实网络上存在一种特殊的程序“代理”代理就像海淘可以自己出国也可以找朋友给你买这样就叫代理不方便的时候可以通过这样的情况来代理购买。


2 、Content-Length、 Content-Type

Content-Length表示body的长度单位是字节

Content-Type表示body的格式

如果这个请求是有body的post此时就会同时带上这两个header

如果这个请求没有bodyGet,此时就不会带有这两个参数


2.1、 Content-Type 常见取值

  • application/x-www-form-urlencoded: form 表单提交的数据格式. 此时 body 的格式形如 queryString的格式来组织
title=test&content=hello
  • multipart/form-data: form 表单提交的数据格式(在 form 标签中加上
    enctyped=“multipart/form-data” . 通常用于提交图片/文件. body 格式形如:

Content-Type:multipart/form-data; boundary=----
WebKitFormBoundaryrGKCBY7qhFd3TrwA
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name=“text”
title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name=“file”; filename=“chrome.png”
Content-Type: image/png
PNG … content of chrome.png …
------WebKitFormBoundaryrGKCBY7qhFd3TrwA

  • application/json: 数据为 json 格式. body 格式如下我们抓包会经常遇见这样的

{“username”:“123456789”,“password”:“xxxx”,“code”:“jw7l”,“uuid”:“d110a05ccde64b16
a861fa2bddfdcd15”}

js里的对象也是这样的格式 json格式就是源自于js的对象格式。


3、User-Agent (简称 UA)

表示浏览器/操作系统的属性. 形如

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/91.0.4472.77 Safari/537.36

大概认识一下(Windows NT 10.0; Win64; x64) windows10,64位Chrome/91.0.4472.77 Safari/537.36当前浏览器Chrome 浏览器版本 Safari/537.36

UA是一个非常有用的字段在以前浏览器只可以显示文字图片后面网页丰富了可以显示视频、音频不过并不是全部浏览器都可以正常播放网站开发者可以根据HttP请求的UA来锁定浏览器具体型号开发者就知道能否可以放视频如果能就返回视频如果不能就返回不带视频的页面这样做到了兼容性。

现在的UA不像以前那么有意义但是现在主要是区别请求是移动端还是pc端。

不过现在更主流的做法是采用“响应式布局”在页面css中通过“媒体查询”功能根据屏幕的尺寸自动设置不同的样式来兼容不同的设备。

4、Referer

表示这个页面是从哪个页面跳转过来的. 形如
在这里插入图片描述
如果当前的页面是直接输入url或者是在收藏夹点击链接此时Referer是空的。

如果你百度搜索然后点击网站就会有从哪里来

那么Referer有什么用呢

当我们点击网站广告就会有是从什么搜索引擎过来的这样搜索引擎就可以赚钱结束的时候就可以看看这个搜索引擎带来了网站多少的访问可以和广告主结账统计广告主的统计就根据Referer来统计。

5、Cookie

Cookie 中存储了一个字符串, 这个数据可能是客户端(网页)自行通过 JS 写入的, 也可能来自于服务器(服
务器在 HTTP 响应的 header 中通过 Set-Cookie 字段给浏览器返回数据).
往往可以通过这个字段实现 “身份标识” 的功能.

Cookie里面看起来是一些键值对结构~

键值对之间使用号分割 键值直接使用=分割,Cookie里的键值对表示的含义都是程序员自己自定义的。

cookie机制存在的目的为了能够在浏览器这一段保存程序员自定义的数据。

那么有人会问可不可以把存的数据保存在客户端浏览器所在的主机的硬盘上存个文件

当然是不可以的浏览器为了保证安全性禁止网页中的代码访问主机的硬盘~~(无法在js读写文件)
就让端开发失去了持久化存储的能力但是很有必要
虽然浏览器不让程序员去操作客户端的文件但是也提供了一个cookie这样的机制按照键值对存储来代替直接访问文件这个cookie的内容是浏览器管理的本质也是保存在硬盘会持久化存在。
如果不是浏览器对于访问文件有限制其实就不必要存在cookie 。

如果浏览器可以访问本地文件那么你打开一个不知名的小网站网页直接在给你硬盘写个病毒程序你电脑就挂了。。

在这里插入图片描述

cookie就是浏览器提供一个让程序员在客户端这边持久保存数据的一种机制 至于是什么完全看程序员怎么定义。

  1. cookie是什么

cookie是浏览器提供的一种让程序员在本地存储数据的能力。

  1. cookie里面存的是什么

cookie里存的是键值对格式的数据键值对之间使用分割键和值之间使用=分割。

  1. cookie从哪里来?程序员如何往cookie里存东西

在这里插入图片描述
每一个这个就是键值对
在这里插入图片描述

cookie在浏览器这边是按照域名维度来分别存储的。
baidu.com 有一组cookie是百度程序员定义的百度网站使用的
sogo.com 有一组cookie是搜狗程序员定义的搜狗网站使用的

在抓包我们可以看见这样的响应set-cookie header头

和cookie对应起来了
在这里插入图片描述

浏览器里存储的cookie都是从服务器的响应报头里面的set-cookie字段中来的每个set-cookie字段包含一个cookie的键值对浏览器拿到这个响应之后就会吧set-cookie中的内容给保存到本地. set - cookie就是程序员在服务器代码中填写构造。

  1. Cookie要到哪里去谁来使用

cookie字段会在后续的请求中把浏览器本地存储的这些键值对再发回给服务器服务器端的代码来使用cookie
在这里插入图片描述
来自服务器返回服务器。

大家可以试试把网站的登录cookie删除然后重新登陆要重新输入密码。

到今天2022年cookie是唯一浏览器本地存储的机制吗并不是的

浏览器提供了其他的本地存储机制

  1. LocalStrorage这个是HTML5开始浏览器提供的一种新的本地存储的机制只用这个完成可以代替cookie。
  2. indexDB这个是更新的一个东西浏览器提供了一组类似于SQL这样的接口可以在浏览器本地以类似数据库的方式存储数据

Cookie的缺陷:每次请求都要把该域名下所有的cookie通过HTTP请求传给服务器。这就注定Cookie的存储是有限的相比之下新机制没有这个问题。

五、HTTP 响应详解

1、认识 “状态码” (status code)

状态码表示访问一个页面的结果. (是访问成功, 还是失败, 还是其他的一些情况…)

表白之后妹纸会给你返回一个结果

  1. 好的我愿意
  2. 你是个好人
    在这里插入图片描述

以下为常见的状态码.状态码是一个3位数的整数

200 OK

这是一个最常见的状态码, 表示访问成功

这里是引用

404 Not Found
没有找到资源.

这里是引用

403 Forbidden
表示访问被拒绝. 有的页面通常需要用户具有一定的权限才能访问(登陆后才能访问). 如果用户没有登陆
直接访问, 就容易见到 403

这里是引用

405 Method Not Allowed
前面我们已经学习了 HTTP 中所支持的方法, 有 GET, POST, PUT, DELETE 等.
但是对方的服务器不一定都支持所有的方法(或者不允许用户使用一些其他的方法).

500 Internal Server Error
服务器出现内部错误. 一般是服务器的代码执行过程中遇到了一些特殊情况(服务器异常崩溃)会产生这个
状态码.
咱们平时常用的网站很少会出现 500 (但是偶尔也能看到)

504 Gateway Timeout
当服务器负载比较大的时候, 服务器处理单条请求的时候消耗的时间就会很长, 就可能会导致出现超时的
情况

这种情况在双十一等 “秒杀” 场景中容易出现, 平时不太容易见到.

302 Move temporarily
临时重定向

理解 "重定向"
就相当于手机号码中的 “呼叫转移” 功能.
比如我本来的手机号是 186-1234-5678, 后来换了个新号码 135-1234-5678, 那么不需要让我的朋
友知道新号码,
只要我去办理一个呼叫转移业务, 其他人拨打 186-1234-5678 , 就会自动转移到 135-1234-5678

在登陆页面中经常会见到 302. 用于实现登陆成功后自动跳转到主页.
响应报文的 header 部分会包含一个 Location 字段, 表示要跳转到哪个页面

例如: 码云的登陆页面 https://gitee.com/login
抓包看到的响应结果:
HTTP/1.1 302 Found
Date: Thu, 10 Jun 2021 06:49:26 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
Keep-Alive: timeout=60
Server: nginx
X-XSS-Protection: 1; mode=block

301 Moved Permanently
永久重定向. 当浏览器收到这种响应时, 后续的请求都会被自动改成新的地址.
301 也是通过 Location 字段来表示要重定向到的新地址


状态码小结

在这里插入图片描述

2、认识响应 “报头” (header)

3、Content-Type

响应中的 Content-Type 常见取值有以下几种:

  • text/html : body 数据格式是 HTML
  • text/css : body 数据格式是 CSS
  • application/javascript : body 数据格式是 JavaScript
  • application/json : body 数据格式是 JSON

4、通过 form 表单构造 HTTP 请求

form (表单) 是 HTML 中的一个常用标签. 可以用于给服务器发送 GET 或者 POST 请求.

不要把 form 拼写成 from!!

4.1、form 发送 GET 请求

form 的重要参数:

  • action: 构造的 HTTP 请求的 URL 是什么.
  • method: 构造的 HTTP 请求的 方法 是 GET 还是 POST (form 只支持 GET 和 POST)input 的重要参数:
  • type: 表示输入框的类型. text 表示文本, password 表示密码, submit 表示提交按钮.
  • name: 表示构造出的 HTTP 请求的 query string 的 key. query string 的 value 就是输入框的用户输入的内容.
  • value: input 标签的值. 对于 type 为 submit 类型来说, value 就对应了按钮上显示的文本
<form action="http://sogo.com/" method="GET">
    <input type="text" name="userId">
    <input type="text" name="classId">
    <input type="submit" value="提交">
</form>

页面展示的效果:
在这里插入图片描述
在输入框随便填写数据,点击 “提交”, 此时就会构造出 HTTP 请求并发送出去.
在这里插入图片描述

  • form 的 action 属性对应 HTTP 请求的 URL
  • form 的 method 属性对应 HTTP 请求的方法
  • input 的 name 属性对应 query string 的 key userid
  • input 的 内容 对应 query string 的 value123

4.2、form 发送 POST 请求

代码把get变成post

 <form action="http://sogou.com/" method="post">
        <input type="text" name="userId">
        <input type="text" name="classId">
        <input type="submit" value="提交">
    </form>

在这里插入图片描述

body里面的数据get在querystring里面 post在body里也是输入框的值
在这里插入图片描述
这个内型决定了我们是以键值对形式来进行
在这里插入图片描述

4.3、通过 ajax 构造 HTTP 请求

从前端角度, 除了浏览器地址栏能构造 GET 请求, form 表单能构造 GET 和 POST 之外, 还可以通过 ajax
的方式来构造 HTTP 请求. 并且功能更强大

ajax 全称 Asynchronous Javascript And XML, 是 2005 年提出的一种 JavaScript 给服务器发送
HTTP 请求的方式.
特点是可以不需要 刷新页面/页面跳转 就能进行数据传输.

同步当你去买2个东西你必须买完第一个东西才可以去买第二个
异步当你去买面又想去买包子你可以先叫老板娘做着自己去隔壁包子铺买包子

在 JavaScript 中可以通过 ajax 的方式构造 HTTP 请求

先引入
在这里插入图片描述
可以引入jquery cdn源
在这里插入图片描述
cdn也是互联网中的一种基础设施这是一组服务器 服务器是由运营商提供存在的目的是为了加快用户的访问速度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script>
        //$是一个变量名 是jquery定义好的一个对象 jquery里面的各种方法都是这个对象的成员
        $.ajax({
            url:'http://42.192.83.143:8080/AjaxMockServer/info',
            method:'GET',
            success:function(data,status){
            	//data响应的body
                //status响应的状态
                console.log(data);
            }
        });
    </script>
    

</body>
</html>

图解
在这里插入图片描述
那么有没有可能ajax可以来实现爬虫呢

这个是不可以因为ajax里面有限制是不可以跨域的
因为ajax是通过js代码触发的js代码又是在一个html里面访问这个html就有一个域名ajax构造也有一个域名就有2个不一样的域名了必须要域名1和域名2一样才可以实现如果要写一个抢票系统此时域名1和域名2 12306不在同域不可以跨重复自己的服务器打开跨域。

不仅仅是ajax和form可以构造请求任意编程语言只要是能访问的网络就可以构造HTTP请求java也可以这个以后在写文章说


六、认识HTTPS

1、HTTPS 是什么

现在互联网上越来越多的网站都是HTTPS的也是基于HTTP报文格式都一样在HTTP的基础上引入了一个加密层SSL\TLS.

HTTPS 也是一个应用层协议. 是在 HTTP 协议的基础上引入了一个加密层.
HTTP 协议内容都是按照文本的方式明文传输的. 这就导致在传输过程中出现一些被篡改的情况.

臭名昭著的 "运营商劫持"
下载一个 天天动听
未被劫持的效果, 点击下载按钮, 就会弹出天天动听的下载链接.
在这里插入图片描述
已被劫持的效果, 点击下载按钮, 就会弹出 QQ 浏览器的下载链接
在这里插入图片描述
由于我们通过网络传输的任何的数据包都会经过运营商的网络设备(路由器, 交换机等), 那么运营商的网
络设备就可以解析出你传输的数据内容, 并进行篡改.
点击 “下载按钮”, 其实就是在给服务器发送了一个 HTTP 请求, 获取到的 HTTP 响应其实就包含了该 APP
的下载链接. 运营商劫持之后, 就发现这个请求是要下载天天动听, 那么就自动的把交给用户的响应给篡
改成 “QQ浏览器” 的下载地址了

在这里插入图片描述

那么我们要怎么保证安全呢HTTP不安全的根本原因在于“明文传输”要想安全就得加密


2、“加密” 是什么

加密就是把 明文 (要传输的信息)进行一系列变换, 生成 密文 .
解密就是把 密文 再进行一系列变换, 还原成 明文 .
在这个加密和解密的过程中, 往往需要一个或者多个中间的数据, 辅助进行这个过程, 这样的数据称为 密
钥 (正确发音 yue 四声, 不过大家平时都读作 yao 四声) .


3、HTTPS 的工作过程

既然要保证数据安全, 就需要进行 “加密”.

网络传输中不再直接传输明文了, 而是加密之后的 “密文”.

加密的方式有很多, 但是整体可以分成两大类: 对称加密 和 非对称加密


3.1引入对称加密

对称加密其实就是通过同一个 “密钥” , 把明文加密成密文, 并且也能把密文解密成明文.加密使用的密钥和解密使用的密钥是同一个

一个简单的对称加密, 按位异或
假设 明文 a = 1234, 密钥 key = 8888
则加密 a ^ key 得到的密文 b 为 9834.
然后针对密文 9834 再次进行运算 b ^ key, 得到的就是原来的明文 1234.
(对于字符串的对称加密也是同理, 每一个字符都可以表示成一个数字)
当然, 按位异或只是最简单的对称加密. HTTPS 中并不是使用按位异或.

在这里插入图片描述

引入对称加密之后, 即使数据被截获, 由于黑客不知道密钥是啥, 因此就无法进行解密, 也就不知道请求的
真实内容是啥了.

但事情没这么简单. 服务器同一时刻其实是给很多客户端提供服务的. 这么多客户端, 每个人用的秘钥都
必须是不同的(如果是相同那密钥就太容易扩散了, 黑客就也能拿到了). 因此服务器就需要维护每个客户
端和每个密钥之间的关联关系, 这也是个很麻烦的事情

在这里插入图片描述
比较理想的做法, 就是能在客户端和服务器建立连接的时候, 双方协商确定这次的密钥是啥

在这里插入图片描述
但是如果直接把密钥明文传输, 那么黑客也就能获得密钥了~~ 此时后续的加密操作就形同虚设了.

因此密钥的传输也必须加密传输!
但是要想对密钥进行对称加密, 就仍然需要先协商确定一个 “密钥的密钥”. 这就成了 “先有鸡还是先有蛋”
的问题了. 此时密钥的传输再用对称加密就行不通了.
就需要引入非对称加密.


3.1非对称加密

非对称加密要用到两个密钥, 一个叫做 “公钥”, 一个叫做 “私钥”.
使用公钥来加密私钥来解密
也可以私钥加密公钥解密

  1. 首先服务器自己生成一个公钥私钥密钥对公钥公开出去谁都可以获取黑客也可以拿到私钥自己保存不让别人知道
  2. 客户端拿到公钥之后使用公钥对对称秘钥进行加密把加密后的密钥密文通过网络传输给服务器
  3. 黑客可以获取到这里的密文但是黑客只有公钥没有私钥公钥加密私钥解密黑客拿到也无法解密只有服务器自己有私钥才可以解密这样就安全到达服务器了
  4. 后续客户端之间就可以使用对称秘钥钥进行加密解密了

如下图
在这里插入图片描述
另一个重要的问题
已经引入非对称加密了为什么还要有对称加密对称加密的成本对机器资源的消耗是远远低于非对称加密的


那么接下来问题又来了:
客户端如何获取到公钥?
客户端如何确定这个公钥不是黑客伪造的?

在这里插入图片描述

4、引入证书

在客户端和服务器刚一建立连接的时候, 服务器给客户端返回一个 证书.
这个证书包含了刚才的公钥, 也包含了网站的身份信息.

这个证书就好比人的身份证, 作为这个网站的身份标识. 搭建一个 HTTPS 网站要在CA机构先申请
一个证书. (类似于去公安局办个身份证).

这个 证书 可以理解成是一个

  • 证书发布机构
  • 证书有效期
  • 公钥
  • 证书所有者
  • 签名

当客户端获取到这个证书之后, 会对证书进行校验(防止证书是伪造的).

  • 判定证书的有效期是否过期
  • 判定证书的发布机构是否受信任(操作系统中已内置的受信任的证书发布机构).
  • 验证证书是否被篡改: 从系统中拿到该证书发布机构的公钥, 对签名解密, 得到一个 hash 值(称为数据摘要), 设为 hash1. 然后计算整个证书的 hash 值, 设为 hash2. 对比 hash1 和 hash2 是否相等. 如果相等, 则说明证书是没有被篡改过的.

5、完整流程

HTTPS工作流程

  1. 对称加密用于传输的数据进行加密请求,响应需要有一个对称密钥客户端生成要告知服务器
  2. 非对称加密服务器提供一个公钥服务器自己持有一个私钥客户端使用公钥对对称密钥加密密文传输给服务器
  3. 中间人攻击黑客可能劫持了服务器给客户端的公钥用自己生成的公钥代替从而导致对称密钥的泄露
  4. 为了解决中间人攻击引入了证书机制通过第三方工证机构向网站颁发证书证书里面就包含公钥客户端向服务器请求的就是证书客户端那着证书去公证机构进行验证看看证书是否合法。

面试最经常问HTTPS问题的就是上面的4步过程准确来说这个过程就是SSL/TLS的一个流程而SSL/TLS不仅仅使用在HTTPS中也在很多其他地方会用到

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6
标签: 服务器