写给前端小白的http请求面试总结

落魄阴阳师
146 阅读15分钟

文章首发地址

async和defer的区别

区别

  1. defer（延迟执行）属性却一定会按它们在页面上的顺序依次执行。载入 JavaScript 文件时不阻塞 HTML 的解析，执行阶段被放到 HTML 标签解析完成之后
  2. async（异步下载）属性的Script会在下载完成后即可执行，在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行

Prefetch和Preload和preconnet的区别

  • Preload：告诉浏览器预先请求当前页需要的资源，从而提高这些资源的请求优先级
    对于跨域资源需要加上crossorigin,否则会出现加载两次的问题 
    <link rel="preload" href="/path/to/style.css" as="style">
  • preconnet 先建立一个链接(包括：DNS查找，TCP三次握手和TLS协商)减少真正连接是的消耗 
    <link rel="preconnect" href="//test.com">
<link rel="preconnect" href="//cdn.test.com" crossorigin>
  • Prefetch：告诉浏览器用户将来可能在其他页面（非本页面）可能使用到的资源，那么浏览器会在空闲时，就去预先加载这些资源放在http缓存内，还会解执行页面，进行预渲染,最常见的dns-prefetch 
    <link rel="dns-prefetch" href="//test.com">
<link rel="prerender" href="//example.com/next-page.html">

http状态码及分类

  • 1xx：初始化（http2.0已经么有1xx了{websocket例外}
  • 2xx：客户端成功（200：**成功；202：接受；204：没有返回信息，页面不需要更改）
  • 3xx：重定向缓存（301：永久重定向；302临时转移； （303：永久重定向；）307：**临时重定向；304：缓存）
  • 4xx：客户端失败（400：参数错误；401：未认证登陆，无权限访问；403：服务器已经得到请求,但禁止访问；404：未找到；417：发送资源过大）
  • 5xx：服务器端失败（500：**服务器内部错误；503：连接数过多，服务器超负载；504：网关超时）

从浏览器地址栏输入url到显示页面的步骤

超详细讲解、参考2、参考3、参考4

  1. 对url进行解析，确定web服务器及文件路径，然后根据这些信息生成http请求
  2. 浏览器网络进程查看是否有本地缓存，并且缓存是否新鲜
  3. DNS 查询
    • 去浏览器端拿dns缓存，操作系统自身的DNS缓存,去hosts文件中拿该域名对应的IP地址，去路由器中拿映射，如果还没有就去dns服务器拿ip(域名解析的过程)。
    • 拿到ip就去服务器拿资源，服务器中如果有重定向，那就去重定向的网址再次重复前面的步骤。
  4. 客户端发送数据前会先进行TCP连接(三次握手)三次的目的：为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误，所以服务器需要确认客户端是否收到了第二次握手；防止服务器等待造成资源浪费
    • 第一次由客户端发起，告诉浏览器即将发送请求
    • 第二次请求由服务端发起，告诉浏览器准备好接受数据，请发送数据
    • 第三次由客户端发起，告诉浏览器这就发送数据
      握手
  5. 发送http请求，服务器处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
  6. 拿到html文件后解析解析加载资源，html里面的东西从上到下依次解析，生成dom树状数据结构。
  7. 遇到css就添加为树状结构添加css属性，遇到js就执行JavaScript代码。
  8. 断开链接，进行四次TCP回收；四次的目的是：服务队没收到关闭请求可能还有需要处理的没法立马关闭，所以只能先发送ack报文进行确定，等处理完了再发送FIN进行关闭
    • 第一次由浏览器发起的，告诉服务端请求报文发送完了，可以关闭
    • 第二次由服务器发起的，告诉浏览器，请求报文接受完了，并表示同意关闭请求
    • 第三次由服务器发起的，告诉浏览器，响应报文发送完了，你准备关闭吧
    • 第四次由浏览器发起的，告诉服务器，我响应报文接受完了，你直接关闭吧
      挥手

