如何在 3rd 方应用中基于 API 调用和回调触发函数

Posted 2023-03-03

【中文标题】如何在 3rd 方应用中基于 API 调用和回调触发函数

【英文标题】：How to trigger function based on API call and callback in 3rd party app

【发布时间】：2021-01-09 11:38:00

【问题描述】：

我正在尝试在我的网站上侦听来自第 3 方应用程序的 javascript 回调。该应用程序已缩小，因此很难进行逆向工程。但是，使用 Chrome 调试器后，我想捕获的回调如下，有什么方法可以在触发“CollectEvent”回调时触发一个函数，并访问“email”变量？您可以在控制台中看到，正在窗口上创建回调，当然每次代码运行时它们的名称都不同。

认识到我无法直接编辑该代码，因为它是第 3 方库的一部分。

!function() 
    var _0x14bdc8 = 
        'CollectEvent': function(_0x4a9e64, _0x3ac5b7) 
            if (_0x4a9e64) 
                _0x14bdc8[_0x304d('0xa7')] && (_0x30053a('COUPON_CODE_COOKIE_NAME', _0x4a9e64[_0x304d('0xd7')], 0x1),
                _0x14bdc8[_0x304d('0x6a')]());
                var _0x562cf7 = 
                    'shopId': _0x14bdc8[_0x304d('0xc2')],
                    'campaignId': _0x14bdc8[_0x304d('0x79')],
                    'email': encodeURIComponent(_0x4a9e64[_0x304d('0x23')]),
                    'code': _0x4a9e64['code'],
                    'customFields': encodeURIComponent(JSON[_0x304d('0x3')](_0x3ac5b7)),
                    'domain': window[_0x304d('0x73')][_0x304d('0x4a')],
                    'currentUrl': window[_0x304d('0x73')][_0x304d('0x6b')]
                ;
                _0x14bdc8[_0x304d('0xa0')](_0x986b46 + '/api/wheelioapp/collectemail', _0x562cf7, function(_0xea4ea9) 
                    _0xea4ea9[_0x304d('0x89')] && _0x14bdc8[_0x304d('0x8f')](!0x1, !0x1, !0x0, !0x1);
                );
             else
                alert(_0x304d('0x80'));
        ,
    ...
    

您可以在这里看到控制台中的 Wheelio 应用程序对象和已创建的回调（尽管每个会话的名称不同）。

【问题讨论】：

什么“第三方应用程序”？那是一个插件，比如 jQuery 插件之类的吗？你首先想做什么？

@JeremyThille 这是我的 Shopify 网站上的一个弹出窗口，它会在人们订阅我们的时事通讯时收集他们的电子邮件地址。我们希望将会话监控和电子邮件捕获联系起来，因此从我们的分析工具中，我们可以说电子邮件 [e-mail] 与浏览会话 abc 匹配。 “第 3 方应用程序”不使用 JQuery。

哦，我明白了：/ 不幸的是，我对 Shopify 的了解绝对是 0！但是，如果您可以编辑上面的代码，您可以通过将_0x562cf7 对象设为全局对象来破解这个东西：window["dataYouNeed"] = _0x562cf7，然后您可以从任何地方访问它：window.dataYouNeed.email。编辑：忘记这一点，您说您无法编辑此代码。然后我看不到解决方案:(

@JeremyThille 好的，感谢您的关注。我想我想知道是否有一个异步模式来识别回调将如何生成，然后将一个 Promise 类型链链接到它的后面。

您想要什么：阅读电子邮件（将其记录在某处）或在此回调中更改它？

【参考方案1】：

我只需要记录它

好吧，好吧。我们无法更改即时创建的函数，但我们可以更改其他 window 函数。

例如我们可以使用encodeURIComponent。看到这一行：

'email': encodeURIComponent(_0x4a9e64[_0x304d('0x23')]),

这意味着电子邮件将以某种方式进入encodeURIComponent。很好，因为我们可以在那里阅读：

/* At the beginning */
// This is helper function, detects correct email:
function validateEmail(email) 
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.[0-9]1,3\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]2,))$/;
    return re.test(String(email).toLowerCase());

// Keep old function
let oldEncodeURIComponent = window.encodeURIComponent;
// Crete new one
window.encodeURIComponent = (data) => 
  if (validateEmail(data)) 
    // Gotcha!
    console.log('[encodeURIComponent]', data);
  
  return oldEncodeURIComponent(data);


/* Here program works as normal, but creates lots of logs... */

/* In the end */
// If we can understand when we need to stop looking for email,
//   we will disconnect our function:
window.encodeURIComponent = oldEncodeURIComponent;

所以我们的想法是读取通过encodeURIComponent 传递的所有数据。

附：电子邮件验证器is here

【讨论】：

真的很整洁 - 谢谢。我会看看我能不能让它工作:)

这是一个巧妙的解决方案！另一种类似方式的可能解决方案是覆盖 XMLHttpRequest API 或在您自己的站点上安装一个服务工作者来审查出站流量。仍然是一种拦截器，只是它更通用，在不使用encodeURIComponent 时起作用。