2021年前端校招面试题笔记整理（二）

一、csrf和xss的网络攻击及防范

什么是CSRF(跨站请求伪造)

当用户访问A（信任网站）网站并登录成功时，在用户处产生A的Cookie。这时候用户访问了B（危险网站）网站，当B要求访问第三方站点（A）的时，浏览器会带着用户最开始登录A的时候产生的Cookie访问A，而A网站并不能分辨请求是由用户发出的还是由B发出的，这时候B网站就能模拟用户操作，例如转账等操作。

如何防范CSRF：

1 .使用token：可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。

• token和cookie的区别，基于token的身份验证就是服务端需要验证 Token是自己生成的，而非伪造的，比如说服务端用 HMAC-SHA256 加密算法，再加上一个只有服务端才知道的密钥， 对数据做一个签名， 把这个签名和数据一起作为 Token 发给客户端， 客户端收到 Token 以后可以把它存储起来，比如存储在 Cookie 里或者 Local Storage 中，由于密钥除了服务端任何其他用户都不知道， 就无法伪造令牌(Token)。cookie是保存在本地终端的数据。cookie由服务器生成，发送给浏览器，浏览器把cookie以kv形式保存到某个目录下的文本文件内，下一次请求同一网站时会把该cookie发送给服务器。总的来说就是token是带有加密的身份信息，相比cookie更加安全
  

2 .检查http头部的refer:根据 HTTP 协议，在 HTTP 头中有一个字段叫 refer，它记录了该 HTTP 请求的来源地址。例如我们要在网上银行执行转账，那么我们发出去的请求的http中的refer通常是通常是以 bank.example 域名开头的地址，既该银行的页面上的url，而黑客执行CSRF攻击的时候http中的refer是黑客自己网站的url。如果 Referer 是其他网站的话，则有可能是黑客的 CSRF 攻击，拒绝该请求。

3.使用验证码: 在表单中增加一个随机的数字或字母验证码，通过强制用户和应用进行交互，来有效地遏制CSRF攻击

什么是XSS攻击（跨站脚本攻击）

XSS跨站脚本攻击:黑客想尽一切方法 将一段脚本内容放到目标网站的目标浏览器上解释执行，去获取cookie，或者其他用户身份信息。

• 反射型： 反射型 XSS 一般是攻击者通过特定手法（如电子邮件），诱使用户去访问一个包含恶意代码的 URL，当受害者点击这些专门设计的链接的时候，恶意代码会直接在受害者主机上的浏览器执行。对于访问者而言是一次性的，具体表现在我们把我们的恶意脚本通过 URL 的方式传递给了服务器，而服务器则只是不加处理的把脚本“反射”回访问者的浏览器而使访问者的浏览器执行相应的脚本。反射型 XSS 的触发有后端的参与，要避免反射性 XSS，必须需要后端的协调，后端解析前端的数据时首先做相关的字串检测和转义处理。此类 XSS 通常出现在网站的搜索栏、用户登录口等地方，常用来窃取客户端 Cookies 或进行钓鱼欺骗。

• 存储型：攻击者事先将恶意代码上传或储存到漏洞服务器中，只要受害者浏览包含此恶意代码的页面就会执行恶意代码。这就意味着只要访问了这个页面的访客，都有可能会执行这段恶意脚本，因此储存型XSS的危害会更大。存储型 XSS 一般出现在网站留言、评论、博客日志等交互处，恶意脚本存储到客户端或者服务端的数据库中。

如何防范XSS攻击：
1 . cookie设置httpOnly属性：HTTPOnly是在Set-Cookie时被标记的。服务器可能会设置多个Cookie（多个key-value对），而HttpOnly可以有选择性地加在任何一个Cookie值上。在某些时候，应用可能需要JavaScript访问某几项Cookie，这种Cookie可以不设置HttpOnly标记；而仅把HttpOnly标记给用于认证的关键Cookie。添加httponly后cookie就不会被JavaScript读取到。

2 . 输入检查： 输入检查的逻辑，必须放在服务器端代码中实现。如果只是在客户端使用JavaScript进行输入检查，是很容易被攻击者绕过的。目前Web开发的普遍做法，是同时在客户端JavaScript中和服务器代码中实现相同的输入检查。客户端JavaScript的输入检查，可以阻挡大部分误操作的正常用户，从而节约服务器资源。在XSS的防御上，输入检查一般是检查用户输入的数据中是否包含一些特殊字符，如<、>、’、“等，如果发现存在特殊字符，者将这些特殊字符过滤或者编码。

3 .输出检查： 一般来说，除了富文本的输出外，在变量输出到HTML页面时，可以使用编码或转义的方式来防御XSS攻击。

---

二、cookie和session、localstorage和sessionstorage的区别的区别

1. cookie数据存放在客户的浏览器上，session数据放在服务器上。

2. cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
   考虑到安全应当使用session。

3. session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
   考虑到减轻服务器性能方面，应当使用COOKIE。

4. 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

下面从几个方向区分一下cookie，localstorage，sessionstorage的区别

1. 生命周期：
   Cookie：可设置失效时间，否则默认为关闭浏览器后失效
   Localstorage:除非被手动清除，否则永久保存
   Sessionstorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除

2. 存放数据：
   Cookie：4k左右
   Localstorage和sessionstorage：可以保存5M的信息

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

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

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

---

三、web性能优化

1 . 降低请求量：合并资源，减少HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。

