「bug信息收集系统」进阶及源码解析

内容简介

上一章我们介绍了「bug信息收集系统」的搭建和基本使用，本章将介绍它的高级用法，并对源码进行解析。主要分为以下三个部分：

• 数据安全问题，如何保证上报数据的安全性？
• front-tool的扩展功能
• front-tool的源码解析
• 由于「前端报错信息收集」功能还在开发中，这里暂不作介绍

数据安全问题（leanCould中的权限管理）

问题所在

我们先来明确目前遇到的问题

• 数据不安全是由于leanCloud的配置信息（APP ID，APP KEY）是通过明文保存到前端代码中的。
• 即使代码进行了混淆，但使用过leanCloud的同学还是可以很容易从中找到配置信息。
• 获取配置信息后，通过leanCloud提供的JS方法就可以获取上报的数据内容。造成用户信息的泄漏。

leanCloud的配置信息是不可避免会被泄漏的（即使通过后端返回，黑客也可以查看接口拿到配置信息），那我们怎么在配置信息不安全的情况下，仍保持数据的安全性，不让黑客获取我们上报的数据呢？

解决方法

我们可以通过leanCould的访问控制列表（ACL 机制）（Access Control List）来实现
其原理通过在leanCloud中设置不同的角色，并为不同的角色设置不同的权限，来约束其行为。具体流程如下：

• 设置两个角色，role_write，role_read。
• 为role_write角色仅分配写权限（再明确地说，是新增数据项的权限）。
• role_read角色分配读权限，及删除权限。
• 在front-tool组件中使用role_write角色登录。
• 在Bug的管理系统（bug-list，bug-detail）中使用role_read角色登录。

这样即使被黑客获取了role_write角色的配置信息，也仅能添加新数据，不能修改，更不能查看。
而role_read角色是对于内部人员使用的，没有信息安全问题。从而解决数据安全问题。

具体配置方法如下

第一步，调用leanCloud方法添加两个用户角色。

• 注意：这里需要将角色的账号密码自行记录起来，因为密码是不会明文保存到leanCloud上的，要找回来比较麻烦，自行保存比较好。
• 角色注册完成后，进入之前创建的应用，找到系统默认创建的_User类，点击

• 右侧展示的，就是我们刚创建的两个角色

第二步，关闭leanCloud使用js添加角色的权限

• 不知道大家发现没有，这上面有一个坑，创建角色仅仅使用配置信息即可完成。
• 黑客拿到配置信息后，创建新角色，就可以绕过或破坏（如删除角色）我们的角色权限机制。
• 所以这里需要在leanCloud后台修改配置，禁止通过JS进行角色的相关操作。
• 同样找到_User，点击其他，找到「权限设置」选项，将里面所有的权限都设置「指定用户」，即没有角色对其进行修改。
• 这样就可关闭_User类的操作功能，通过JS代码无法对其进行修改。

第三步，设置bug类的访问权限

• 找到bug类，打开「权限设置」，为里面不同的权限分配到不同角色上。
• 把add_fields（新建字段），create（新建数据），指定用户到role_write上，即只有该角色可以做新增的操作
• 为delete（删除数据），find（搜索），get（根据id查询），指定用户到role_read上，即只有该角色可以做查询删除操作
• update（修改数据项）置空

第四步，在vue组件中，添加登录语句。

• 在front-tool组件中使用role_write角色登录。
• 在Bug的管理系统（bug-list，bug-detail）中使用role_read角色登录。

• 方法很简单，在初始化后面加一条登录语句即可

   AV.init({
    appId: 'xxx',
    appKey: 'xxx',
  })
  AV.User.logIn('role_write', 'xxx')

front-tool功能扩展

接口检测功能

• 组件可配置一个接口检测函数ajaxHook，利用该函数可以对所有接口返回的数据进行检查。
• ajaxHook接受一个ajaxData参数，里面记录了当前接口的信息，如request，response，header等。可用于检查接口状态，对接口进行断言。
• 当接口返回的状态码不正确时，在函数中返回true，即可触发数据上报功能。
• 如果希望在生产环境也使用接口检测功能，自动上报数据，需要将front-tool组件的useInProd参数设置为true。
• 该函数的意义在于检测生产环境的接口报错，做错误监控。
• 开发同学可以每天上班前到Bug信息收集系统中通过URL检索生产环境的bug信息，检测线上问题。

添加自定义菜单

• 在front-tool组件中，我们可以添加一些自定义的方法
• 实现某些便捷的功能，方便测试同学使用的方法，提高效率，如「清除token，重新登录」，「清除缓存信息等」
• 使用方法进行菜单配置即可，如

front-tool源码解析

运行环境（域名环境）检测

• 原理很简单，检测当前页面URL是否匹配特定的域名前缀。

  // 获取运行环境
  getRuntimeEnv() {
    let envObj = {
      dev: 'xxx',
      test: 'xxx',
      pre: 'xxx',
      prod: 'xxx',
    }
    for (let key in envObj) {
      if (location.href.indexOf(envObj[key]) !== -1) {
        return key
      }
    }
    return 'local'
  }

全局方法注入及注销

• 组件创建时，会先获取当前域名环境，并检测useInProd参数，如果是生产环境且useInProd不为真。则将全局暴露的函数全部设置为空函数。
• 否则进入初始化函数，覆写ajax功能，往ajax相关函数中加入我们想要的代码。
• 注册各个全局函数
• 其中AV是leanCloud定义的全局变量，获取AV._config.applicationId，用以判断leanCloud是否被初始化过。

