1924500 - www.tiktok.com - Activation captcha to solve a puzzle for login purposes does not respond to mouse drag action

Status: ASSIGNED

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

Description

[Raul Bucata]

Environment:
Operating system: Windows 10
Firefox version: Firefox 131.0

Steps to reproduce:

1. Navigate to: https://www.tiktok.com
2. Click on the "Log in" option
3. Select login via "username/email"
4. Click on the "Log in with email or username" link
5. Input the username credentials and click on the "Log in" button
6. Once the captcha puzzle is triggered, drag the image with the mouse and observe

Expected Behavior:
The captcha verification process can be passed

Actual Behavior:
Captcha does not respond to drag

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in Firefox Nightly, and Firefox Release
• Does not reproduce in Chrome
• Using the email might not trigger the captcha

Created from https://github.com/webcompat/web-bugs/issues/142709

Comment 1

[Raul Bucata]

Attachment: 20241014_144311.mp4

Comment 3

[Jeff Muizelaar [:jrmuizel]]

I can more readily reproduce this by loging in in private browsing mode. (I turned off ETP to make sure that was interferring)

Comment 4

[Jeff Muizelaar [:jrmuizel]]

It looks like this is being caused by bug 505521.

The relevant part of the JSX for the slider is:

l.createElement(
              v,
              {
                bounds: {
                  left: 0,
                  right: g - ('slide' == E ? 50 : 0)
                },
                position: {
                  x: A * (
                    (null === (r = p.current) || void 0 === r ? void 0 : r.offsetWidth) - (
                      'whirl' == E ? null === (s = h.current) ||
                      void 0 === s ? void 0 : s.offsetWidth : 0
                    ) ||
                    0
                  ),
                  y: 0
                },
                onStart: () => {
                  d.whirlModel.update({
                    dragStartTimeStamp: Date.now()
                  }, null),
                  y.Fr &&
                  console.log('bytedance://disable_swipe')
                },
                onDrag: e => {
                  d.whirlModel.appendDragTrack({
                    x: e.x / g,
                    y: e.y
                  }, null)
                },
                onStop: O,
                disabled: f ||
                _ ||
                null != w ||
                null != b
              },

onDrag is called via i() in the following function called from the drag event handler.

(e=>{
                if (r)
                    return;
                const a = e.type.startsWith("touch") ? e.changedTouches[0].clientX : e.clientX;
                if (0 === a)
                    return;
                const l = Math.min(t.right, Math.max(t.left, a - p));
                null === i || void 0 === i || i({
                    x: l,
                    y: 0
                })

This function checks if e.clientX is 0 and then returns instead of calling onDrag. Bug 505521 makes it so that e.clientX is always 0

Comment 5

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1924500 - Add a JS intervention for TikTok to un-break their sliding captcha puzzles; r=ksenia

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/20b162acf623
Add a JS intervention for TikTok to un-break their sliding captcha puzzles; r=ksenia,webcompat-reviewers

Comment 7

[Nick]

Just checking in, the problem also exists in the ESR version (128).
Will a potential fix also be pushed to the current ESR release?

Comment 8

[amarc]

https://hg.mozilla.org/mozilla-central/rev/20b162acf623

Comment 9

[Dennis Schubert [:denschub]]

We're working on an out-of-band update for the WebCompat Interventions addon that will also include the fix for TikTok. If we can, we'll also ship that update for ESR128 (that's not a 100% guarantee yet, but we'll do our best). Bug 1925270 is where this process will be tracked.