YSS

Write Less & Do More

关于第三方代码注入问题及解决

背景

sentry监控上有时会出现第三方代码的报错,通过观察可以发现,其实是第三方js在我们的页面进行注入的结果。

而更细节一点就是很多时候是浏览器厂商本身在做这件事情。

现状

现实的情况是我们根本无法做任何有效的拦截,因为是在手机App里自己做的这个事情。

相当于在用户端,等页面加载完后直接注入了一个script标签

而这个是现有技术拦截不了的。

且是无法正常阻止它代码的运行的。

解决

既然无法拦截,那么我们能做的就是,检测,分析,然后做对应的处理(对症下药)。

第一步:检测

初步想法是等到页面 onload 之后,检查所有的script标签,是否有非 fbcontent.cn 域名的链接,有,则直接上报

之所以不用mutationObserver ,还是用 load,是考虑

  1. 本身有可能有一些兼容性问题
  2. 如果在调用之前注入是无法检测到的
  3. 计算量太大了,因为我们整个页面都是通过vue生成的,意味着要遍历所有的节点

第二步:分析

我们需要仔细分析这段代码都做了哪些事情,它是怎么去做的,有没有危害我们正常页面展示的部分。

第三步:处理

尽我们最大的可能去规避不必要的风险,处理一起可以做到的处理。