为何会有ToutiaoJSBridge is not defined的报错?

错误监控日志发现隔三差五的出现了如ToutiaoJSBridge is not defined&line=1&column=12 、Uncaught TypeError: ToutiaoJSBridge._handleMessageFromToutiao is not a function之类的报错,而且出现的比较集中,这到底是啥玩意?明明我的H5代码中是没有这个所谓的 ToutiaoJSBridge的,没有那么肯定是Toutiao干的(最近有运营投放页面到头条app),作案留下了重要线索!!!

想要知道前因后果,我觉得先要搞清楚什么是 jsBridge?

Bridge,顾名思义 桥梁; 纽带;那么这个jsBridge 简单点讲就是 js纽带,用来联接原生APP和原生中内嵌的H5页面的jsSDK。

在论坛找到比较完整的解释(来自于 https://blog.csdn.net/u014021258/article/details/81129702):

JsBridge,在移动开发中,我们讲究尽可能降低开发和更新维护成本,如微信小程序和Weex等都可以一次开发多端运行。究其原理,JavaScript起到了举足轻重的作用,它肩负起了与其他技术桥接的职责,任何一个移动操作系统中都包含可运行 JavaScript 的容器,例如 WebView 和 JSCore,运行 JavaScript 不用像运行其他语言时,要额外添加运行环境。JsBridge正是这样的桥接!

JsBridge给JavaScript提供了调用Native功能,Native也能够操控JavaScript。这样前端部分就可以方便使用地理位置、摄像头以及登录支付等Native能力啦。JSBridge构建 Native和非Native间消息通信的通道,而且是 双向通信的通道。

JS 向 Native 发送消息 : 调用相关功能、通知 Native 当前 JS 的相关状态等。
Native 向 JS 发送消息 : 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。

实际上,app特别是第三方app,web端并没提前定义好对应app的JSBridge(自家的APP和H5好说,可以提前加载,比如自己基于codova实现的jsdk),那么app往 WebView动态注入JavaScript脚本就变成了app惯用的技俩了(是不是很流氓)。

步骤是这样的,首先APP在H5中注入js脚本,曝露一些全局对象(包括方法),然后在原生 app 中调用这些对象或方法就可以了,因为app作为宿主,可以直接访问 h5。至于app到底想干啥,我想肯定不是干好事。

然后被我找到一个开源的JSBridge库:https://github.com/lzyzsd/JsBridge。给出了这样一个Notice:

This lib will inject a WebViewJavascriptBridge Object to window object. So in your js, before use WebViewJavascriptBridge, you must detect if WebViewJavascriptBridge exist. If WebViewJavascriptBridge does not exit, you can listen to WebViewJavascriptBridgeReady event, as the blow code shows:

 

    if (window.WebViewJavascriptBridge) {
        //do your work here
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , function() {
                //do your work here
            },
            false
        );
    }

所以,我们设计的H5报异常:ToutiaoJSBridge is not defined,很有可能是,头条注入脚本出现了异常,在我们H5中调用ToutiaoJSBridge的时候也没有先判端是否存在,结果就扑街了。

有些第三方APP貌似没有这么诚实,不会把这么轻易的暴露出来,不过通过分析错误日志中详细信息,一定会发现一些蛛丝马迹。

那么下一步就是如何解决这个问题,有什么方法可以有效防止第三方APP注入脚本到webview?如果我们web方面无为力,那么是不是只能被动接受,然后默默的忽略掉这一类错误信息?

发表评论

记录工作生活点滴。

返回
顶部