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

NEW
Unassigned

Status

Tech Evangelism
Mobile
9 months ago
9 months ago

People

(Reporter: Eric Tsai, Unassigned)

Tracking

Firefox 51
ARM
Android

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [needscontact][zh-CN], URL)

Attachments

(1 attachment)

(Reporter)

Description

9 months ago
Created attachment 8836598 [details]
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
(Reporter)

Comment 1

9 months ago
It's also possible to reproduce this issue from Firefox mobile 51~54, Firefox 54 in responsive mode with Firefox mobile 54 UA string.
Whiteboard: [needsdiagnosis][zh-CN]
See Also: → bug 1338993

Comment 2

9 months ago
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?
Flags: needinfo?(etsai)
Whiteboard: [needsdiagnosis][zh-CN] → [needscontact][zh-CN]

Updated

9 months ago
Summary: Unable to load content from taobao → Taobao calls addEventListener with an integer rather than a function, making the page load fail
(Reporter)

Comment 3

9 months ago
Bingqing, I think we can reach taobao as Thomas's comment 2 to fix this.
Flags: needinfo?(etsai) → needinfo?(bli)

Comment 4

9 months ago
(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.
Flags: needinfo?(bli)
You need to log in before you can comment on or make changes to this bug.