前端关于 HTTP 的知识

yyscc
416 阅读7分钟

作为一个前端，需要知道一些关于 HTTP 的知识，来更好的工作和分析错误

关于 HTTP 应该知道一些东西

HTTP 的特点

  1. 简单快捷：指的是 http 通过 url 去定位资源，一个 url 对应一个资源，方便快捷查找。
  2. 无连接：指的时一次数据传输以后就断开连接。
  3. 无状态：客户端和服务端都有各自的状态，但是服务端并不知道连接的这个服务端是否已经连接过，每一次都是新的客户端。

HTTP 的组成

  1. 请求报文

请求报文分为三部分：

  1. 请求行：包含了请求的 url、HTTP 版本等信息

  2. 请求头：包含了一些键值对信息，主要是 cookies 等信息

  3. 空行：服务端解析到空行说明后面的就是请求数据

  4. 请求体：表示的是本次请求的数据

  5. 响应报文

响应报文分为三部分：

  1. 状态行：包含影响的状态码、HTTP 版本等信息
  2. 响应头：包含了一些服务端给前端传递的一些缓存等信息
  3. 空行：解析到空行说明后面就是响应体
  4. 响应体：服务端返回的数据

HTTP 的方法

  1. GET
  2. POST
  3. DELETE
  4. UPDATE 等....

GET 和 POST 优缺点对比

这个问题不要死记，抓住 GET 是通过 url 传参的方式扩展开来

  1. GET 请求需要在 URL 后拼接参数，在安全性、数据长度、数据类型方面不如 POST 灵活
  2. GET 请求在浏览器回退是友好，不会重新请求，而 POST 会再发一次请求
  3. GET 请求的资源浏览器会默认将其缓存，而 post 不会。
  4. GET 请求的信息会缓存在本地，可能会造成一些网络安全，ru：CSRF（跨站请求伪造）攻击有可乘之机，所以改为 POST 更为安全。

HTTP 网站的攻击手段和解决方式

XSS（跨站脚本攻击）

原理：攻击者通过将恶意脚本注入到网站中，当用户访问页面时，会出现一些恶意弹窗等，以达到攻击的目的。
分类：

  1. 持久性攻击：指的是攻击者输入的脚本是直接攻击服务端。如: SQL注入，直接攻击的是数据库
  2. 短暂性攻击：指的是通过注入一些恶意 js 代码来实现的攻击方式。

防御措施：

  1. 对用户的输入前后端都进行校验，后端在储存前要进行一定的转义。
  2. 前端将后端给的片段当做字符串处理，不去执行返回的字符串。
  3. 将 HTTP 协议升级为 HTTPS 协议
CSRF（跨站请求伪造）

原理：当用户登录了 A 网站后，攻击者通过一些技术手段引导用户去点击某个不安全网站 B 的连接；当用户点击以后，攻击者就可以获取用户在 A 网站的登录信息等，在用户不知情的情况下使用用户的账号对 A 网站进行一些非法操作。

防御措施：

主要把握住用户身份验证这方面去回答

  1. 升级 HTTPS 协议，加强对用户身份的验证
  2. 当用户进行关键操作时（如：支付），对用户的身份进行验证，添加验证码等。
  3. 使用 Token，将其错在不易被获取的地方，如：sessionStroge、
点击劫持

原理：攻击者通过在自己的页面中内嵌一个透明的 iframe，通过伪装一些诱导操作的 DOM 元素覆盖在 iframe 相应的 DOM 元素之上，从而在用户不知情的情况下，使用户进行一些危险操作。

防御措施：把握好身份验证这一条就好

  1. 升级 HTTPS 协议，加强对用户身份的验证
  2. 当用户进行关键操作时（如：支付），对用户的身份进行验证，添加验证码等。
  3. 使用 Token，将其错在不易被获取的地方，如：sessionStroge

关于 HTTPS

HTTPS 值得是在 TCP 协议之上添加了一成 SSL 协议来对传输的信息进行加密处理，而且也能对客户端身份进行认证。