cdn原理

  • 用户在浏览器中输入要访问的域名;
  • 向本地DNS服务器请求对该域名的解析
  • 浏览器向域名解析服务器发出解析请求，由于CDN 对域名解析过程进行了调整，所以用户端一般得到的是该域名对应的 CNAME 记录，此时浏览器需要再次对获得的 CNAME 域名进行解析才能得到缓存服务器实际的IP 地址。 注：在此过程中，全局负载均衡DNS 解析服务器会根据用户端的源IP 地址，如地理位置(北京还是上海)、接入网类型(电信还是网通)将用户的访问请求定位到离用户路由最短、位置最近、负载最轻的Cache 节点(缓存服务器)上，实现就近定位。定位优先原则可按位置、可按路由、也可按负载等。
  • 再次解析后浏览器得到该域名CDN 缓存服务器的实际IP 地址，向缓存服务器发出访问请求;
  • 缓存服务器根据浏览器提供的域名，通过Cache 内部专用DNS 解析得到此域名源服务器的真实IP 地址，再由缓存服务器向此真实IP 地址提交访问请求;
  • 缓存服务器从真实IP 地址得到内容后，一方面在本地进行保存，以备以后使用，同时把得到的数据发送到客户端浏览器，完成访问的响应过程;
  • 用户端得到由缓存服务器传回的数据后显示出来，至此完成整个域名访问过程。
    参考

跨域方式

  1. JSONP（代码实现）
  2. CORS(通过更改Access-Control-Allow-Origin)
  3. document.domain + iframe
  4. location.hash
  5. window.name + iframe
  6. postMessage
  7. nginx代理跨
  8. WebSocket
    参考1、参考2

为什么form表单提交没有跨域问题，但ajax提交有跨域问题

  • ajax跨域是浏览器处于对用户安全和隐私的一种保护措施，可以防止其它网站拿到用户的cookie，:bell:：ajax提交跨域请求时候, 请求一样会发到服务器, 只是服务器的响应被浏览器拦截
  • form表单提交后会刷新页面不会将结果返回给js所以相对安全；同时form也没发主动携带cookie

浏览器缓存技术

浏览器中缓存可分为强缓存和协商缓存,第一次浏览器请求资源时会，将资源连同response header一起缓存下来，再次去请求资源时，首先从缓存中拿出资源的response header，判断是否命中强缓存，如果命中则直接从缓存中读取资源，不会发送请求到服务器，如果没有命中，则发送请求到服务器判断是否命中协商缓存,如果命中则将请求返回，但是不会返回这个资源的数据，而是告诉浏览器从缓存中加载资源;区别： 强缓存不会发送请求到服务器。

  • 强缓存： 利用Expires或者Cache-Control这两个http response header实现
    • Expires：表示资源过期时间的header,是一个服务器返回的绝对时间，但是当服务器时间与客户端时间相差较大时，缓存管理容易出现问题
    • Cache-Control：是一个相对时间，用数值表示，以秒为单位；如：Cache-Control:max-age=311230000；还可以为 Cache-Control 指定 public(允许所有服务器缓存该资源)或 private(禁止中间服务器如代理服务器缓存资源) 标记
    • 当两种缓存同时启动是Cache-Control优先级高于Expires
  • 协商缓存： 利用的是Last-Modified，If-Modified-Since和ETag、If-None-Match这两对Header来管理的,命中协商缓存是返回状态码304 Not Modified
    • Last-Modified，If-Modified-Since：是根据服务器时间返回的Header,如果资源更改后，有更改回去了，这是依然会更新
    • ETag、If-None-Match：是服务器根据当前请求的资源生成的一个唯一标识 cache
      参考
      流程

http介绍

HTTP:超文本传输协议；是网络协议一个标准；特性：无状态，默认端口是80

