前端进阶题（面试必看）

网络&安全

❓输入URL地址后发生了什么事情？

1. DNS域名解析，从URL地址中获取域名地址，通过DNS服务器解析为IP地址。先本地缓存（浏览器、操作系统）》ISP网络服务商》根服务器（根域、一级域、二级域、三级域）
2. 建立TCP连接，HTTP协议是基于TCP协议的，浏览器与服务端通过三次握手建立TCP连接（如果是HTTPS则是四次握手，多了因此SSL握手）。
3. 下载数据，向服务端发送请求报文（header+body），服务端监听80、443端口，响应HTTP请求，返回页面数据。
4. 页面解析渲染，解析HTML为DOM树，CSS为规则树，构成渲染树进行布局和渲染。这个过程会重复多次下载、解析渲染，如有其他域名的资源，则会重复前面的步骤。
5. 断开连接，TCP四次挥手告别！

输入URL后都发生这些事情！

❓说说HTTP和HTTPS

• TCP：HTTP是建立在TCP协议之上的，TCP协议属于OSI网络模型的传输层协议。建立TCP协议需要经过三次握手：请求》确认》建立连接。
• HTTP：全称是超文本传输协议，图片、网页、视频、音频、文件都是HTTP的超文本，由浏览器“渲染”出来。优点是简单、灵活、快平台，缺点是无状态、明文传输。
  • HTTP请求响应的结构：首行（请求行、响应状态行）、header、body。
  • 状态码，200正常，3是重定向，4客户端错误，404资源不存在，5**服务端错误。
• HTTPS：是在HTTP的基础上添加了SSL/TLS安全层，解决数据明文传输的问题。
  • 默认端口443。
  • 4次握手建立链接，在HTTP的基础上，多了一次SSL链接握手。
  • 采用混合加密（公私钥加密秘钥，秘钥加密数据）保障数据安全传输。
  • 采用数据摘要，保障数据不被篡改。
  • 采用CA数字证书防止假冒网站、中间人攻击。CA证书中包含了公钥、网站身份信息等。
  • TLS是SSL的升级版，由国际化IOS组织发布。
• HTTP1.1与HTTP2.0，HTTP1.1是目前广泛支持和使用的协议版本，HTTP2.0在2015年发布，提升了传输的性能，Header支持压缩和优化，可以多路复用。

HTTP协议图文简述

❓HTTP协议有哪些版本，什么区别？

• HTTP1.1，比较普及的协议，特点是支持了长链接，可以并行传输。缺点是服务端要排队，存在队头阻塞的现象。
• HTTP2，基于HTTPS，支持了Header的压缩和优化，在安全性、效率上提升了。服务端也支持了多了复用，并行处理请求。
• HTTP3，还比较新，基于UDP协议，同时参考了TCP，兼顾效率和可靠。

❓POST和GET有什么区别？

• 数据位置：GET在URL上，问号后面的参数；POST在body中。
• 书签/缓存/刷新：GET可书签、缓存，POST的数据不可记录书签、缓存。
• 数据长度：GET有长度限制，URL长度2048，不同浏览器不同；POST没有限制。
• 使用场景：GET多用于获取数据，POST多用于新增、删除、修改。

❓什么是跨域？如何实现跨域？

• 首先起因是由于浏览器的一个安全机制——同源，AJAX只能访问同源的服务端，即协议+域名+端口相同。
• 但有时候需要跨域访问服务，就有了相应的办法：
  • JSONP利用），从而攻击当前网站，和SQL注入攻击的路径类似，都是非法输入恶意代码。
    • 对前端输入的内容做验证，如电话号码、邮箱、特殊字符等。
    • 对内容转义，vue中用v-text、v-bind、文本插值{{}}绑定都是自动做了转义的，因此谨慎使用v-html。

    Cross site scripting 的简称为XSS，是因为CSS就重名了。

    ❓跨站请求伪造CSRF（Cross site request forgery）

    ✏️钓鱼网站利用已登录的cookie凭证发起非法请求，从而完成攻击。

    • 通常需要用到跨域请求，服务端应该对跨域请求进行白名单验证（referer、origin）。
    • 设置客户端cookie的权限，SameSite：跨站不传输cookie。HTTPOnly，客户端不可访问cookie。
    • 服务端添加token验证，而不仅仅靠cookie
    • 在产品设计上，对一些危险操作，如支付转账，应该加上客户验证步骤。

    ❓JSONP的安全问题

    • 对于服务端，防止非法访问，验证请求的referer、origin是否在白名单。
    • 对于客户端，防止返回的内容存在跨站脚本，对callback返回的内容进行转义。

    ❓CSP安全策略配置

    ✏️CSP（Content Security Policy）网页内容安全策略，相当于配置了一个白名单，告诉浏览器那些外部资源可以加载、执行，具体实现是由浏览器完成的。

    • 通过Header配置：Content-Security-Policy: script-src 'self';
    • 通过HTML的的meta标签：class MySingle { constructor() { //创建实例 } static getInstance() { //静态方法属于类本身，这里的this也就指向类本身 if (!this.instance) this.instance = new MySingle() return this.instance; } } //使用 MySingle.getInstance()

      ❓策略模式：将策略算法和策略的执行器分开，可灵活扩展策略。

      ✏️封装一个策略的执行器，然后策略算法可以灵活的扩展添加。

      //计算薪资，根据员工绩效等级（A、B、C）计算薪资
      const salaryCenter = {
        //计算薪资
        getSalary(value, mode) {
          return this[mode](value);
        },
        //添加绩效等级及其策略
        addStrategy(mode, strategyFunc) {
          this[mode] = strategyFunc;
        }
      }
      
      //添加不同绩效等级的策略，这就是对扩展开放
      salaryCenter.addStrategy('A', function (value) {
        return value * 1.2;
      });
      salaryCenter.addStrategy('B', function (value) {
        return value * 1;
      });
      salaryCenter.addStrategy('C', function (value) {
        return value - 200;
      });
      
      //使用
      salaryCenter.getSalary(100,'A')
      

      ❓工厂模式：把new()封装起来，面向抽象编程。

      ✏️根据一个标识来创建实例，TS中可以用接口来约束创建的实例。

      //工厂模式
      class AnimateFactory {
        static Create(type) {
          switch (type) {
            case 'bird':
              return new Bird();
            case 'duck':
              return new Duck();
            default:
              console.log('type not exist:' + type);
          }
        }
      }
      

      ❓发布订阅模式：发布消息-订阅消息事件

      ✏️由一个消息中心来管理订阅的消息事件，通过发送消息来触发事件。用于不同组件之间的通信。

      //消息中心
      class EventCenter {
        constructor() {
          this.task = {};
        }
        //订阅消息，注册消息处理回调
        registry(type, func) {
          this.task[type] ??= [];
          //支持重复注册
          this.task[type].push(func);
        }
        // 发送消息，触发消息回调的执行
        emit(type, ...args) {
          if (!this.task[type]) return;
          this.task[type].forEach(func => {
            func.apply(this, args);
          })
        }
        //用单例返回消息中心实例
        static getInstance() {
          this.instance ??= new EventCenter();
          return this.instance;
        }
      }
      
      //使用，注册、发布
      EventCenter.getInstance().registry('ele', (food) => {
        console.log('饿了，开始做' + food);
      })
      EventCenter.getInstance().emit('ele', '面条')
      

      ❓观察者模式：对一个目标对象进行观察（监测），当目标变化时触发响应回调。

      ✏️Vue2的双向绑定，监听数据变化就是拦截属性的get、set，观察数据的变更。

      ---