浏览器的相关知识（一）

根据网上的面经总结了一些常见的浏览器相关的知识点，快快学起来吧！

1.POST与GET的区别？

最直观的就是语义上的区别

• get用来获取数据，post用来提交数据
• get参数有长度的限制（受限于url长度，具体的数值取决于浏览器和服务器的限制，最长2048字节）而post无限制。
• get请求的数据会附加在URL之后，以“？”分割URL和传输数据，多个参数用&连接，而post请求会把请求的数据放到HTTP的请求体中。
• get是明文传输，post是放在请求体中，但是开发者可以通过抓包工具看到，也相当于明文传输的。
• get请求会保存在浏览器历史记录中，还可能保存在web服务器的日志中。

从当前角度来看，post相对get比较安全，至少请求的数据在URL上不可见，然而真的是这样吗？

实质性区别：

• safe（安全）

这里的安全和通常所理解的安全意义不同，就好比如果一个请求的语义本质上就是获取数据（只读），那么这个请求就是安全的。客户端向服务器发起的请求如果没有引起服务器端任何的状态变化，那么就是安全的。而post请求是来提交数据必然是会在服务器发生相应的变化。从这个维度来看，get请求相对于服务器而言是安全的，post是不安全的。

• ldempotend（幂等）

幂等通俗来讲就是指同一个请求执行多次和仅执行一次的效果完全相等。假如在请求响应之前失去连接，如果这个请求是幂等的，那么就可以放心的重发一次请求。所以可以得出get请求是幂等的可以重复发送请求，post请求是不幂等的，重复发送请求可能会发生无法预知的后果。

• cacheable（可缓存性）

绝大多数部分，post都是不可缓存的（某些浏览器可能支持缓存），但get是可以缓存的。

详情可参考get和post的区别？

2.HTTP和HTTPS的区别？

HTTP和HTTPS的基本概念

HTTP:是互联网上应用最为广泛的一种网络协议。是一个客户端和服务器端请求和应答的标准(TCP)用于从www服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTPS：是以安全为目标的http通道，简单讲就是http的安全版，即http加入ssl层，https的安全基础是ssl，因此加密的详细内容就需要ssl。

HTTPS与Web服务器通信时的几个步骤

HTTPS和HTTP的主要区别

• HTTPS协议需要用到ca申请证书，一般免费证书较少，因而需要一定的费用。
• HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的ssl加密传输协议
• HTTP和HTTPS使用的是完全不同的连接方式，用的接口也不一样，前者是80，后者是443.
• HTTP的连接很简单，是无状态的；HTTPS协议是由ssl+HTTP协议构建的可进行加密传输、身份认证的网络协议，比HTTP协议安全。

HTTPS协议的缺点：

• HTTPS的握手阶段比较费时，会使页面加载时间延长50%，增加10%~20%的耗电
• HTTPS缓存不如HTTP高效，会增加数据开销
• ssl证书费用高，功能越强大的证书费用越高
• ssl证书需要绑定IP，不能同一个IP上绑定多个域名，iPV4资源支持不了这种消耗。

3.TCP和UDP的区别？

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

详情可参考TCP和UDP比较

4.浏览器的安全，如何防范？

什么是cookie？

cookie存储在客户端，cookie是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

cookie的安全机制

csrf：
跨站请求伪造，发生的场景就是，用户登陆了a网站，然后跳转到b网站，b网站直接发送一个a网站的请求，进行一些危险操作，就发生了CSRF攻击！
比如这个攻击者使用一张图片，但是这张图片的链接却是可以修改数据库的，这时候攻击者就可以以用户的名义操作这个数据库。

防御方法：

• 放弃cookie，使用token
• 使用验证码
• 检查头部的refer

XSS：
跨站脚本攻击，是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，比如获取cookie，或者其他用户身份信息，可以分为存储型和反射型

存储型是攻击者输入一些数据并且存储到了数据库中，其他浏览者看到的时候进行攻击。

反射型不存储在数据库中，往往表现为将攻击的代码放在URL地址的请求参数中。

防御方法：

• 设置http-only

Cookie有一个http-only属性，表示只能被http请求携带。假如你的网站遭受到XSS攻击，攻击者就无法通过document.cookie得到你的cookie信息。

• 正则校验

我们了解到，XSS是由于不安全的数据引起的，这些数据的来源，一个重要的渠道就是提交表单，注入到数据库。所以针对前端，我们需要把表单数据进行正则验证，通过验证之后，才能提交数据。
对于服务端，也应该对接受的数据，进行规则校验，不符合规则的数据不应该入库。从接口层面，保证数据安全。

• 数据转义（特殊字符过滤）

如果无法保证数据库的数据都是安全的，前端能做的事情就是，把所有需要展示到页面的数据，进行转义，比如遇到script标签，直接replace处理。或者遇到标签标识‘<’以及‘>’这类特殊字符，添加‘\’进行处理。

5.cookie、sessionStorage、localstorage的区别？

• 生命周期

cookie：可设置失效时间，否则默认为关闭浏览器后失效
localStorage：除非被手动清除，否则永久保存
sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除掉

• 存放数据

cookie：4k左右
localStorage、sessionStorage：5M

• http请求

cookie：每次都会携带在http头中，如果使用cookie保存过多的数据会带来性能问题
localStorage、sessionStorage：仅在客户端即浏览器中保存，不参与和服务器的通信。

• 易用性

cookie：需要程序员自己封装，原生的cookie接口不友好
localStorage、sessionStorage：既可以采用原生的接口，亦可再次封装。

• 作用域

cookie、localStorage：在所有同源窗口中都是共享的
sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面

6.强缓存与协商缓存的区别？

缓存分为两种，强缓存与协商缓存，根据响应的header内容来决定

缓存类型	获取资源形式	状态码	发送请求到服务器	字段
强缓存	从缓存取	200	否，直接从缓存取	expires，cache-control
协商缓存	从缓存取	304	是，通过服务器来告知缓存是否可用	Last-Modified/If-Modified-since/Etag/If-None-Match

注意： 如果cache-control与expires同时存在，cache-control的优先级高于expires

Expires和Cache-Control 强缓存

Expires:它描述的是一个绝对时间，由服务器返回。浏览器进行第一次请求时，服务器会在返回头部加上Expires，下次请求，如果在这个时间之前则命中缓存，Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效

Cache-Control:表示的是相对时间，该值是利用max-age判断缓存的生命周期，是以秒为单位，如何在生命周期时间内，则命中缓存，优先级高于 Expires

ache-Control 其他常见值

Cache-Control:no-cache：强制客户端直接向服务器发送请求,也就是说每次请求都必须向服务器发送。服务器接收到  请求，然后判断资源是否变更，是则返回新内容，否则返回304，未变更。这个很容易让人产生误解，使人误以为是响应不被缓存。实际上Cache-Control: no-cache是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性
Cache-Control: no-store才是真正的不缓存数据到本地
Cache-Control: