文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

前端面试常问的计算机网络知识

时间：2021-07-15 17:16:13   收藏：0   阅读：18

OSI 与TCP/IP模型

技术分享图片

输入域名发生了什么

假设输入 www.baidu.com

浏览器解析域名。

客户端与服务端进行数据交互的时候，不能识别域名，通过DNS解析域名转化未对用的IP地址

技术分享图片

TCP/IP三次握手建立连接

引出一个问题：为什么是三次？两次建立连接存在什么问题？四次呢

几种状态的说明：

技术分享图片

浏览器客户端向后端发送数据

后台返回数据给浏览器渲染

四次挥手断开连接

引出一个问题：三次挥手行不行

几种状态得说明：

技术分享图片

TCP与UDP协议

UDP TCP
是否连接 无连接，不用关心对方是否接收到 面向连接，需要确保双方建立正确的连接
是否可靠 不可靠传输，不使用流量控制和拥塞控制 可靠传输，使用流量控制和拥塞控制
连接对象个数 支持一对一，一对多，多对一和多对多交互通信 只能是一对一通信
首部开销 首部开销小，仅8字节 首部最小20字节，最大60字节
适用场景 适用于实时应用（IP电话、视频会议、直播等），速度要求快 适用于要求可靠传输的应用，例如文件传输

HTTP

无状态的，以请求/应答方式运行的协议，她使用可拓展的语义和自描述消息格式，与基于网络的超文本信息系统（html页面）灵活的互动

请求类型

RESTful请求风格

参考阮一峰大佬的REStful API设计指南

RESTful是面向资源请求，url中不能存在动词，只能有名词。

https://api.example.com/v1/zoos

对于具体资源的操作，HTTP提供了上面的请求类型，可以使用这些动词来表对资源进行哪些操作，对于一些参数，比如：获取Tom的数学成绩，用get请求来写的话，请求地址就是/tom?subject=math，但是用RESTful风格来写就是/tom/math,列出一些常用例子：

//方法  	接口   				行为
GET 	/zoos：				列出所有动物园
POST 	/zoos：				 新建一个动物园
GET 	/zoos/ID：			 获取某个指定动物园的信息
PUT 	/zoos/ID：			 更新某个指定动物园的信息（提供该动物园的全部信息）
PATCH 	/zoos/ID：			 更新某个指定动物园的信息（提供该动物园的部分信息）
DELETE 	/zoos/ID：			 删除某个动物园
GET 	/zoos/ID/animals：	  列出某个指定动物园的所有动物
DELETE 	/zoos/ID/animals/ID：  删除某个指定动物园的指定动物

axios里面同样提供了这些请求方法的别名

axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

请求头

技术分享图片

HTTPS

WebSocket

参考WebSocket相关知识

跨域问题

原因

解决方案

jsonp

img、link、script标签不受同源策略的影响。jsonp本质是动态创建script标签，利用他不产生跨域的特点，向后台发送请求

script加载资源发送的请求是get请求，以至于jsonp也有这个局限。

node中间件代理

同源策略仅仅是浏览器的限制，对于服务器之间的相互请求则不做限制

技术分享图片

例如这里，前端需要向localhost:5000请求数据。项目npm run dev运行的时候，在本地启动了一个服务4000，前端发送请求的时候会经由4000，然后他再向5000发送请求，4000向5000转发请求不涉及跨域，请求成功之后，5000给4000返回响应，然后4000再转发给前端

技术分享图片

技术分享图片

CORS

跨域资源共享，关键实现在于服务端。

技术分享图片

Nginx反向代理

正反向代理

配置nginx的nginx.conf文件

浏览器访问 http://localhost:81时，转发到 https://mywebsite.com

server {
    	#访问的端口号
        listen       81;
        #访问的地址
        server_name  localhost; 
        location / {
            root   html;
            index  index.html index.htm;
        #转发的地址
            proxy_pass https://mywebsite.com;
        }
}

HTTP缓存

参考一文读懂http缓存

向服务器请求数据时，会又优先查询浏览器缓存，如果缓存中存在需要请求的数据，就直接从浏览器缓存中提取出来数据，常见的http缓存只能缓存get请求响应的资源

强制缓存

强制缓存在缓存未过期的情况下，即Cache-Control的max-age属性或者Expires未过期,那么就会去返回浏览器的缓存，强制缓存生效时，http状态码是200，这种方式是页面加载速度最快的，因为他没有与服务器进行交互。但是假如在服务器的资源被修改了，这时候拿到的缓存就不是我们预期的数据了，页面上刷新了但没有生效，因为走的是强制缓存，所以Ctrl + F5一顿操作之后就好了。 跟强制缓存相关的header头属性有（Pragma/Cache-Control/Expires）

相关属性：

技术分享图片

协商缓存

