http相关

HTTP

说一下http和https

https的SSL加密是在传输层实现的。

(1)http和https的基本概念

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

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

https协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。

(2)http和https的区别？

http传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对http协议传输的数据进行加密处理，简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。
主要的区别如下：

  • Https协议需要ca证书，费用较高。
  • http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
  • 使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443
  • http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

(3)https协议的工作原理

客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤，如图所示。

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

(4)https协议的优点

  • 使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；
  • HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
  • HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。
  • 谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。

(5)https协议的缺点

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

HTTP请求的方式，HEAD方式

head：类似于get请求，只不过返回的响应中没有具体的内容，用户获取报头

options：允许客户端查看服务器的性能，比如说服务器支持的请求方式等等。

说一下http2.0

首先补充一下，http和https的区别，相比于http,https是基于ssl加密的http协议

简要概括：http2.0是基于1999年发布的http1.0之后的首次更新。

  • 提升访问速度（可以对于，请求资源所需时间更少，访问速度更快，相比http1.0）
  • 允许多路复用：多路复用允许同时通过单一的HTTP/2连接发送多重请求-响应信息。改善了：在http1.1中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。
  • 二进制分帧：HTTP2.0会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码
  • 首部压缩
  • 服务器端推送

fetch发送2次请求的原因

fetch发送post请求的时候，总是发送2次，第一次状态码是204，第二次才成功？

原因很简单，因为你用fetch的post请求的时候，导致fetch 第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

状态码

补充400和401、403状态码

  • 400状态码：请求无效
    • 产生原因：
      • 前端提交数据的字段名称和字段类型与后台的实体没有保持一致
      • 前端提交到后台的数据应该是json字符串类型，但是前端没有将对象JSON.stringify转化成字符串。
    • 解决方法：
      • ​ 对照字段的名称，保持一致性
      • 将obj对象通过JSON.stringify实现序列化
  • 401状态码：当前请求需要用户验证
  • 403状态码：服务器已经得到请求，但是拒绝执行

讲讲304

如果客户端发送了一个带条件的GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个304状态码。

知道304吗，什么时候用304

304：如果客户端发送了一个带条件的GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个304状态码。

301和302的区别

301 Moved Permanently 被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。如果可能，拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定，否则这个响应也是可缓存的。

302 Found 请求的资源现在临时从不同的URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。

字面上的区别就是301是永久重定向，而302是临时重定向。

301比较常用的场景是使用域名跳转。302用来做临时跳转 比如未登陆的用户访问用户中心重定向到登录页面。

状态码304和 200

状态码200：请求已成功，请求所希望的响应头或数据体将随此响应返回。即返回的数据为全量的数据，如果文件不通过GZIP压缩的话，文件是多大，则要有多大传输量。

状态码304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。即客户端和服务器端只需要传输很少的数据量来做文件的校验，如果文件没有修改过，则不需要返回全量的数据。

说说302，301，304的状态码

301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI

304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

简单讲解一下http2的多路复用

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/14

介绍 HTTPS 握手过程

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/70

HTTPS 握手过程中，客户端如何验证证书的合法性

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/74

介绍下 HTTPS 中间人攻击

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/142

A、B 机器正常连接后，B 机器突然重启，问 A 此时处于 TCP 什么状态

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/21

介绍下 http1.0、1.1、2.0 协议的区别？

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/232

谈谈你对TCP三次握手和四次挥手的理解

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/15

网络安全

https://juejin.im/entry/5b4b56fd5188251b1a7b2ac1

CSRF

跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，比如用户登录了一个网站后，立刻在另一个ｔａｂ页面访问量攻击者用来制造攻击的网站，这个网站要求访问刚刚登陆的网站，并发送了一个恶意请求，这时候CSRF就产生了，比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改数据库的，这时候攻击者就可以以用户的名义操作这个数据库（字面理解意思就是在别的站点伪造了一个请求。专业术语来说就是在受害者访问一个网站时，其 Cookie 还没有过期的情况下，攻击者伪造一个链接地址发送受害者并欺骗让其点击，从而形成 CSRF 攻击）

自己总结：就是在一个用户已经登录的网页里面（比如利用img的src链接）对数据库进行操作(携带着之前登陆者的cookie信息)

防御方式

  • 使用验证码，
  • 检查https头部的Referer：在 HTTP 头中有一个字段叫 Referer，它记录了该 HTTP 请求的来源地址
  • 使用token

XSS

跨站脚本攻击，是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，比如获取cookie，或者其他用户身份信息（中文名为跨站脚本, 是发生在目标用户的浏览器层面上的，当渲染DOM树的过程成发生了不在预期内执行的JS代码时，就发生了XSS攻击。大多数XSS攻击的主要方式是嵌入一段远程或者第三方域上的JS代码。实际上是在目标网站的作用域下执行了这段js代码）

类型

  • 存储型

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

  • 反射型

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

自己总结：就是让用户恶意点击链接，获取到想要的信息（cookie信息），然后再操作

防御方式

  • 为cookie设置httpOnly属性
  • 用户的输入进行检查，进行特殊字符过滤

token补充

介绍下如何实现 token 加密

token 加密方式：

  • 服务器通过私钥对一部分信息进行加密生成签名，并将签名和数据拼接在一起作为 token 的一部分。例如 JWT。
  • 使用客户端的 UA 或其他数据作为干扰码对 token 进行加密

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/106