• 做这个检测，是因为在vue项目开发中，热编译会致使部分代码会被重新加载。导致leanCloud多次加载而报错。故需要在这里先检测是否已经被加载过，再去进行初始化操作。

  init() {
     this.resetAjax() // 覆写ajax
     this.$root.__proto__.$addCustomData = this.addCustomData.bind(this) // 注册全局函数
     this.$root.__proto__.$clearCustomData = this.clearCustomData.bind(this)
     this.$root.__proto__.$addGlobalData = this.addGlobalData.bind(this)
     this.$root.__proto__.$clearGlobalData = this.clearGlobalData.bind(this)
     window.$collectData = this.reportDate.bind(this)
     if (!AV._config.applicationId) { // 检测AV是否已经被初始化过
       AV.init({
         appId: 'I7QMGWueNtd27ILAiMQqUAzI-gzGzoHsz',
         appKey: 'WRoSIQ8hSGLq9xLbaWDe9f7y',
       })
       AV.User.logIn('XtRuRZtca-for-add', 'Xw8XFNAidgEbJefXnCuG')
     }
   }

ajax覆写，实现接口监听

• 同样的，我们通过window._hadResetAjax变量标识ajax是否已经被复写过，防止多次运行，多次覆写。

• ajax覆写的原理，

  • 是先将ajax原本的函数通过变量保存，
  • 覆写ajax的函数，
  • 在覆写的函数中加入我们的代码，并调用前面保存的ajax原始函数，
  • 相当于在ajax函数中添加hook。和vue的生命周期概念类似，运行到某环节时，执行某操作。
• 需要注意的是，ajax的相关函数是定义在其原型链上的，在保存其原始函数时，需要保存原型链上的函数

• 首先通过变量保存原始的window.XMLHttpRequest，及其原型链上的open，send，setRequestHeader方法

  let originXHR = window.XMLHttpRequest
  let originOpen = originXHR.prototype.open
  let originSend = originXHR.prototype.send
  let originSetRequestHeader = originXHR.prototype.setRequestHeader

• 覆写 window.XMLHttpRequest 构造函数

  • 在新的构造函数内部生成原始window.XMLHttpRequest对象的实例
  • 复写open，send，setRequestHeader方法。复写方法是让其重新赋值为一个新的函数，并在该函数中添加我们的代码。在最后调用一开始保存的，原始的window.XMLHttpRequest中对应的方法
  • 调用原始方法时，需要通过call方法修改this的指向，让其指到window.XMLHttpRequest实例。
  • 在覆写函数时，需要将接收的函数参数原封不动地传会给原始的方法中，不能影响和改变函数的使用方式。这也是为什么不影响axios的使用，因为我们覆写的是ajax的底层实现。axios是在其内容上进行二次开发的，所以加载本组件不会对axios有任何影响
  • 原则上，可以通过这种方式对ajax进行任意次的覆写

• 这里介绍一下每个覆写函数的中做了什么操作

  • 覆写open，用于收集请求方式，请求链接，请求的query参数。
  • 覆写setRequestHeader，用于收集请求的头信息，以便收集如token等验证信息。
  • 覆写send，用于手机post请求的参数，timeout，responseType等信息。

• 最后是监听接口loadend事件，即接口响应事件

  • 记录接口返回的内容。
  • 进行接口hook操作，调用父组件传入的ajaxHook函数，并在函数中传递本次接口调用的相关信息。
  • 当ajaxHook返回true时，调用数据上报函数，上报数据。
  • 这里做了一个优化，对请求的链接进行检测，当接口是leanCloud的接口时，不进行数据记录以及ajaxHook。

• 如果大家对JS的继承有印象的话，会发现，这个做法与JS的实例继承类似，在内部生产父类的实例，对实例进行一系列操作后，返回这个实例

  // 重写AJAX
  resetAjax() {
    if (window._hadResetAjax) { // 如果已经重置过，则不再进入。解决开发时局部刷新导致重新加载问题
      return
    }
    window._hadResetAjax = true
    let originXHR = window.XMLHttpRequest
    let originOpen = originXHR.prototype.open
    let originSend = originXHR.prototype.send
    let originSetRequestHeader = originXHR.prototype.setRequestHeader
  
    // 重置事件
    window.XMLHttpRequest = () => {
      let ajaxData = {} // 整个ajax数据，收集数据时用
      let realXHR = new originXHR()
  
      // 重置操作函数，获取请求数据
      realXHR.open = (method, url, asyn) => {
        ajaxData.request = {
          method: method,
          url: url.split('?')[0],
          data: this.getParams(url),
          header: {},
        }
        originOpen.call(realXHR, method, url, asyn)
      }
  
      // 重置设置请求头的函数
      realXHR.setRequestHeader = (header, value) => {
        ajaxData.request.header[header] = value
        originSetRequestHeader.call(realXHR, header, value)
      }
  
      // 重置操作函数，获取请求数据
      realXHR.send = (postData) => {
        ajaxData.request.timeout = realXHR.timeout
        ajaxData.request.responseType = realXHR.responseType
        if (postData) {
          ajaxData.request.data = typeof postData === 'string' ? this.getParams(`?${postData}`) : postData
        }
        try { // 防止timeout等报错，造成程序阻塞
          originSend.call(realXHR, postData)
        } catch (e) {
          console.log(e)
        }
      }
  
       // 监听加载完成，获取回复的报文
       realXHR.addEventListener('loadend', () => {
         ajaxData.response = realXHR.response
         if (ajaxData.request.url.indexOf('api.leancloud.cn') === -1) {
           this.ajaxList.push(ajaxData)
           if (this.ajaxHook) { // 外部执行钩子
             this.ajaxHook(ajaxData) && this.reportDate()
           }
         }
       }, false)
       return realXHR
    }
  },
  

讲完了，我要回去搬砖了，88