接上篇
网络
1. TCP和UDP的区别
- udp是一种面向无连接,且不可靠的协议,在通信过程中,它并不像 TCP 那样需要先建立一个连接,只要(目的地址,端口号,源地址)确定了,就可以直接发送信息报文,并且不需要确保服务端一定能收到或收到完整的数据。它仅仅提供了校验和机制来保障一个报文是否完整,若校验失败,则直接丢弃报文,不做任何处理。
- TCP 是面向连接的,并且是一种可靠的协议,在基于 TCP 进行通信时,通信双方需要先建立一个 TCP 连接,建立连接需要经过三次握手,握手成功才可以进行通信;另外 每一条TCP连接只能是点到点的;UDP支持一对一,一对多,多对一和多对多的交互通信
2. HTTP的报文字段有哪些?
回答常见的几个即可:
- accept: 包含支持的媒体类型 支持的字符集 支持的语言 支持的编码格式
- host:是访问资源所在的主机名
- date: 创建HTTP报文时的时间
- if-match:将它与所请求资源的Etag(实体标记)值进行比对,一致时服务器处理请求
- if-not-match:反面意思
- if-modified-since:比对时效性,在某个时间段之内资源未发生变化或者到期,就返回状态码304,否则重新请求资源
2.1 http协议中与资源缓存相关的协议头有哪些?
- 强制缓存:
cache-control 优先级高于 Expires,主要使用其max-age字段结合第一次请求时间来判断当前请求时间是否能使用缓存
Expires 值为一个绝对时间的GMT格式的时间字符串,只要请求时间在这个字符串之前就只取本地缓存 - 协商缓存:(每次请求都会与服务器交互,第一次是拿数据和标识的过程,第二次开始就是询问服务器资源是否更新,每次请求都会传输数据,如果命中缓存状态码就是304)
Etag 服务器通过它设置响应头缓存标识,第一次请求时,服务器会把Etag和资源一并返回,浏览器缓存好,之后请求时,浏览器把Etag的小心放入If-None-Match请求头去访问服务器,服务器拿到对比文件标识,如果不同返回新的Etag和资源,如果相同返回304
Last-modified 第一次像服务器请求时,服务器会通过Last-modified来设置响应头的缓存标识,并把资源最后修改时间填入,然后之后请求时会使用 If-Modified-Since(即上次的Last-modified)请求头取访问服务器,如果这个时间与服务器资源修改的时间不一致,就会返回新的资源,并更新Last-modified,如果一致就返回304
3. http有哪些请求方式?(滴滴)
- HTTP1.0定义了三种请求方法: GET, POST 和 HEAD(请求头部信息)方法
GET 请求指定的页面信息,并返回实体主体。
HEAD 类似于get请求,只不过返回的响应中没有具体的内容,用于获取报头
POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。 - HTTP1.1新增了五种请求方法:
PUT 从客户端向服务器传送的数据取代指定的文档的内容。
DELETE 请求服务器删除指定的页面。
CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS 允许客户端查看服务器的性能。
TRACE 回显服务器收到的请求,主要用于测试或诊断。
3.1 消息结构
HTTP使用统一资源标识符(Uniform Resource Identifiers, URI)来传输数据和建立连接。一旦建立连接后,数据消息就通过类似Internet邮件所使用的格式[RFC5322]和多用途Internet邮件扩展(MIME)[RFC2045]来传送。
客户端请求消息:请求行、请求头部、空行和请求数据。
GET /hello.txt HTTP/1.1
User-Agent: curl/7.16.3 libcurl/7.16.3
OpenSSL/0.9.7l zlib/1.2.3
Host: www.example.com Accept-Language: en, mi
服务端响应消息:状态行、消息报头、空行和响应正文。
HTTP/1.1 200 OK
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache
Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
ETag: "34aa387-d-1568eb00"
Accept-Ranges: bytes
Content-Length: 51
Vary: Accept-Encoding
Content-Type: text/plain
4. get post有什么区别?(滴滴)
- 数据传输方式不同:GET请求通过URL传输数据,而POST的数据通过请求体传输。
- 安全性不同:POST的数据因为在请求主体内,所以有一定的安全性保证,而GET的数据在URL中,通过历史记录,缓存很容易查到数据信息。
- 数据类型不同:GET只允许 ASCII 字符,而POST无限制
- 是否有害: 刷新、后退等浏览器操作GET请求是无害的,POST可能重复提交表单
- 特性不同:GET是安全(这里的安全是指只读特性,就是使用这个方法不会引起服务器状态变化)且幂等(幂等的概念是指同一个请求方法执行多次和仅执行一次的效果完全相同),而POST是非安全非幂等
5. 你了解哪些HTTP状态码?(滴滴)
以1开头的信息性状态码;
以2开头的成功状态码;
以3开头的重定向状态码;
以4开头的客户端错误状态码;
以5开头的服务器错误状态码;
- 记住这几个常见的状态码:
304 Not Modified 所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向
400 Bad Request 客户端请求的语法错误,服务器无法理解
403 Forbidden 服务器理解请求客户端的请求,但是拒绝执行此请求
404 Not Found 资源未找到,服务器无法根据客户端的请求找到资源(网页)。通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面
500 Internal Server Error 服务器内部错误,无法完成请求
502 Bad Gateway 充当网关或代理的服务器,从远端服务器接收到了一个无效的请求
6. 为什么需要跨域?知道哪些跨域方案?(滴滴,腾讯)
为什么要跨域: 跨域的问题是由于同源策略问题限制的,同源是指 同端口 同域名(主域名 子域名) 同协议,而同源策略的初衷是为了浏览器的安全性,保证浏览器不受到XSS, CRSF攻击。
跨域方案:
有许多种跨域方案,例如 通过jsonp, CORS, postMessage,websocket,Node中间件代理,nginx反向代理等方法,说出几种熟悉的便可以;还是注意不要提不熟悉的,否则面试官详细问的时候答不上来会降低好感度;下边详细描述两种:
- josnp跨域:因为script标签中的src属性可以跨域访问js脚本,因此可以直接把请求写入script标签中,它的缺点是只能使用get请求,如果使用原生js的话可以封装一个jsonp函数,让每次请求时建立一个script标签,将参数以拼接起来放在src中;如果用jq的Ajax实现的话,就需要将dataType值写为 jsonp,还需要自定义传递给服务器的函数名
- CORS: 这种跨域方式不需要客户端去改变什么,只要服务端把response的header头中设置
Access-Control-Allow-Origin
为制定可请求当前域名下数据的域名即可,这个字段是必须字段。
Cors解决跨域的时候发送请求会出现两种情况————简单请求和复杂请求,简单请求的条件是:- 请求方式:GET、POST、HEAD(注:什么是HEAD请求?HEAD请求和GET本质是一样的,但是HEAD请求不含数据,只有HTTP头部信息)
- HTTP头部信息不超过一下几种字段:无自定义头部字段、Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type(只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)
对于复杂请求来说,首先会发起一个预检请求,该请求是 option 方法的,通过该请求来知道服务端是否允许跨域请求。返回状态码403,应该是预检失败了。预检请求成功会返回204,预检请求无法避免,但是可以通过设置Access-Control-Max-Age来减少ta
- WebSocket:是浏览器客户端双全工模式,也基于TCP协议,也是跨域的一种手段,服务器和浏览器建立连接后 ,双方都能主动发送和接收数据,但是原生使用不够方便,因此我们一般借助socketio来实现
- Node中间件实现代理服务器,步骤如下:
- 先接受客户端请求再将请求转发给服务器。
- 之后拿到服务器的响应数据,并将响应转发给客户端。
7. 说一下跨子域的方案和流程(腾讯)
方案: 使用document.domain + iframe实现二级域名相同下跨子域的情况(例如 a.test.com 和 b.test.com给页面添加 document.domain =‘test.com’ )
实现原理: 两个页面都通过js强制设置document.domain
为基础主域,就实现了同域。
例:页面a.test.cn:3000/a.html获取页面b.test.cn:3000/b.html中a的值
// a.html
<body>
Apage
<iframe src="http://b.test.cn:3000/b.html"
frameborder="0" onload="getA()" id="frame">
</iframe>
<script>
document.domain = 'test.cn'
function getA() {
console.log(frame.contentWindow.a);
}
</script>
</body>
// b.html
<body>
Bpage
<script>
document.domain = 'test.cn'
var a = 100;
</script>
</body>
8. 你了解哪些网络攻击?(滴滴,腾讯)
-
XSS攻击: 是一种跨站脚本攻击,攻击者可以通过脚本植入一段恶意代码对客户端网页进行纂改,可以将js HTML代码植入,盗取用户的cookie session发送给攻击者。
XSS攻击包含反射型(比如说注入一个恶意链接,跨域注入恶作剧脚本或者获取其cookie session) 存储型(把用户数据存进攻击者的服务器端中,这种攻击非常稳定) 基于DOM(直接纂改其dom结构)
XSS攻击防范:我们可以采用过滤用户(编码转义)输入以及检查输出的方法 这种攻击常见于富文本中;另外还有设置HttpOInly属性:它能禁止页面的js访问带有这个属性的cookie ,还可以充分利用 CSP,严格实施CSP操作(即限制加载其他域下的资源文件,禁止向第三方域提交数据,禁止执行内联脚本和未授权的脚本;并提供了上报机制) -
CSRF攻击: 是一种跨站伪造请求技术,它主要是借用客户端的cookie来骗取服务器的信任,就是在受害者不知情的情况下以其身份向服务器发送一些请求,在这个过程中,攻击者虽然不能获取cookie值,通过服务器返回的值,由于同源策略的限制,攻击者也不能收到,它所作的只是借用客户端的cookie来改变服务器的某些值,而不是窃取数据。主要方式是通过img标签的src属性或者iframe结合post请求
CRSF攻击防范,有三种方法:
第一种是借用验证码的方法,给一些敏感的操作加上验证码,强制用户与应用交互才能完成最终请求;
第二种方法是检查HTTP头部中referer字段(这个可以手工修改),这个字段记录的是HTTP请求的源地址,如果验证得知这个值与预期值不同,则是crsf攻击,因此拒绝该请求;
第三种方法是使用token,使攻击者无法伪造,客户端发送数据时加入一个客户端随机生成的token值,让服务器接受请求前加以拦截验证,如果token验证不通过或者压根没有token,就拒绝请求。
第四种如果是get请求,就不允许get请求修改数据。
9. 跨域怎么携带cookie?(滴滴) -
首先要服务器同意,指定
Access-Control-Allow-Credentials: true
字段,因为CORS请求默认不发送Cookie和HTTP认证信息。 -
其次,开发者必须在AJAX请求中打开withCredentials属性。,否则即使服务器同意发送Cookie,浏览器也不会发送。
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
- 最后,如果要发送Cookie,
Access-Control-Allow-Origin
就不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie。
10. 跨子域怎么携带cookie?(滴滴)
子域名间 Cookie 是不共享的,但各子域名均可获取到父级域名的 Cookie,即app.demo.com与news.demo.com均可以获取 demo.com域名下的 Cookie。所以可以通过将 Cookie 设置在父级域名上,可以达到子域名共享的效果,即当用户在 app.demo.com 域名下登录时,在demo.com域名下设置名为 SessionID 的 Cookie,当用户之后访问news.demo.com时,后台服务也可以获取到该 SessionID,从而识别用户。
面经系列:
2020前端一些大厂面经系列———HTML,CSS,算法
2020前端一些大厂面经系列———JS
2020前端一些大厂面经系列———ES6
2020前端一些大厂面经系列———网络(上)
2020前端一些大厂面经系列———网络(下)
2020前端一些大厂面经系列———vue,node
2020前端一些大厂面经系列———综合实战篇