https://www.jianshu.com/p/e0ac7c3067eb

https://ninghao.net/blog/2834

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/31

  • 在CSRF的情况下：

    • cookie：用户点击了链接，cookie未失效，导致发起请求后后端以为是用户正常操作，于是进行扣款操作。
    • token：用户点击链接，由于浏览器不会自动带上token，所以即使发了请求，后端的token验证不会通过，所以不会进行扣款操作。

  • 在xss的情况下：

    不管是token还是cookie，都能被拿到，所以对于xss攻击来说，cookie和token没有什么区别

cookie，session，sessionStorage ,localStorage

第一种回答

  1. cookie数据存放在客户的浏览器上，session数据放在服务器上。
  2. cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
  3. session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。
  4. 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

第二种回答

Cookie和session都可用来存储用户信息，cookie存放于客户端，session存放于服务器端，因为cookie存放于客户端有可能被窃取，所以cookie一般用来存放不敏感的信息，比如用户设置的网站主题，敏感的信息用session存储，比如用户的登陆信息，session可以存放于文件，数据库，内存中都可以，cookie可以服务器端响应的时候设置，也可以客户端通过JS设置cookie会在请求时在http首部发送给客户端，cookie一般在客户端有大小限制，一般为4K，

第三种回答

HTTP是一个无状态协议，因此Cookie的最大的作用就是存储sessionId用来唯一标识用户

cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制。cookie只属于某个路径下存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如回话标识。

webStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或更大

数据的有效期不同：

  • sessionStorage：仅在当前的浏览器窗口关闭有效；
  • localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
  • cookie：只在设置的cookie过期时间之前一直有效，即使窗口和浏览器关闭

作用域不同：

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

存放数据

  • Cookie：4k左右
  • Localstorage和sessionstorage：可以保存5M的信息

http请求

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

易用性

  • Cookie：需要程序员自己封装，原生的cookie接口不友好
  • 其他两个：即可采用原生接口，亦可再次封装

应用场景

  • 从安全性来说，因为每次http请求都回携带cookie信息，这样子浪费了带宽，所以cookie应该尽可能的少用，此外cookie还需要指定作用域，不可以跨域调用，限制很多，
  • 但是用户识别用户登陆来说，cookie还是比storage好用，其他情况下可以用storage，localstorage可以用来在页面传递参数，sessionstorage可以用来保存一些临时的数据，防止用户刷新页面后丢失了一些参数

cookie和localStorage的区别：

cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制。cookie只属于某个路径下存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如回话标识。

localStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或更大

localStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口和浏览器关闭。

Cookie如何防范XSS攻击

XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本，为了减轻这些攻击，需要在HTTP头部配上，set-cookie：

httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。

secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie。

结果应该是这样的：Set-Cookie=.....

WebSocket的实现和应用

https://www.runoob.com/html/html5-websocket.html

(1)什么是WebSocket?

WebSocket是HTML5中的协议，支持持久连续，http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接，HTTP1.1中的keep-alive，将多个http请求合并为1个

(2)WebSocket是什么样的协议，具体有什么优点？

HTTP的生命周期通过Request来界定，也就是Request一个Response，那么在Http1.0协议中，这次Http请求就结束了。在Http1.1中进行了改进，是的有一个connection：Keep-alive，也就是说，在一个Http连接中，可以发送多个Request，接收多个Response。但是必须记住，在Http中一个Request只能对应有一个Response，而且这个Response是被动的，不能主动发起。

WebSocket是基于Http协议的，或者说借用了Http协议来完成一部分握手，在握手阶段与Http是相同的。我们来看一个websocket握手协议的实现，基本是2个属性，upgrade，connection。

基本请求如下：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

多了下面2个属性：

`Upgrade:webSocket`
`Connection:Upgrade`

告诉服务器发送的是websocket

`Sec-WebSocket-Key: x``3``JJHMbDL``1``EzLkh``9``GBhXDw==``Sec-WebSocket-Protocol: chat, superchat``Sec-WebSocket-Version: ``13`

说一下web worker

http://www.ruanyifeng.com/blog/2018/07/web-worker.html

在HTML页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker是运行在后台的js，独立于其他脚本，不会影响页面你的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

如何创建web worker：

  • 检测浏览器对于web worker的支持性

  • 创建web worker文件（js，回传函数等）

  • 创建web worker对象

一句话概括RESTFUL

就是用URL定位资源，用HTTP描述操作

iframe

iframe通信，同源和不同源两种情况，多少种方法。同源我说了，根据父页面以及cookie，不同源我说了设置子域的方法。

iframe是什么？有什么缺点？

定义：iframe元素会创建包含另一个文档的内联框架

提示：可以将提示文字放在之间，来提示某些不支持iframe的浏览器

缺点：

  • 会阻塞主页面的onload事件https://kb.cnblogs.com/page/109045/

  • 搜索引擎无法解读这种页面，不利于SEO

  • iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

SEO优化

https://juejin.im/post/5cb5427ff265da03b4460751

跨域

https://segmentfault.com/a/1190000011145364

posted @ 2019-09-18 09:23  windalm  阅读(300)  评论(0)  编辑  收藏  举报