Un honeypot a ruiné mes pages en arabe

Convertica fonctionne en sept langues. Six se lisent de gauche à droite. L'arabe se lit de droite à gauche. Ce décalage m'a coûté des heures de débogage.

Chaque page en arabe semblait correcte dans mon navigateur. Puis j'ai lancé Lighthouse. La capture d'écran est revenue blanche — un blanc pur, pas une page cassée ou à moitié chargée.

L'URL et le HTML n'avaient pas changé. Chrome affichait la page, mais Headless Chrome n'affichait rien. Les bots de Google et Bing utilisent des navigateurs headless, ce qui rendait le problème crucial.

Le coupable était un honeypot anti-spam. J'avais ajouté un champ de saisie caché pour piéger les bots et je l'avais placé bien en dehors de la zone d'affichage (viewport) :

  • position: absolute
  • left: -9999px
  • opacity: 0

Dans les documents de gauche à droite, le navigateur rogne le débordement (overflow), de sorte que le honeypot se trouve dans un espace mort.

Lorsque je définis dir="rtl", l'origine du défilement bascule sur le bord droit. Le débordement à gauche devient un espace réel, étirant le document sur dix mille pixels de large alors que le contenu reste regroupé tout à fait à droite.

Mon navigateur défilait automatiquement vers l'origine à droite, donc je ne voyais rien d'anormal. Un moteur de rendu headless commence au coin extrême gauche et a rendu neuf mille pixels de vide.

Réglez le problème avec un simple changement de propriété.

Remplacez left par inset-inline-start.

  • Ancien : position: absolute; left: -9999px;
  • Nouveau : position: absolute; inset-inline-start: -9999px;

inset-inline-start suit le sens d'écriture — agissant comme left en LTR et comme right en RTL — ce qui permet de maintenir le honeypot hors écran du bon côté.

Auditez vos anciennes astuces pour masquer des éléments hors écran lorsque vous ajoutez le support RTL. Cela inclut les honeypots, les liens d'évitement (skip links) et les divs cachés. Remplacez left/right par des propriétés logiques.

Votre navigateur est un mauvais test pour ce bug ; il masque l'échec en faisant défiler la page pour vous. Rendez la page en mode headless pour voir les pixels réels.

Si une langue cesse de générer des impressions alors que les autres restent stables, vérifiez votre moteur de rendu.

Source : https://dev.to/convertica/a-honeypot-field-made-every-arabic-page-on-my-site-render-blank-3aji