Ми знайшли попередню версію WhatsApp

Під час дослідження Веб-сайт WhatsApp для проекту, про який ми незабаром напишемо, ми випадково виявили, що WhatsApp має позначку функції для прихованої функції – тієї, яка дозволяє користувачам змінювати швидкість відтворення голосових повідомлень.

Порушена поведінка

Один із наших інструментів дослідження дозволяє змінювати швидкість відтворення голосових повідомлень. Кожне голосове повідомлення по суті є audio тег з крапкою джерела звуку.

document.querySelectorAll('audio').forEach(e => {
  e.playbackRate = 2;
});

Цей фрагмент змінить швидкість усіх голосових повідомлень WhatsApp у 2 рази.

Запуск сьогодні нічого не дав. Жодних помилок у консолі чи дротових побічних ефектів, повідомлення відтворювалися на нормальній швидкості.

Зворотній інжиніринг

Ми досить плавні у зворотному проектуванні Web та мобільні додатки, і ми вже переглянули скорочений вихідний код веб-сайту WhatsApp, тож у нас було гарне передчуття, де шукати.

Знайти ці рядки коду не зайняло багато часу:

...
initialize() {
  i.default.prototype.initialize.call(this),
    this.playbackRate = (0,
      s.getPttPlaybackRate)(),
    this.listenTo(this, "change:playbackRate", ((e,t)=>{
        (0,
          s.setPttPlaybackRate)(t)
      }
    ))
}
...

Ці рядки додають слухача для change:playbackRate, який запускається щоразу, коли змінюється швидкість відтворення аудіотегу. Потім дзвонить setPttPlaybackRate, який змінює швидкість відтворення на попередньо обчислене значення. Це було відключенням нашого власного інструменту від встановлення швидкості відтворення.

Навіщо WhatsApp це робити? І яке значення вони переважали?

setPttPlaybackRate використовує Enum, щоб визначити, яке значення швидкості відтворення встановити:

...
t.pttPlaybackSpeed = function(e) {
  switch (e) {
    case 1:
      return v.default.PTT_PLAYBACK_SPEED_TYPE.SPEED_1;
    case 1.5:
      return v.default.PTT_PLAYBACK_SPEED_TYPE.SPEED_1_5;
    case 2:
      return v.default.PTT_PLAYBACK_SPEED_TYPE.SPEED_2;
    default:
      throw new Error("Invalid playback rate: ".concat(e))
  }
}(this.props.pttPrefs.playbackRate),
...

Отже, у WhatsApp є три заздалегідь визначені швидкості на вибір. Це викликало у нас підозру, що тут відбувається щось інше – можливо, нова функція? Ми вирішили з’ясувати, що відбувається.

Спочатку трохи фонового контексту. Деякі частини веб-сайту WhatsApp, зокрема ті, які відтворюють аудіо, використовують «простий» додаток React. Він використовує збірку Webpack, яка не дуже далека від стандартної.

Опрацьовуючи компоненти, які складають аудіотеги, ми виявили наступне:

...
if (m.default.pttPlaybackSpeedEnabled && "ptt" === i) {
  P = b === r.toString();
  var A = (0,
    s.default)(o.default.playbackRateButtonContainer, {
    [o.default.playbackRateButtonContainerVisible]: P
  });

...

Використовуючи Chrome DevTools, ми встановили точку зупину на цьому рядку коду та перевірили значення m.default.pttPlaybackSpeedEnabled:

Цікаво! Що станеться, якщо ми встановимо цей прапор на true? Ми швидко підскочили до консолі, поки виконання все ще було зупинено точкою зупинки, і побігли:

m.default.pttPlaybackSpeedEnabled = true

І як дивно, усі наші голосові повідомлення мали новий індикатор швидкості відтворення. У темній темі це виглядає так: