1338989 - Taobao calls addEventListener with an integer rather than a function, making the page load fail

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect, P1)

Description

[Eric Tsai (no more review request accepted)]

Attachment: Comparision of Firefox and Chrome

Steps to reproduce:
1. Open URL:  https://h5.m.taobao.com/guang/index.html?scm=2027.1.2.129&spm=a215s.7406091.widget.3&locate=widget-3

Expected behavior: See the promotion content

Actual behavior: Only header load

This page loads promotion content via scripts, but there is one error message in console. I guess this is why content is not loaded.
>  TypeError: Argument 2 of EventTarget.addEventListener is not an object.[Learn More]  
> g.alicdn.com:96:38498

Comment 1

[Eric Tsai (no more review request accepted)]

It's also possible to reproduce this issue from Firefox mobile 51~54, Firefox 54 in responsive mode with Firefox mobile 54 UA string.

Comment 2

[Thomas Wisniewski]

It's failing on this call:

>return e.addEventListener("endreachedthreshold", 2000)

Other calls they make to addEventListener are actually sending in functions, not integers, as expected. This is the function that ultimately causes the issue (from https://g.alicdn.com/guang/m-bundle/1.4.5/p/index/index.js?v=1134634754_450929, slightly unminified):

>function r(e, t, n) {
>    e = (0, s["default"])(e);
>    for (var o in t) {
>        var r = t[o];
>        if (o !== d && null != r)
>            if (o === u) {
>                if (n) continue;
>                a["default"].driver.setStyles(e, r)
>            } else if ("on" === o.substring(0, 2)) {
>            var i = o.slice(2).toLowerCase();
>            a["default"].driver.addEventListener(e, i, r)
>        } else a["default"].driver.setAttribute(e, o, r)
>    }
>}

Note that it's looking for "on" at the start of the string to decide whether to call addEventListener, but in this case it's not a function. As such this is a site error. It works in Chrome because it has a bug which allows primitive values rather than functions:

>https://bugs.chromium.org/p/chromium/issues/detail?id=676845

But the site should change this, since WebKit is actually running into the same problem now, probably due to:

>https://bugs.webkit.org/show_bug.cgi?id=157882

This looks like it's an innocent error, where they can just change their variable name so the "on" at the start does not throw off their function, or change their wrappers for addEventListener/removeEventListener in the same JS file, and add guards to check that the value is actually a function, like this:

>addEventListener: function k(e, t, n) {
>  if (typeof n === "function") // add this
>    return e.addEventListener(t, n)
>},
>removeEventListener: function X(e, t, n) {
>  if (typeof n === "function") // add this
>    return e.removeEventListener(t, n)
>},

Eric, would you mind reaching out to them to change their code as appropriate?

Comment 3

[Eric Tsai (no more review request accepted)]

Bingqing, I think we can reach taobao as Thomas's comment 2 to fix this.

Comment 4

[Bingqing Li]

(In reply to Eric Tsai from comment #3)
> Bingqing, I think we can reach taobao as Thomas's comment 2 to fix this.

Sure. I'll give an update if there is any progress.

Comment 5

[Adam Stevenson [:adamopenweb]]

Attachment: m.taobao.com.jpg

Looks like the site has changed.