响应头中没有Cache-Control和Expires或者Cache-Control和Expires过期还或者它的属性设置为no-cache时(即不走强缓存)，那么浏览器第二次请求时就会与服务器进行协商（通过判断last-modified/if-modified-since是否一致或者Etag/If-None-Match是否一致），与服务器端对比判断资源是否进行了修改更新。服务端资源没有更改，则返回304.然后从浏览器获取资源，已更改则从服务器获取资源，返回200

实现协商缓存的两种方式：

上面一组属性可以解决大部分缓存情况，但是存在一些不足，他们的时间戳单位是秒，也就是说，如果发生修改资源的太快，在击几百毫秒之内完成，对于他们来说仍是相等的，无法识别出资源已经更新。另外也可能存在只改变文件名而不改变文件内容的情况，这种情况会被认定为资源更新，会去服务请资源而耗费性能。对于着二者的缺点，可以使用 Etag/If-None-Match的方案优化

比较上面两种协商缓存的方案，他们都有一个共同流程，首次请求服务端返回一个标识放在响应头中，第二次及以后的请求都会将响应头的这个值放在请求头中，通过比较两个值来判断资源是否更改

这种方案并不能完全替代last-modified,他只能作为一种补充，因为它同样存在一些不足，首先，文件的哈希值需要服务器去计算，对服务器造成了额外的开销，尤其对于一些大文件或者文件数目很多的情况，频繁计算文件哈希值造成了性能的而损耗。另外，生成etag的过程中存在精度问题，某些情况会造成比对失败

总结

技术分享图片

浏览器存储方案

cookie、localStorage、sessionStorage的使用

安全

XSS

跨站脚本攻击，向客户端插入脚本，用户打开网页或者点击某个按钮会运行注入的脚本

参考于美团技术团队： 如何防止XSS攻击

注入的情景

<h1>前端渲染后台返回的数据： <script>alert(1)</script> </h1>

  <script>
      let backendData = alert(1) //后端的数据
      let data = backendData //前端对这些数据进行操作
      console.log(data)
    </script>

后台返回的数据   "><script>alert(‘XSS‘);</script>
<input type="text" value="<%= getParameter("keyword") %>">
拼接后：
<input type="text" value=""><script>alert(‘XSS‘);</script>">

后台返回的数据：javascript:alert(‘XSS‘)
<a href="<%= escapeHTML(getParameter("redirect_to")) %>">跳转...</a>
拼接后
<a href="javascript:alert(‘XSS‘)">跳转...</a>

XSS分类

根据攻击的来源，XSS 攻击可分为存储型、反射型和 DOM 型三种。对于前两种，后端应该做好防护，而第三种DOM型需要前端防范

如何防范

对于存储型和反射性

他们都是从后台取出恶意代码，然后再html中被拼接，被浏览器执行，有两种方法预防：

对于DOM型

其他防范措施

CSRF

参考美团技术团队 如何防止CSRF攻击

跨站请求伪造，引导用户进入第三方网站中，然后发送请求，冒充用户身份，对被攻击的网站执行某些操作，

常见攻击类型

//从 bank.example 中拿到用户cookie
<img  style="width:0;" src="http://bank.example/withdraw?amount=10000&for=hacker" > 

<form method="POST" action="https://bank.example/xxx" enctype="multipart/form-data"> 
    <input type="hidden" name="name" value="xiaoming"/> 
    <input type="hidden" name="amount" value="10000"/>
</form> 
<script> 
    document.forms[0].submit();
</script>

<a href="http://bank.example/withdraw?amount=10000&for=hacker" taget="_blank">重磅消息！！ <a/>

如何防范

CSRF只是冒用cookie，并不能获取到cookie的实际值，另外，CSRF通常发生在第三方网站

同源检测

SameSite属性

SamesiteCookie是一个可能替代同源验证的方案，但目前还并不成熟，其应用场景有待观望。

JWT验证

其他防范措施

攻击者诱导受害者进入第三方网站，再第三方的网站中，向被攻击的网站发送请求，由于再第三方网站中，用户存在cookie，已经完成身份验证，所以在

Fetch

参考文档 ：使用Fetch

Fetch作为一种Http请求方案，是XHR的代替方案，注意Fetch是基于Promise原生的API，而Axios是基于Promise的库，Fetch使用方法与Axios十分类似，注意post请求时，fetch传递的时body属性，值是对象转化成字符串JSON.stringify(data)

拓展

TCP三次握手连接的原因

首先要知道TCP三次握手的目的是什么：为了确保双方的发送和接收能力都是正常且可靠的

TC四次挥手的原因

正向代理与反向代理

正向代理是客户端和其他所有服务器（重点：所有）的代理者，而反向代理是客户端和反向代理服务器所代理的服务器之间的代理（也就是说反向代理有可能代理2个服务器，3个服务器等）

原文：https://www.cnblogs.com/baifangzi/p/15015938.html

评论（0）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！