fix 前端 js error日记

问题--$符号被污染

最近线上js error 监控系统报上这麼一个问题，说下面这段代码中tooltip is not a function，一看有点蒙蔽啊，这个tooltip是我们自定义的jquery 插件函数，我们代码里确定是引入并绑定上了，我们自己看无论是线上还是线下也都很正常。

$(document).ready(()=>{
  // 初始化所有页面 tooltip
  $('[data-toggle="tooltip"]').tooltip();
});

无法重现的bug，这让我们很为难啊，为难也得想办法fix掉罗，精益求精才能打磨出用户体验出色的产品嘛。仔细分析一番，发现虽然自己无法重现，但是bug却存在一定的规律，就是我们这种bug只会出现在$(document).ready 等事件中，也就是说是异步流中，同步代码中的tooltip函数是没有报错的，那就说明同步代码中的$符号还是我们自己的$，等dom ready之后，$就不是我们的$了，所以才会有这种报错。

到此已经基本猜测到了，那就是我们的页面有被第三方插入js代码(恶意插入或者浏览器插件等)，它们也使用了$符号，毕竟$符号也是蛮常见的，很多js库也都在用。有了思路就是好事啊，既然怀疑是$符号被污染了，那解决方案大体就有两种了：一是我们保证页面不会被插入第三方代码（上https，使用CSP等）；二是事后恢复，你污染了但我在自己使用时恢复过来，保证我使用的$符号就是我们自己的$。也许你会说我不用$符号不就行了嘛，改成J$总没有人和你重复了吧（你确定？）。但是实际上这是一个不太好的方案，第一我们需要替换项目中所有用到$符号的地方，第二我们需要我们的开发工程师严格遵守使用J$代替$，这也不太现实啊。解决问题的原则应该是尽量不给用户增加负担，同时也不给我们的开发工程师增加负担。

对于事后恢复策略，我们也有两种方式，一种是利用jQuery在ready函数中是会回传自身引用的特点（久经考验的jQuery还是很老道啊），我们只需要在ready函数中增加一个$形参就好了，如下面代码所示，这样就保证函数里的$符号使我们自己的$了，不再是window上的，但是这种方案我们就得修改所有ready的监听函数，增加$形参，而且也只解决了dom ready中的$污染问题，无法解决其他异步流中的问题，比如setTimeout、window.onload等。故没有采用。

$(document).ready(($)=>{
  // 初始化所有页面 tooltip
  $('[data-toggle="tooltip"]').tooltip();
});

我们采用的是在引入jQuery时先保存，再在dom ready时立马恢复，让后续的异步流代码都能正确使用$符号，如下所示

const j$ = jQuery;// save $
$(() => {
  window.$ = j$; // recovery $
});

后面我们还采用了Content-Security-Policy来一定程度上保证我们的页面干净（https一时还难以全站切换）的补充策略。效果还是很明显啊，上线后error都降为0了。

image.png