前端需要了解的计算机网络方面的知识

1.TCP/IP 五层模型

  • 物理层、数据链路层、网络层、传输层、应用层

2.应用层中哪些基于TCP协议，哪些基于UDP?有什么区别？

2.1.TCP:

  • FTP（文件传输协议）：定义了文件传输协议，使用21端口。
  • TELNET（远程登陆协议）：一种用于远程登陆的端口，使用23端口，用户可以以自己的身份远程连接到计算机上，可提供基于DOS模式下的通信服务。
  • SMTP（简单邮件传输协议）：邮件传送协议，用于发送邮件。服务器开放的是25号端口。
  • POP3（邮件读取协议）：它是和SMTP对应，POP3用于接收邮件。POP3协议所用的是110端口。
  • HTTP（超文本传输协议）：是从Web服务器传输超文本到本地浏览器的传送协议。
  • HTTPS（超文本传输安全协议）

2.2.UDP:

  • TFTP（简单文件传输协议）：该协议在熟知端口69上使用UDP服务。
  • SNMP（简单网络管理协议）：使用161号端口，是用来管理网络设备的。由于网络设备很多，无连接的服务就体现出其优势。
  • BOOTP（引导程序协议，DHCP的前身）：应用于无盘设备
  • DHCP（动态主机配置协议）：是一个局域网的网络协议
  • RIP（路由信息协议）：基于距离矢量算法的路由协议，利用跳数来作为计量标准。
  • IGMP（Internet组管理协议）

2.3 UDP&TCP

  • DNS（域名系统）：DNS区域传输的时候使用TCP协议。域名解析时使用UDP协议。DNS用的是53号端口。
  • ECHO（回绕协议）

2.4 TCP 和 UDP 之间的区别

  • TCP：传输控制协议 UDP：用户数据报协议
  • TCP 是面向连接的，UDP 是无连接的即发送数据前不需要先建立链接；
  • TCP 提供可靠的服务。也就是说，通过 TCP 连接传送的数据，无差错，不丢失，不重复，且按序到达；UDP 尽最大努力交付，即不保证可靠交付。
  • TCP 是面向字节流，UDP 面向报文；
  • TCP 只能是 1 对 1 的，UDP 支持 1 对 1,1 对多；
  • TCP 的首部较大为 20 字节，而 UDP 只有 8 字节

3.HTTP&HTTPS

3.1 HTTP与HTTPS的区别：

  • HTTP 传输的数据都是未加密的，也就是明文的，HTTPS 协议是由 HTTP 和 SSL 协议构建的可进行加密传输和身份认证的网络协议，比 HTTP 协议的安全性更高。
  • HTTPS 协议需要 CA 证书，费用较高；
  • 使用不同的链接方式，端口也不同，一般而言，HTTP 协议的端口为 80，HTTPS 的端口为 443；

3.2 HTTPS加密原理

  • 客户使用 HTTPS URL 访问服务器，则要求 web 服务器建立 SSL 链接。
  • web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），返回给客户端。
  • 客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。
  • 客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。
  • web 服务器通过自己的私钥解密出会话密钥。
  • web 服务器通过会话密钥加密与客户端之间进行通信。

4.HTTP1&HTTP2

4.1 HTTP比HTTP1 有了哪些重大的改进

  • 首部压缩
  • 多路复用
  • 二进制分帧
  • 服务端推送

5.TCP 的三次握手和四次挥手

6.对称加密和非对称加密的区别

7.WebSocket协议

7.1 解释：

  • WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

7.2优势：

  • WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每 1 秒），由浏览器对服务器发出 HTTP 请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而 HTTP 请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

8.浏览器同源策略（端口/域名/协议）

8.1解释：

  • 第一个是当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。
  • 第二个是当前域下的 js 脚本不能够操作访问其他域下的 DOM。
  • 第三个是当前域下 ajax 无法发送跨域请求。

8.2 意义：

  • 同源政策的目的主要是为了保证用户的信息安全，它只是对 js 脚本的一种限制，并不是对浏览器的限制，对于一般的 img、或者
    script 脚本请求都不会有跨域的限制，这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。

9.浏览器缓存机制：[可参考这个]（https://www.cnblogs.com/chenqf/p/6386163.html）

10.前端攻防

10.1 XSS攻击

10.1.1 攻击形式：

  • 主要是通过"html"标签注入，篡改网页，插入恶意的脚本，前端可能没有经过严格的校验直接就进到数据库，数据库又通过前端程序又回显到浏览器

10.1.2 防御方式：

* cookie中设置 HttpOnly 属性
* 首先前端要对用户输入的信息进行过滤，可以用正则，通过替换标签的方式进行转码或解码，例如<> 空格 & '' ""等替换成html编码

10.2 CSRF攻击

10.2.1 攻击形式：

  • CSRF也是一种网络攻击方式，比起xss攻击，是另外一种更具危险性的攻击方式，xss是站点用户进行攻击，而csrf是通过伪装成站点用户进行攻击，而且防范的资源也少，难以防范。CSRF攻击形式攻击者盗用用户的身份信息，并以用户的名义进行发送恶意的请求等，例如发邮件，盗取账号等非法手段

10.2.2 防御方式：

  • 验证HTTP Referer字段/在请求地址中添加token并验证

11.HTTP请求方式

  • GET：请求指定的页面信息，并返回实体主体。
  • HEAD：类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头
  • POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
  • PUT：从客户端向服务器传送的数据取代指定的文档的内容。
  • DELETE：请求服务器删除指定的页面。
  • CONNECT：HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
  • OPTIONS：允许客户端查看服务器的性能。
  • TRACE：回显服务器收到的请求，主要用于测试或诊断。

