یک هانی‌پات صفحات عربی من را خراب کرد

Convertica به هفت زبان اجرا می‌شود. شش زبان از چپ به راست خوانده می‌شوند. عربی از راست به چپ خوانده می‌شود. این عدم تطابق، ساعت‌ها وقت صرف عیب‌یابی برای من داشت.

تمام صفحات عربی در مرورگر من درست به نظر می‌رسیدند. سپس Lighthouse را اجرا کردم. اسکرین‌شات کاملاً سفید بود؛ نه اینکه صفحه خراب شده باشد یا نیمه‌کاره بارگذاری شده باشد، بلکه کاملاً سفید بود.

URL و HTML تغییری نکرده بودند. Chrome صفحه را نمایش می‌داد، اما Headless Chrome چیزی نشان نمی‌داد. ربات‌های Google و Bing از مرورگرهای headless استفاده می‌کنند، بنابراین این موضوع اهمیت داشت.

مقصر، یک هانی‌پات (honeypot) برای اسپم بود. من یک ورودی (input) مخفی برای شناسایی ربات‌ها اضافه کرده بودم و آن را بسیار دورتر از محدوده دید (viewport) قرار داده بودم:

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

در اسناد چپ‌به‌راست، مرورگر بخش‌های اضافی (overflow) را برش می‌دهد، بنابراین هانی‌پات در یک فضای مرده قرار می‌گیرد.

وقتی dir="rtl" را تنظیم کردم، مبدأ اسکرول به لبه سمت راست پرش کرد. بخش اضافی در سمت چپ به یک فضای واقعی تبدیل شد و باعث شد عرض سند به ده هزار پیکسل برسد، در حالی که محتوا در دورترین نقطه سمت راست متمرکز باقی ماند.

مرورگر من به‌طور خودکار به مبدأ سمت راست اسکرول می‌کرد، بنابراین من هیچ مشکلی نمی‌دیدم. اما یک رندرکننده headless از دورترین گوشه سمت چپ شروع می‌کند و نُه هزار پیکسل فضای خالی را رندر کرد.

با تغییر یک ویژگی، آن را اصلاح کنید.

left را با inset-inline-start جایگزین کنید.

  • Old: position: absolute; left: -9999px;
  • New: position: absolute; inset-inline-start: -9999px;

inset-inline-start از جهت نوشتار پیروی می‌کند — در حالت LTR مانند left و در حالت RTL مانند right عمل می‌کند — و هانی‌پات را در سمت درست، خارج از صفحه نگه می‌دارد.

هنگام اضافه کردن پشتیبانی از RTL، ترفندهای قدیمی خود برای قرار دادن عناصر خارج از صفحه را بازبینی کنید. این شامل هانی‌پات‌ها، لینک‌های پرش (skip links) و divهای مخفی می‌شود. left/right را با ویژگی‌های منطقی (logical properties) جایگزین کنید.

مرورگر شما تست مناسبی برای این باگ نیست؛ زیرا با اسکرول کردن برای شما، خطا را پنهان می‌کند. صفحه را به صورت headless رندر کنید تا پیکسل‌های واقعی را ببینید.

اگر نمایش (impression) یک زبان متوقف شد در حالی که بقیه زبان‌ها مشکلی ندارند، رندرکننده خود را بررسی کنید.

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