2021-07-20 牛客CVTE面经（持续更新）

一、作者：我学计算机需要做极客的
链接：https://www.nowcoder.com/discuss/658713?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网
1.面试开始先简短的自我介绍。（面试官不专业的一点是他后面没有着重问我在自我介绍里说的内容）

2. flex盒子模型介绍
   3.实现居中的几种方法

4.对链表进行循环，判断是不是一个环
5.写算法实现math.sqrt()

6.http状态码
答：
①用途：用于表示客户端HTTP请求的返回结果、标记服务器的处理是否正常、通知出现的错误等工作。
②分类：信息性1、成功2、重定向3、客户端错误4、服务器错误5
③常见：

• 200 - 请求成功
• 301 - 资源（网页等）被永久转移到其它URL
• 404 - 请求的资源（网页等）不存在
• 500 - 内部服务器错误

7.http攻击方式，防御手段例如XSS和CSRF
（一）CSRF是“跨站请求伪造”：
①攻击过程：攻击者首先盗取用户的身份，然后利用用户的身份，执行非本意的操作。

②针对的漏洞：CSRF攻击其实是利用了web中用户身份认证验证的一个漏洞：简单的身份验证仅仅能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。

③达成CSRF攻击，必须具备的两个基本条件：
1.用户登录受信任站点A，并在本地生成Cookie。
2.用户在不登出A的情况下，訪问危急站点B。

④测试CSRF漏洞的方法：检测CSRF漏洞是一项比较繁琐的工作，最简单的方法就是抓取一个正常请求的数据包，去掉Referer字段后再重新提交，如果该提交还有效，那么基本上可以确定存在CSRF漏洞。也可以使用一些专门针对CSRF漏洞进行检测的工具，当然此款工具也可以被用来进行CSRF攻击。

⑤分类：
GET CSRF
POST CSRF

⑥预防方法：
1.验证HTTP Referer字段
原理：网站只需要对于每一个请求验证其 Referer 值，如果是指定安全域名，则说明该请求是安全的请求，是合法的。如果 Referer 是其他网站的话，则有可能是黑客的 CSRF 攻击，拒绝该请求。
优点：使用方便，开发简单，一定程度上能预防CSRF攻击；
缺点：这种机制完全依托于浏览器，Referer字段容易被故意篡改，或者被禁用。

2.请求中添加token并验证
原理：token就是服务端返回给客户端类似sessionid那样一长串的类值（长是为了防暴力猜解）。csrf依赖于浏览器访问网站时自动把对应网站的cookie带上，token不放入cookie（一般用form表单加个hidden属性的input标签来存放）csrf就没法获取token，这样我们就可以通过检测发送过来的数据包中是否有正确的token值来决定是否响应请求。
优缺点：
安全程度比Referer的方式要高；
实现方式上稍微复杂；
需要保证token存储的安全性。

3.在 HTTP 头中自定义属性并验证
原理：这种方法也是使用 token 并进行验证，和上一种方法不同的是，这里并不是把 token 以参数的形式置于 HTTP 请求之中，而是把它放到 HTTP 头中自定义的属性里。通过 XMLHttpRequest 这个类，可以一次性给所有该类请求加上 csrftoken 这个 HTTP 头属性，并把 token 值放入其中。这样解决了上一种方法在请求中加入 token 的不便，同时，通过 XMLHttpRequest 请求的地址不会被记录到浏览器的地址栏，也不用担心 token 会透过 Referer 泄露到其他网站中去。
优缺点：
使用方式较简单，而且token不容易泄露
使用场合较少，局限性较大。

（二）XSS是“跨站脚本攻击”：
①原理：恶意攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的时候，那么嵌入到web页面中script代码会执行，因此会达到恶意攻击用户的目的。

②XSS攻击分类：存储型、反射型、及 DOM-based型。 反射性和DOM-baseed型可以归类为非持久性XSS攻击。存储型可以归类为持久性XSS攻击。

③（持久型）存储型XSS：
原理是：将恶意代码上传或存储到服务器中，下次只要受害者浏览包含此恶意代码的页面就会执行恶意代码。
攻击步骤：

1. 攻击者将恶意代码提交到目标网站数据库中。
2. 用户打开目标网站时，网站服务器将恶意代码从数据库中取出，然后拼接到html中返回给浏览器中。
3. 用户浏览器接收到响应后解析执行，那么其中的恶意代码也会被执行。
   如何防范？
4. 后端需要对提交的数据进行过滤。
5. 前端也可以做一下处理方式，比如对script标签，将特殊字符替换成HTML编码这些等。

④（非持久型）反射性XSS
原理：一般指攻击者通过特定的方式来诱惑受害者去访问一个包含恶意代码的URL。当受害者点击恶意链接url的时候，恶意代码会直接在受害者的主机上的浏览器执行。
攻击步骤：

1. 攻击者在url后面的参数中加入恶意攻击代码。
2. 当用户打开带有恶意代码的URL的时候，网站服务端将恶意代码从URL中取出，拼接在html中并且返回给浏览器端。
3. 用户浏览器接收到响应后执行解析，其中的恶意代码也会被执行到。

⑤（非持久型）DOM XSS
原理：客户端的js可以对页面dom节点进行动态的操作，比如插入、修改页面的内容。DOM XSS 是基于文档对象模型的XSS。一般有如下DOM操作：

