1606428 - Unable to login on championat.com while ETP - Strict is enabled (Rambler API is blocked)

Status: REOPENED

(Core :: Privacy: Anti-Tracking, defect, P3)

Description

[Oana Arbuzov [:oanaarbuzov]]

Attachment: ETPStrictVSDisabled.png

Environment:
Browser / Version: Firefox Preview Nightly 191230 (🦎: 73.0a1-20191227094418)
Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density)

Steps to reproduce:

1. Navigate to https://www.championat.com/football/
2. Tap "Browse" menu (right side top button).
3. Scroll down the menu.
4. Tap "Войти" button.
5. Observe behavior.

Expected result:
Login window is triggered.

Actual result:
Nothing happens, login window is not triggered.

Note:

1. The issue is not reproducible with ETP - Standard enabled (a few seconds delay).

Comment 1

[Thomas Wisniewski [:twisniewski]]

When I click the login link, I see this appear in the console:

Rambler ID helper load failed! _script.js:1:83678
    createIframe https://st.championat.com/www/_script.js?1585844477188:1
    bindEvents https://st.championat.com/www/_script.js?1585844477188:1
    jQuery 7
    bindEvents https://st.championat.com/www/_script.js?1585844477188:1
    init https://st.championat.com/www/_script.js?1585844477188:1
    <anonymous> https://st.championat.com/www/_script.js?1585844477188:1
    <anonymous> https://st.championat.com/www/_script.js?1585844477188:1
    jQuery 8

The code in question is this:

      init: function () {
        this.options = s.assign(this.options, this.params),
        this.options.ramblerUrls ?
          (s.forEach(this.options.selectors, function (e, t) {
            this.options.elements['$' + t] = r(e)
          }.bind(this)),
            this.options.isTouchDevice && this.options.elements.$html.addClass('_is-touch'),
            this.ramblerHelperPromice().then(this.initRamblerHelper).then(this.getRamblerProfileInfo.bind(this)).catch (this.clearAuth.bind(this)).then(this.registerAuthEvents.bind(this)).then(this.checkAuth.bind(this)),
            this.bindEvents()
          )  : console.error('Cannot find auth urls!')
      },

So they're using a service called Rambler for login. Sure enough, if I whitelist https://id.rambler.ru/rambler-id-helper/auth_events.js, then the login button seems to work (iframe opens and present the login UI).

Their script checks for window.ramblerIdHelper in initRamblerHelper:

      initRamblerHelper: function () {
        if (window.ramblerIdHelper && !r.isEmptyObject(window.ramblerIdHelper)) return window.ramblerIdHelper;
        throw window.ramblerIdHelper = [
        ],
        console.log('Rambler ID helper load failed!'),
        'Rambler ID helper load failed!'
      },

And then calls getRamblerProfileInfo:

      getRamblerProfileInfo: function () {
        var i = this;
        return new e(function (t, n) {
          window.ramblerIdHelper.getProfileInfo({
            get_championat: 1
          }, function (e) {
            e ? (i.options.processingInfo = !0, t(e))  : (console.log('Rambler profile info load failed!'), n('Rambler profile info load failed!'))
          })
        })

And so we can block the rambler scripts by default, but detect user login attempts and load it at that point by spoofing that script with a shim; here is a minimal shim which works for me on this site:

(function() {
  var src = document.currentScript.src;
  var callLog = [];
  function callLogger(fn) {
    return function() {
      callLog.push({fn, args: arguments});
    };
  }
  window.ramblerIdHelper = {
    getProfileInfo: function(successCallback, errorCallback)  {
      successCallback({});
    },
    registerOnFrameCloseCallback: callLogger("registerOnFrameCloseCallback"),
    registerOnFrameRedirect: callLogger("registerOnFrameRedirect"),
    registerOnPossibleLoginCallback: callLogger("registerOnPossibleLoginCallback"),
    registerOnPossibleLogoutCallback: callLogger("registerOnPossibleLogoutCallback"),
    registerOnPossibleOauthLoginCallback: callLogger("registerOnPossibleOauthLoginCallback"),
    openAuth: function() {
      const openAuthArgs = arguments;
      delete window.ramblerIdHelper;
      // whitelist src
      const s = document.createElement("script");
      s.src = src;
      document.head.appendChild(s);
      s.addEventListener("load", () => {
        const helper = window.ramblerIdHelper;
        for (const {fn, args} of callLog) {
          helper[fn].apply(helper, args);
        }
        helper.openAuth.apply(helper, arguments);
      });
    },
  };
}());

Comment 2

[Oana Arbuzov [:oanaarbuzov]]

The issue is still reproducible, with ETP - Strict "Login" form is not triggered.
https://prnt.sc/y16yah

Tested with:
Browser / Version: Firefox Nightly 210201 (🦎 87.0a1-20210129095945)
Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

Comment 3

[Mathew Hodson]

(In reply to Thomas Wisniewski [:twisniewski] from comment #1)

So they're using a service called Rambler for login. Sure enough, if I whitelist https://id.rambler.ru/rambler-id-helper/auth_events.js, then the login button seems to work (iframe opens and present the login UI).

A shim was added in bug 1637329, but I guess that wasn't enough.

https://searchfox.org/mozilla-central/rev/2e592c660fbed485a5376be8d14fde99671a4df3/browser/extensions/webcompat/data/shims.js#226-235

Comment 4

[Thomas Wisniewski [:twisniewski]]

It looks like things have changed a bit on the site, causing some issues with the shim. There is also a popup involved now on login, which complicates things a fair bit. I'll have to investigate if a similar fix can be used here as we're using for Facebook's federated login.

Comment 5

[Thomas Wisniewski [:twisniewski]]

It appears that how the Rambler authenticator works has indeed changed, and it now uses a popup similar to how "login with Facebook" buttons work. I have an update for the shim which should suffice if pages are using the API as this one does.