http 各版本协议区别

  • 1.0 协议缺陷:
    • 无法复用链接，完成即断开，重新慢启动和 TCP 3次握手
    • head of line blocking: 线头阻塞，导致请求之间互相影响
  • 1.1 改进
    • 长连接(默认 keep-alive)，复用
    • 新增功能:断点续传、身份认证、状态管理、cache 缓存
  • 2.0优化
    • 多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，它解决了http1.X的每次请求都需要建立http连接；http1.X开启了"keep-alive"也会有串行文本传输和最多连接数限制有问题；
    • http2采用二进制格式进行传输比http1.X的文本传输更高效；
    • header压缩；解决了http1.X无状态特性--带来的巨大HTTP头部
    • 服务端推送 参考

https如何保证密钥传输的安全性\TLS握手过程？

  • 客户端像服务器端发送客户端生成的随机数random1以及支持的加密方式
  • 服务端接收到客户端发起的请求，会将网站信息(企业、网站等各种信息和公钥)+一串生成的随机数加密后，通过第三方机构的私钥再次加密，生成数字签名
  • 客户端通过第三方机构的公钥进行解密(本地已内置)并验证；然后得到服务器的公钥，随后客户端生成新的随机数(random3)，利用解密的公钥加密后传输给服务器
  • 服务器用自己的私钥解密这个信息得到第三个随机数
  • 至此双方通过约定的加密方式,使用前面生成的三个随机数(random1+random2+random3) 生成对话密钥 用来加密接下来的对话内容 参考1、参考2

HTTPS如何保证证书的可信任和安全？

  • 证书是否在有效期内
  • 证书是否被吊销
  • 是否是由上级CA签发
    参考

https为什么比http更安全?

简单来说，https是http的安全版，是在http基础上加上了SSL加密层（由SSL和TCP进行通信），并对传输数据进行加密；是非对称加密与对称加密双剑合璧，使用非对称加密算法传递用于对称加密算法的密钥，然后使用对称加密算法进行信息传递

HTTP 与 HTTPS 的区别

  • HTTP 是明文传输，HTTPS 通过 SSL\TLS 进行了加密所以更安全
  • HTTP 的端口号是 80，HTTPS 是 443
  • HTTPS 需要到 CA 申请证书，一般免费证书很少，需要交费
  • HTTP 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。

http2.0与WebSocket的关系是怎么样的？

WebSocket是基于HTTP1.1的协议，可以简单理解为创建了一条TCP连接;而HTTP2.0则是对HTML、CSS等JS资源的传输方式进行了优化

TCP协议和UDP协议的区别

TCP:是面向连接的协议，也就是说，在收发数据前，必须和对方建立可靠的连接。 一个TCP连接必须要经过三次“对话”才能建立起来
UDP:是一个非连接的协议，传输数据之前源端和终端不建立连接， 当它想传送时就简单地去抓取来自应用程序的数据，并尽可能快地把它扔到网络上。 在发送端，UDP传送数据的速度仅仅是受应用程序生成数据的速度、 计算机的能力和传输带宽的限制； 在接收端，UDP把每个消息段放在队列中，应用程序每次从队列中读一个消息段

1、基于连接与无连接；
2、对系统资源的要求（TCP较多，UDP少）；
3、UDP程序结构较简单；
4、流模式与数据报模式 ；
5、TCP保证数据正确性，UDP可能丢包(基于 UDP 的 QUIC 协议 可以实现类似 TCP 的可靠性传输)；
6、TCP保证数据顺序，UDP不保证。
应用场景: TCP适用于文本传输,收发邮件等 UDP适用于即时通信、在线视频、网络电话等,也适用于服务系统内部数据传输,因为内部数据交互丢包率低,及时丢包最多也就是操作无效

TCP&UDP区别

XSS和CSRF攻击

