Мы нашли предварительно выпущенную функцию 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

И волшебным образом у всех наших голосовых сообщений появился новый индикатор скорости воспроизведения. В темной теме это выглядит так: