ایک ہنی پوٹ نے میرے عربی صفحات کو برباد کر دیا

Convertica سات زبانوں میں چلتا ہے۔ چھ بائیں سے دائیں (left-to-right) پڑھی جاتی ہیں۔ عربی دائیں سے بائیں (right-to-left) پڑھی جاتی ہے۔ اس فرق کی وجہ سے مجھے ڈیبگنگ میں گھنٹوں ضائع کرنے پڑے۔

میرے براؤزر میں ہر عربی صفحہ بالکل ٹھیک نظر آ رہا تھا۔ پھر میں نے Lighthouse چلایا۔ اسکرین شاٹ بالکل خالی آیا—مکمل سفید، نہ کہ ٹوٹا ہوا یا ادھورا لوڈ ہوا تھا۔

URL اور HTML میں کوئی تبدیلی نہیں ہوئی تھی۔ Chrome نے صفحہ دکھایا، لیکن Headless Chrome نے کچھ نہیں دکھایا۔ Google اور Bing کے بوٹس ہیڈ لیس براؤزرز استعمال کرتے ہیں، اس لیے یہ بات اہم تھی۔

اس کی وجہ ایک اسپیم ہنی پوٹ (honeypot) تھا۔ میں نے بوٹس کو پکڑنے کے لیے ایک چھپا ہوا ان پٹ شامل کیا تھا اور اسے ویو پورٹ (viewport) سے بہت دور رکھا تھا:

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

بائیں سے دائیں (left-to-right) والی دستاویزات میں براؤزر اوور فلو (overflow) کو کاٹ دیتا ہے، اس لیے ہنی پوٹ ایک خالی جگہ پر رہتا ہے۔

جب میں نے dir="rtl" سیٹ کیا، تو اسکرول کا آغاز دائیں کنارے پر منتقل ہو گیا۔ بائیں طرف کا اوور فلو حقیقی جگہ بن جاتا ہے، جس سے دستاویز کی چوڑائی دس ہزار پکسلز تک پھیل جاتی ہے جبکہ مواد بالکل دائیں جانب اکٹھا رہتا ہے۔

میرا براؤزر خود بخود دائیں جانب اسکرول کر گیا، اس لیے مجھے کچھ غلط نظر نہیں آیا۔ ایک ہیڈ لیس رینڈرر بالکل بائیں کونے سے شروع ہوتا ہے اور نو ہزار پکسلز تک کچھ بھی رینڈر نہیں کرتا۔

اسے صرف ایک پراپرٹی کی تبدیلی سے ٹھیک کریں۔

left کو inset-inline-start سے بدل دیں۔

  • پرانا: position: absolute; left: -9999px;
  • نیا: position: absolute; inset-inline-start: -9999px;

inset-inline-start لکھنے کی سمت کی پیروی کرتا ہے—یعنی LTR میں left اور RTL میں right کے طور پر کام کرتا ہے—جس سے ہنی پوٹ صحیح جانب اسکرین سے باہر رہتا ہے۔

جب آپ RTL سپورٹ شامل کریں تو اپنے پرانے آف اسکرین ہیکس (hacks) کا جائزہ لیں۔ اس میں ہنی پوٹس، سکپ لنکس، اور چھپے ہوئے divs شامل ہیں۔ left/right کو لاجیکل پراپرٹیز (logical properties) سے بدل دیں۔

اس بگ کے لیے آپ کا براؤزر ایک ناقص ٹیسٹ ہے؛ یہ آپ کے لیے اسکرول کر کے خرابی کو چھپا دیتا ہے۔ اصل پکسلز دیکھنے کے لیے صفحے کو ہیڈ لیس طریقے سے رینڈر کریں۔

اگر ایک زبان کے امپریشنز (impressions) آنا بند ہو جائیں جبکہ دوسری زبانیں ٹھیک رہیں، تو اپنے رینڈرر کو چیک کریں۔

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