莫克力学习博客

由vivo自带浏览器的广告拦截引发的bug

起因

在某个项目的信息确认的页面在一部vivo手机的自带浏览器里，detail.js文件加载失败，在其他手机上都是正常的，经过排查，不论是重试加载js，还是更改js顺序，都无法正常加载该js文件。

最后将打包的文件名修改成confirm.js后，就能够正常加载了，这时候怀疑是浏览器的广告拦截导致的问题。接着将广告拦截关闭，再把文件名改回detail.js后，就能够正常加载该js文件了，现在已经确定是广告拦截将js的加载给阻止了。

测试vivo的广告拦截策略

被拦截的js文件为detail.js，然后将这几个文件名排列组合一下，看一下有哪几种组合的js会被拦截。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let script = []

for (let i = 0; i < 9; i++) {
  script[i] = document.createElement('script')
  script[i].onerror = function () {
    document.body.append(script[i].src + '::加载错误了')
  }
}

script[0].src = '/static/lymonTest/dealVerify/js/detail.js'
script[1].src = '/static/lymonTest/verify/js/detail.js'
script[2].src = '/static/lymonTest/verify/js/detaillist.js'
script[3].src = '/static/lymonTest/detail/js/verify.js'
script[4].src = '/static/lymonTest/detail/js/verifylist.js'
script[5].src = '/static/lymonTest/js/detail.js'
script[6].src = '/static/lymonTest/js/verify.js'
script[7].src = '/static/lymonTest/js/verifylist.js'
script[8].src = '/static/lymonTest/js/detaillist.js'

setTimeout(() => {
  for (let i = 0; i < 9; i++) {
    document.body.append(script[i])
  }
}, 3000);

根据上述代码，每个js文件会输出自己的文件名，如果加载失败，则会输出该文件名加载错误。然后我们测试一下在vivo自带浏览器里，有哪几个文件会被阻止加载，结果如下：
图片描述

由结果可以发现js/detail.js这个路径的js文件会被拦截，其余的则不会，由此可以判断只要是这个路径的js文件，都会发生加载失败的问题。

解决办法

项目中打包的文件名，尽量不要用detail这个文件名，防止被拦截加载，vivo的广告拦截策略我们没法查看以及更改，所以只能避免这种情况发生。