12.GET和POST区别

  • get 参数通过 url 传递，post 放在请求体 (request body) 中。
  • get 请求在 url 中传递的参数是有长度限制的，而 post 没有。
  • get 比 post 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息。
  • get 请求只能进行 url 编码，而 post 支持多种编码方式。
  • get 请求参数会被完整保留在浏览历史记录里，而 post 中的参数不会被保留。
  • get 产生一个 TCP 数据包；post 产生两个 TCP 数据包。 对于 get 方式的请求，浏览器会把 http header 和 data 一并发送出去，服务器响应 200（返回数据）； 而对于 post，浏览器先发送 header，服务器响应 100 continue，浏览器再发送 data，服务器响应 200 ok（返回数据）。

13.浏览器输入 URL 之后发生了什么

  • DNS 解析
  • TCP 连接
  • 发送 HTTP 请求
  • 服务器处理请求并返回 HTTP 报文
  • 浏览器解析渲染页面
  • 连接结束

14.DNS 的具体过程

  • 输入 IP，此时电脑发送一个 DNS 请求到本地 DNS 服务器（一般是网络接入服务商提供 eg:电信，移动）
  • 本地 DNS 服务器会首先查询它的缓存记录，若有，则直接返回结果，若没有，本地 DNS 服务器还要向 DNS 根服务器进行查询；
  • DNS 根服务器没有记录具体域名和 IP 地址的对应关系，而是告诉本地 DNS 服务器，可到域服务器上继续查询，并给出域服务器地址
  • 本地服务器继续向域服务器发出请求，返回域名的解析服务器地址
  • 本地 DNS 向域名解析服务器发出请求，收到域名与 IP 地址对应关系
  • 本地 DNS 服务器将 IP 地址返回电脑，且保存副本到缓存已备下次查询

15.Cookie 和 WebStorage(SessionStorage 和 LocalStorage)的区别

  • 都会在浏览器端保存，有大小限制，同源限制
  • cookie 会在请求时发送到服务器，作为会话标识，服务器可修改 cookie；web storage 不会发送到服务器
  • cookie 有 path 概念，子路径可以访问父路径 cookie，父路径不能访问子路径 cookie
  • 有效期：cookie 在设置的有效期内有效，默认为浏览器关闭；sessionStorage 在窗口关闭前有效；localStorage 长期有效，直到用户删除
  • 作用域不同 sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；localStorage：在所有同源窗口都是共享的；cookie：也是在所有同源窗口中共享的
  • 存储大小不同：cookie 数据不能超过 4K；webStorage 虽然也有存储大小的限制，但是比 cookie 大得多，可以达到 5M 或更大

16.cookie 和 session 的区别

  • 存储位置不同：
    cookie 数据存放在客户的浏览器上
    session 数据放在服务器上。
  • 2.存储容量不同：

单个 cookie 保存的数据不能超过 4K，一个站点最多保存 20 个 cookie。
对于 session 来说并没有上限，但出于对服务器端的性能考虑，session 内不要存放过多的东西，并且设置 session 删除机制。

  • 3.存储方式不同：

cookie 中只能保管 ASCII 字符串，并需要通过编码方式存储为 Unicode 字符或者二进制数据。
session 中能够存储任何类型的数据，包括且不限于 string，integer，list，map 等。

  • 4.隐私策略不同

cookie 对客户端是可见的，别有用心的人可以分析存放在本地的 cookie 并进行 cookie 欺骗，所以它是不安全的。
session 存储在服务器上，不存在敏感信息泄漏的风险。

  • 5.有效期不同

cookie 保管在客户端，不占用服务器资源。对于并发用户十分多的网站，cookie 是很好的选择。
session 是保管在服务器端的，每个用户都会产生一个 session。假如并发访问的用户十分多，会产生十分多的 session，耗费大量的内存。

17.能设置或读取子域的cookie吗

不行! 只能向当前域或者更高级域设置cookie
例如 http://client.com 不能向 http://a.client.com 设置cookie, 而 http://a.client.com 可以向 http://client.com 设置cookie
读取cookie情况同上

18.客户端设置cookie与服务端设置cookie有什么区别

无论是客户端还是服务端, 都只能向自己的域或者更高级域设置cookie，例如 http://client.com 不能向 http://server.com 设置cookie, 同样 http://server.com 也不能向 http://client.com 设置cookie
服务端可以设置 httpOnly: true, 带有该属性的cookie客户端无法读取
客户端只会带上与请求同域的cookie, 例如 http://client.com/index.html 会带上 http://client.com 的cookie，http://server.com/app.js 会带上 http://server.com 的cookie, 并且也会带上httpOnly的cookie

19.同域/跨域ajax请求到底会不会带上cookie

fetch在默认情况下, 不管是同域还是跨域ajax请求都不会带上cookie, 只有当设置了 credentials 时才会带上该ajax请求所在域的cookie, 服务端需要设置响应头Access-Control-Allow-Credentials: true, 否则浏览器会因为安全限制而报错, 拿不到响应
axios和jQuery在同域ajax请求时会带上cookie, 跨域请求不会, 跨域请求需要设置 withCredentials 和服务端响应头Access-Control-Allow-Credentials

  • fetch 设置 credentials 使fetch带上cookie
fetch(url, {
    credentials: "include", // include, same-origin, omit
})
  • axios 设置 withCredentials 使axios带上cookie
axios.get('http://server.com', {withCredentials: true})
  • jQuery 设置 withCredentials
$.ajax({
    method: 'get',
    url: 'http://server.com',
    xhrFields: {
        withCredentials: true
    }
})

参考

posted @ 2023-03-01 16:27  菜鸟小何  阅读(177)  评论(0)  编辑  收藏  举报