Nous avons trouvé une fonctionnalité WhatsApp pré-publiée

En recherchant WhatsApp web pour un projet sur lequel nous écrirons bientôt, nous avons accidentellement découvert que WhatsApp a un indicateur de fonctionnalité pour une fonctionnalité cachée - celle qui permet aux utilisateurs de modifier le taux de lecture des messages vocaux.

Comportement brisé

Un de nos outils de recherche nous permet de modifier le taux de lecture des messages vocaux. Chaque message vocal est essentiellement un audio tag avec un blob d'une source audio.

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

Cet extrait changerait la vitesse de tous les messages vocaux WhatsApp à une vitesse 2x.

L'exécuter aujourd'hui n'a rien donné. Pas d'erreurs dans la console ou d'effets secondaires câblés, les messages jouaient à une vitesse normale.

Ingénierie inverse

Nous sommes assez fluides en rétro-ingénierie web ainsi que Applications mobiles, et nous avions déjà examiné le code source minifié du Web de WhatsApp, nous avions donc une bonne idée de l'endroit où chercher.

Il n'a pas fallu longtemps pour trouver ces lignes de code :

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

Ces lignes ajoutent un écouteur pour change:playbackRate, qui se déclenche chaque fois que la vitesse de lecture d'une balise audio change. Il appelle ensuite setPttPlaybackRate, qui remplace le taux de lecture par une valeur précalculée. Cela empêchait notre propre outil de définir le taux de lecture.

Pourquoi WhatsApp ferait-il cela ? Et avec quelle valeur étaient-ils prioritaires ?

setPttPlaybackRate utilise un Enum pour déterminer la valeur de vitesse de lecture à définir :

...
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),
...

Ainsi, WhatsApp a le choix entre trois vitesses prédéterminées. Cela a soulevé nos soupçons que quelque chose d'autre se passait ici - une nouvelle fonctionnalité peut-être ? Nous nous sommes mis à découvrir ce qui se passait.

Un peu de contexte d'abord. Certaines parties du Web WhatsApp, et en particulier celles qui font de la lecture audio, utilisent une application React "simple". Il utilise une version Webpack pas si éloignée de la norme.

En parcourant les composants qui composent les balises audio, nous avons trouvé ceci :

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

...

À l'aide de Chrome DevTools, nous avons défini un point d'arrêt sur cette ligne de code et inspecté la valeur de m.default.pttPlaybackSpeedEnabled:

Intéressant! Que se passerait-il si nous mettions ce drapeau sur true? Nous sommes rapidement passés à la console, alors que l'exécution était toujours arrêtée par le point d'arrêt, et avons exécuté :

m.default.pttPlaybackSpeedEnabled = true

Et comme par magie, tous nos messages vocaux avaient un nouvel indicateur de taux de lecture. Dans un thème sombre, cela ressemble à ceci :