1. 使用document.write直接输出数据。
2. 使用innerHTML直接输出数据。
3. 使用location、location.href、location.replace、iframe.src、document.referer、window.name等这些。
   攻击步骤：
4. 攻击者构造出特殊的URL、在其中可能包含恶意代码。
5. 用户打开带有恶意代码的URL。
6. 用户浏览器收到响应后解析执行。前端使用js取出url中的恶意代码并执行。

⑥防御XSS攻击的手段：
1.cookie安全策略
在服务器端设置cookie的时候设置 http-only, 这样就可以防止用户通过JS获取cookie。 对cookie的读写或发送一般有如下字段进行设置：
http-only: 只允许http或https请求读取cookie、JS代码是无法读取cookie的(document.cookie会显示http-only的cookie项被自动过滤掉)。发送请求时自动发送cookie.
secure-only: 只允许https请求读取，发送请求时自动发送cookie。
host-only: 只允许主机域名与domain设置完成一致的网站才能访问该cookie。
2.XSS-Protection设置
目前该属性被所有的主流浏览器默认开启XSS保护。该参数是设置在响应头中目的是用来防范XSS攻击的。它有如下几种配置：
值有如下几种：默认为1.
0：禁用XSS保护。
1：启用XSS保护。
1;mode=block; 启用xss保护，并且在检查到XSS攻击是，停止渲染页面
3.XSS防御HTML编码和HTML 属性编码

8.es6解构赋值

二、作者：PickSeven

链接：https://www.nowcoder.com/discuss/637994?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

1. 自我介绍

9.HTTP 缓存？
原理：当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器缓存中有“本次要请求的资源”的副本，就可以直接从浏览器缓存中提取，而不需要重新向服务器请求这个资源。
http缓存都是从第二次请求开始的。
第一次请求资源时，服务器返回资源，并在响应头中回传资源的缓存参数；
第二次请求资源时，浏览器判断这些请求参数，命中强缓存就直接200，否则就把请求参数加到请求头中传给服务器，看是否命中协商缓存，命中协商缓存则返回304，否则服务器会返回新的资源。
分类：①根据是否需要重新向服务器发起请求来分类，可分为(强制缓存，协商缓存)
②根据是否可以被单个或者多个用户使用来分类，可分为(私有缓存，共享缓存)
常见的http缓存只能缓存get请求响应的资源，对于其他类型的响应则无能为力。

10.强制缓存 和 对比/协商缓存 具体是怎么缓存的？它们如何更新？

强制缓存：
在缓存数据未失效的情况下（即Cache-Control的max-age没有过期，或者Expires的缓存时间没有过期），那么就会直接使用浏览器的缓存数据，不会再向服务器发送任何请求，此时强制缓存生效，http状态码为200。
采用强制缓存方式的页面的加载速度是最快的，性能也是很好的。
但是在这期间，如果服务器端的资源修改了，但缓存时间没过期，那么浏览器页面是拿不到新的资源的，因为它不会再向服务器发请求了。这种情况就是我们在开发种经常遇到的，比如你修改了页面上的某个样式，在页面上刷新了但没有生效，因为走的是强缓存，所以Ctrl + F5一顿操作之后就好了。
跟强制缓存相关的header头属性有（Pragma > Cache-Control > Expires）

协商缓存：
当第一次请求时服务器返回的响应头中没有Cache-Control和Expires，或者Cache-Control和Expires过期，或者它的属性设置为no-cache时(即不走强缓存)，那么浏览器第二次请求时就会与服务器进行协商，与服务器端对比判断资源是否进行了修改更新，此时协商缓存生效，状态码可能为200或304。
如果服务器端的资源没有修改，就会返回304状态码，告诉浏览器可以使用缓存中的数据，这样就减少了服务器的数据传输压力。
如果服务器端的资源有更新，就会返回200状态码，服务器就会返回更新后的资源，并且将缓存信息一起返回。
跟协商缓存相关的header头属性有（ETag/If-Not-Match 、Last-Modified/If-Modified-Since）请求头和响应头需要成对出现。

协商缓存的执行流程是这样的：
当浏览器第一次向服务器发送请求时，服务器会在响应头中返回协商缓存的头属性：ETag和Last-Modified,其中ETag返回的是一个hash值，Last-Modified返回的是GMT格式的最后修改时间。
在浏览器第二次发送请求的时候，会在请求头中带上与ETag对应的If-Not-Match，其值就是响应头中返回的ETag的值，以及Last-Modified对应的If-Modified-Since。
服务器在接收到这两个参数后会做比较，如果返回的是304状态码，则说明请求的资源没有修改，浏览器可以直接在缓存中取数据，否则返回的是200状态码，服务器会直接返回最新的数据。

两种缓存的对比：
①强制缓存如果生效，不需要再和服务器发生交互
②协商缓存不管是否生效，都需要与服务端发生交互。

缓存的目的：

1. 减少了冗余的数据传输，节省了网费。
2. 缓解了服务器的压力， 大大提高了网站的性能
3. 加快了客户端加载网页的速度

11.防抖和节流？讲下思路？怎么实现？

12.Cookie 同源策略？
13.详细讲下 CSRF？恶意网站能不能拿到用户的cookie？怎么做才安全？

14.讲下希尔排序
15.Http2.0 有哪些特性？
16.讲下 JS 中你比较熟的地方？（闭包、原型、原型链、作用域链）
17.事件循环机制？Promise 函数与计时器怎么输出？为什么？
18.微任务和宏任务有哪些？