XSS：跨站脚本攻击，是一种代码注入攻击，攻击者通过在目标网站上注入恶意脚本，使之在用户浏览器上运行；根据攻击来源，分为存储型,反射型,DOM型

  • 存储型是将恶意代码提交到目标网站的数据库中，例如：发帖、评论、私信等；这种方式更隐蔽，因为不需要用户手动触发
  • 反射型是通过构造特殊的URL,并将其拼接到html中,其中包含恶意代码，如网站搜索、跳转等；因为需要用户打开URL才有效，所以一半都用多种手段诱导用户点击
  • DOM型同样是通过特殊URL,前端通过JavaScript取出恶意代码并执行，恶意代码会获取用户数据并发送到指定网站或冒充用户行为
    DOM型是取出恶意代码并交由浏览器完成，属于前端JavaScript的安全漏洞，其它两种属于服务器端漏洞 通用XSS攻击防御：
    • 禁止加载外域代码
    • 禁止外域提交
    • 禁止未授权的脚本执行
    • 对于不受信任的输入，限制合理的长度，可以增加攻击的难度
    • 设置http-only禁止js读取敏感cookie
    • 输入过滤
    • 纯前端，通过ajax获取并渲染数据

CSRF跨站点请求伪造，是攻击者盗用了用户的身份，以用户的名义发送恶意请求是一种挟制用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法；如诱导用户进入第三方网站并在第三方网站向用户发送跨站请求；利用用户的注册凭证，绕过后台用户验证;

  • GET类型攻击；如<img src="http://bank.example/withdraw?amount=10000&for=hacker" > 和JSONP，
  • POST类型攻击：如自动提交表单
  • 连接类的攻击：如诱导用户点击a连接
    通用CRSRF攻击防御：
  • 可以设置Get 请求不对数据进行修改和存储
  • 不让第三方网站访问到用户 Cookie，或者不讲用户验证的token或sesstion放在cookie，而是放在localStorage
  • 请求时附带验证信息，比如验证码
  • post表单请求，可在每个表单中包含一个 CSRF Token 或者通过将token放在cookie中
  // 方法一
  <form method="POST" action="/upload?_csrf={{由服务端生成}}" enctype="multipart/form-data">
    用户名: <input name="name" />
    选择头像: <input name="file" type="file" />
    <button type="submit">提交</button>
  </form>

  // 方法二 axios也是这么防御的
  let csrfToken = Cookies.get('csrfToken');

  function csrfSafeMethod(method) {
    // 以下HTTP方法不需要进行CSRF防护
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }

  $.ajaxSetup({
    beforeSend: function(xhr, settings) {
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
        xhr.setRequestHeader('x-csrf-token', csrfToken);
      }
    },
  });
  • 使用Referer Header确定来源域名

界面操作劫持攻击 通过在页面可见控件上覆盖一个不可见的框(iframe)，使得用户误以为自己在操作正确的页面，从而在用户不知情的情况下篡改数据、窃取信息等。
参考1

中间人（MITM）攻击

MITM攻击就是通过拦截正常的网络通信数据，并进行数据篡改和嗅探来达到攻击的目的，而通信的双方却毫不知情。
防御：

  • 确保访问的是https的网站
  • 不应在公共WI-FI上发送敏感数据
  • 禁用了不安全的SSL/TLS协议
  • 不要点击恶意链接或电子邮件

为什么埋点发送数据一般用1*1的GIF图片

  • 能够完成整个 HTTP 请求+响应（尽管不需要响应内容）
  • 客户端不需要接受返回数据，服务器也不需要返回数据
  • 没有跨域问题
  • 执行过程无阻塞，不影响用户操作
  • 相比 XMLHttpRequest 对象发送 GET 请求，性能上更好
  • GIF相对于其它格式的图片体积最小

GET&POST区别

区别

为什么会有options请求

options是浏览器基于跨域安全的考虑发起的预检请求;浏览器将CORS请求分为两类：简单请求（simple request）和非简单请求（not-simple-request）;而只有在非简单请求的情况下才会发起预检；非简单请求的条件：

  • 请求方式不是是：GET、POST、HEAD
  • 请求设置了自定义的 header 字段
  • Content-Type 并非 application/x-www-form-urlencoded, multipart/form-data, 或 text/plain
avatar
文章
阅读
粉丝