前端面试题之浏览器与web安全

1、事件机制

• 事件触发的三个阶段：

捕获阶段 —— window 往事件触发处传播，遇到注册的捕获事件会触发
目标阶段 —— 传播到事件触发处时触发注册的事件
冒泡阶段 —— 从事件触发处往 window 传播，遇到注册的冒泡事件会触发
复制代码

• 捕获DOM事件的具体流程：

window对象 => document对象 => html标签 => body标签 => ... => 目标元素(冒泡反之)
复制代码

• Event 对象的常见应用

event.preventDefault()              // 阻止默认事件,例如a标签的跳转行为
event.stopPropagation()             // 阻止冒泡
event.stopImmediatePropagation()    // 事件响应优先级：例如同一元素绑定不同事件时，触发a事件不让b事件触发
event.currentTarget                 // 当前绑定事件的元素
event.target                        // 当前被点击的元素
复制代码

2、跨域

同源策略：

• 浏览器出去安全考虑所做的限制，协议、域名、端口有一个不同就是跨域，此时 Ajax 请求不能发送，Cookie、LocalStorage 和 IndexDB 无法获取，DOM也无法获取。

跨域的几种解决方法：

• JSONP —— 利用 复制代码

  封装一个 jsonp 方法

  function jsonp({url, params, cb}) {
      return new Promise((resolve, reject) => {
          //创建script标签
          let script = document.createElement('script');
          //将回调函数挂在 window 上
          window[cb] = function(data) {
              resolve(data);
              //代码执行后，删除插入的script标签
              document.body.removeChild(script);
          }
          //回调函数加在请求地址上
          params = {...params, cb}
          let arrs = [];
          for(let key in params) {
              arrs.push(`${key}=${params[key]}`);
          }
          script.src = `${url}?${arrs.join('&')}`;
          document.body.appendChild(script);
      });
  }
  //使用
  function sayHi(data) {
      console.log(data);
  }
  jsonp({
      url: 'http://localhost:3000/say',
      params: {
          //code
      },
      cb: 'sayHi'
  }).then(data => {
      console.log(data);
  });
  复制代码

  • CORS —— 服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。
  • document.domain —— 只适用于二级域名相同的情况，如a.test.com和b.test.com，只需要给页面添加 document.domain = 'test.com' 表示二级域名都相同就可以实现跨域。
  • postMessage —— H5新增的跨域通信方式，如窗口 A(http:A.com) 向跨域的窗口 B(http:B.com) 发送信息

  # 在A中发送数据
  window.postMessage('data', 'http://B.com');
  # 在窗口B中监听
  window.addEventListener('message', function(event){
      console.log(event.origin);
      console.log(event.source);
      console.log(event.data);
  }, false)
  复制代码

  • Hash：url 地址中 '#' 后面的部分，hash 的改变页面不会刷新

  # 使用场景：当页面A通过iframe或frame嵌入了跨域的页面B
  # 在A中的代码：
  var B = document.getElementByTagName('iframe');
  B.src = B.src + '#' + 'data';
  # 在B中的代码：
  window.onhashchange = function () {
      var data = window.location.hash;
  }
  复制代码

  3、渲染机制

  • 浏览器渲染过程：
    • 处理 HTML 并构建 DOM 树
    • 处理 CSS 构建 CSS 规则树
    • 将 DOM 树 与 CSS 规则树 合并成一个渲染树
    • 根据渲染树来布局，计算每个节点的位置
    • 调用 GPU 绘制，合成图层，显示在屏幕上

   

  

   

   

  • 重绘（Repaint）和回流（Reflow）
    • 重绘 —— 当节点需要更改外观而不会影响布局的，比如改变 color
    • 回流 —— 布局或者几何属性需要改变
  • 何时发生重绘和回流（回流必定会发生重绘，重绘不一定会引发回流。）
    • 添加或删除可见的DOM元素
    • 元素的位置发生变化
    • 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
    • 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
    • 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
  • 减少重绘和回流
    • 使用 translate 替代 top
    • 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
    • 把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改 100 次，然后再把它显示出来
    • 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
    • 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
    • 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
    • CSS 选择符从右往左匹配查找，避免 DOM 深度过深
    • 将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于 video 标签，浏览器会自动将该节点变为图层。

  4、浏览器的缓存机制

  缓存的原理 —— 将请求来的资源存放到本地磁盘当中，下次获取资源则直接在磁盘当中读取而不再去向服务器发送请求。

  缓存的分类：

  • 强缓存 —— 通过两种响应头实现：Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求，state code 为 200

  Expires: Wed, 22 Oct 2018 08:41:00 GMT
  // Expires 是 HTTP / 1.0 的产物，表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期，需要再次请求。
  // 并且 Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效。
  
  Cache-control: max-age=30
  // Cache-Control 出现于 HTTP / 1.1，优先级高于 Expires 。该属性表示资源会在 30 秒后过期，需要再次请求。
  复制代码

  • 协商缓存 —— 如果缓存过期了，我们就可以使用协商缓存来解决问题。协商缓存需要请求，如果缓存有效会返回 304。 协商缓存需要客户端和服务端共同实现
    • Last-Modified 和 If-Modified-Since —— 表示本地文件最后修改日期，If-Modified-Since 会将 Last-Modified 的值发送给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来。(但是如果在本地打开缓存文件，就会造成 Last-Modified 被修改，所以在 HTTP / 1.1 出现了 ETag 。)
    • ETag 和 If-None-Match —— ETag 类似于文件指纹，If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否变动，有变动的话就将新的资源发送回来。并且 ETag 优先级比 Last-Modified 高

  5、Web 安全

  XSS

  • 基本概念：XSS，也称跨域脚本攻击，英文名 Cross-site scripting
  • 如何攻击：向页面注入恶意的标签或 js 代码来攻击网站。
  • 如何防御：让恶意插入的标签或js代码不可执行，如转义输入输出的内容

  CSRF

  • 基本概念：CSRF，也称跨站请求伪造，英文名 Cross-site request forgery
  • 如何攻击：利用用户的登录态发起恶意请求。
  • 如何防御：
    • Get 请求不对数据进行修改
    • 不让第三方网站访问到用户 Cookie
    • 阻止第三方网站请求接口
    • 请求时附带验证信息，比如验证码或者 token