主要原理是：在客户端和服务端存着相应的秘钥（有对称和非对称两种），客户端的秘钥存在一个公共的服务器上，而服务端的存在服务端，当进行请求时，客户端携带秘钥进行身份验证，当与服务端的秘钥匹配以后，服务端才会允许进行连接和数据传出，从而大大提高了网站的安全性。

关于 HTTP 缓存

HTTP 缓存主要包含两类：

  1. memeory cache (内存缓存，暂时的， TAB 也关闭就消失，但速度快，Content-cache:no-store 可禁用此缓存项)
  2. disk cache (硬盘缓存，持久性的缓存)
disk cache

这个缓存项又可以细分为以下两项：

强制缓存

当你在 HTTP 的请求头设置了 exprise 或者 cache-control: max-age 过期时间时，只要在过期时间之前，浏览器就会强制资源使用缓存，以减少网络请求。

exprise 是 HTTP 1.0 规范中的，他表示的是一个绝对时间，这个时间会受客户端的时间影响，而且时间格式严格，稍有差错就会导致缓存失效。

cache-control 是其替代方案，通过 max-age 设置一个相对过期时间实现，时间格式简单，性对可靠一些。此选项还有若干的值，用到的话需要在进一步查询

协调缓存（条件缓存）

当强制缓存失效以后，此时条件缓存就会起作用，但是需要注意，强制缓存才会减少网络请求数，而条件缓存不管用不用缓存，都会发请求，它改变的是响应体的体积

协调缓存受 last-modify 和 If-Modified-Since 两个字段的影响，具体过程是，当需要协调缓存时，会将与文件一同存在缓存中的 last-modify 值赋值给 if-modify-since 传给服务端，然后服务端进行文件修改时间校验，如果文件没有改变，则直接返回 304 使用缓存，如果改变了，就直接返回 200 和对应的文件资源。

但是这种方式存在一定的问题：

  1. 这个验证方式的时间最小单位是秒，当文件修改的时间是比秒更小的单位时，就会导致缓存失效，即使文件没有被修改
  2. 如果文件是服务端动态生成的，生成时间和修改时间一致，也会导致缓存失效，即使文件没有被修改。

为了解决这两个问题，加入了以下属性：

Etag 和 if-none-match

这两个字段的作用也是用来查询和存储资源缓存是否需要更新，不同的时，他们采用了文件 hash 的方式来验证，这种方式更加可靠。

关于 HTML5 的离线存储

  1. 需要浏览器支持，window.appliectionCache 有这个属性
  2. 需要在 html 标签中添加一个配置文件 <html manifest='main.manifest'>
  3. manifest 配置选项有
CACHE MANIFEST  // 此字段配置的是需要缓存的资源
theme.css
logo.gif
main.js

NETWORKER // 此字段配置的是哪些资源必须用网络请求 
login.php

CALLBACK // 此字段是一个回退方案，当页面不能正常显示时的页面，比如：谷歌的小恐龙页面
404.html

最后一个经典问题

页面输入 URL 到页面显示的全过程

  1. 浏览器会先查询那域名去 DNS 缓存中查找对应 IP，如果找到就用，找不到就第二部
  2. 浏览器通过 DNS 解析成对应的 IP
  3. 建立 HTTP 连接（知道的多的可以介绍下 TCP连接） 这里主要指的是 TCP 的三次握手
    1. 拿着 IP 去找对应的服务器，找到了就返回给客户端找到了，没找到就是 404
    2. 如果找到了服务器，客户端会发送一个链接的请求，服务端同意了，就告诉客户端你可以链接
    3. 客户端拿着后端的链接许可进行连接，客户端和服务端正式连接，准备开始数据传输
  4. 客户端发送请求报文
  5. 服务端返回响应报文
  6. 浏览器解析资源
    1. 将文档解析为 DOMTree
    2. 将 CSS 样式解析为 CSSTree
    3. 将两个数合并
    4. 加载 js
    5. 完成显示
  7. HTTP 链接断开
avatar
文章
阅读
粉丝