• minify/gzip: 是用PHP5开发的应用，通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件，移除一些不必要的空格和注释，进行gzip压缩，并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service非常像，不过Minify可以合并任何你想要合并的JavaScript和CSS文件。
• webP: 是 Google 的一种可以同时提供有损压缩（像 JPEG 一样）和透明度（像 PNG 一样）的图片文件格式，不过与 JPEG 或 PNG 相比，这种格式可以提供更好的压缩。
• lazyLoad: 当网页页面滚动到相应的地方，对应位置的内容才进行加载显示，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。

2 . 加快请求速度：预解析*DNS，减少域名数，并行加载，CDN 分发。（*DNS解析跳到末尾）

• DNS Prefetch(DNS预获取)：DNS预解析是浏览器试图在用户访问链接之前解析域名，这是计算机的正常DNS解析机制。域名解析后，如果用户确实访问该域名，那么DNS解析时间将不会有延迟。
• CDN 分发：CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络"边缘"，使用户可以就近取得所需的内容，解决Internet网络拥塞状况，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因，解决用户访问网站的响应速度慢的根本原因。

3 . 缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage。

• HTTP 协议缓存请求: 如果服务器页面的内容没有更新，浏览器将把本地缓存的内容给用户，不用请求服务器。如果客户端缓存内容过期了，浏览器发送了一个请求给服务器，这时，服务器还可以进一步判断请求的页面内容是否有更改，如果没有更改，也不用进行磁盘操作去读取页面内容，而是直接返回一个特殊的状态码给客户端，客户端收到这个状态码后就直接取本地的缓存展现给用户浏览。
• 离线缓存 manifest: 简单来说manifest能让你的应用在无网的情况下也能访问。
  它有三大优势：
  1、离线浏览，无网情况下也能正常访问；
  2、更快的加载速度，缓存在本地访问速度自然更快；
  3、减轻服务请求压力，文件缓存后不需要再次请求，只需要请求需要更新的文件。

4 . 渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline。

• 服务端渲染：简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记（CSS）"混合"为客户端上完全交互的应用程序
• pipeline： 简单来说，就是一套运行于Jenkins上的工作流框架，将原本独立运行于单个或者多个节点的任务连接起来，实现单个任务难以完成的复杂发布流程

---

四、HTML5、CCS3新增的特性

html5：
1.标签增删

• 8个语义元素 header section footer aside nav main article figure
• 内容元素mark高亮 progress进度
• 新的表单控件calander date time email url search
• 新的input类型 color date datetime datetime-local email
• 移除过时标签big font frame frameset

2）canvas绘图，支持内联SVG。支持MathML

3）多媒体audio video source embed track

4）本地离线存储，把需要离线存储在本地的文件列在一个manifest配置文件

5）web存储。localStorage、SessionStorage

css3：

CSS3边框如border-radius，box-shadow等；CSS3背景如background-size，background-origin等；CSS3 2D，3D转换如transform等；CSS3动画如animation等。

---

五、HTTP2.0 的特性

http2.0的特性如下：

1. 内容安全，应为http2.0是基于https的，天然具有安全特性，通过http2.0的特性可以避免单纯使用https的性能下降

2. 二进制格式，http1.X的解析是基于文本的，http2.0将所有的传输信息分割为更小的消息和帧，并对他们采用二进制格式编码，基于二进制可以让协议有更多的扩展性，比如引入了帧来传输数据和指令

3. 多路复用，这个功能相当于是长连接的增强，每个request请求可以随机的混杂在一起，接收方可以根据request的id将request再归属到各自不同的服务端请求里面，另外多路复用中也支持了流的优先级，允许客户端告诉服务器那些内容是更优先级的资源，可以优先传输，

4. 提升访问速度（可以对于，请求资源所需时间更少，访问速度更快，相比http1.0）

---

*DNS解析过程

1. 浏览器先检查自身缓存中有没有被解析过的这个域名对应的ip地址，如果有，解析结束。同时域名被缓存的时间也可通过TTL属性来设置。
2. 如果浏览器缓存中没有（专业点叫还没命中），浏览器会检查操作系统缓存中有没有对应的已解析过的结果。而操作系统也有一个域名解析的过程。在windows中可通过c盘里一个叫hosts的文件来设置，如果你在这里指定了一个域名对应的ip地址，那浏览器会首先使用这个ip地址。
3. 如果至此还没有命中域名，才会真正的请求本地域名服务器（LDNS）来解析这个域名，这台服务器一般在你的城市的某个角落，距离你不会很远，并且这台服务器的性能都很好，一般都会缓存域名解析结果，大约80%的域名解析到这里就完成了。
4. 如果LDNS仍然没有命中，就直接跳到Root Server 域名服务器请求解析
5. 根域名服务器返回给LDNS一个所查询域的主域名服务器（gTLD Server，国际顶尖域名服务器，如.com .cn .org等）地址
6. 此时LDNS再发送请求给上一步返回的gTLD
7. 接受请求的gTLD查找并返回这个域名对应的Name Server的地址，这个Name Server就是网站注册的域名服务器
8. Name Server根据映射关系表找到目标ip，返回给LDNS
9. LDNS缓存这个域名和对应的ip
10. LDNS把解析的结果返回给用户，用户根据TTL值缓存到本地系统缓存中，域名解析过程至此结束

参考

• https://blog.csdn.net/weixin_43813718/article/details/105587291
• https://blog.csdn.net/qq_38218238/article/details/82425974