ഒരു ഹോണിപോട്ട് എന്റെ അറബിക് പേജുകളെ നശിപ്പിച്ചു

Convertica ഏഴ് ഭാഷകളിൽ പ്രവർത്തിക്കുന്നു. അതിൽ ആറ് ഭാഷകളും ഇടത്തുനിന്ന് വലത്തോട്ട് (left-to-right) വായിക്കാവുന്നവയാണ്. എന്നാൽ അറബിക് വലത്തുനിന്ന് ഇടത്തോട്ട് (right-to-left) ആണ് വായിക്കുന്നത്. ഈ വ്യത്യാസം കാരണം മണിക്കൂറുകളോളം ഡീബഗ്ഗിംഗ് (debugging) നടത്തേണ്ടി വന്നു.

എന്റെ ബ്രൗസറിൽ എല്ലാ അറബിക് പേജുകളും ശരിയാണെന്ന് തോന്നി. എന്നാൽ ഞാൻ Lighthouse ഉപയോഗിച്ചപ്പോൾ, സ്ക്രീൻഷോട്ട് പൂർണ്ണമായും വെളുത്ത നിറത്തിൽ (blank) മാത്രമാണ് വന്നത്—പേജ് തകരാറിലായതോ പകുതി ലോഡ് ആയതോ അല്ല, മറിച്ച് വെറും വെളുത്ത നിറം മാത്രം.

URL-ഉം HTML-ഉം മാറ്റമില്ലാതെ തന്നെയായിരുന്നു. Chrome പേജ് കാണിച്ചുതരുന്നുണ്ടായിരുന്നു, എന്നാൽ Headless Chrome ഒന്നും തന്നെ കാണിച്ചില്ല. Google, Bing എന്നിവയിൽ നിന്നുള്ള ബോട്ടുകൾ (bots) ഹെഡ്‌ലെസ്സ് ബ്രൗസറുകളാണ് ഉപയോഗിക്കുന്നത്, അതിനാൽ ഇത് വളരെ പ്രധാനപ്പെട്ട ഒരു കാര്യമായിരുന്നു.

ഇതിന് കാരണം ഒരു സ്പാം ഹോണിപോട്ട് (spam honeypot) ആയിരുന്നു. ബോട്ടുകളെ പിടികൂടാനായി ഞാൻ ഒരു ഹിഡൻ ഇൻപുട്ട് (hidden input) ചേർക്കുകയും അത് വ്യൂപോർട്ടിൽ (viewport) നിന്നും വളരെ അകലെയായി ക്രമീകരിക്കുകയും ചെയ്തിരുന്നു:

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

ഇടത്തുനിന്ന് വലത്തോട്ട് വായിക്കുന്ന ഡോക്യുമെന്റുകളിൽ, ബ്രൗസർ ഓവർഫ്ലോ (overflow) ക്ലിപ്പ് ചെയ്യും, അതിനാൽ ഹോണിപോട്ട് ഉപയോഗശൂന്യമായ ഒരു സ്ഥലത്ത് (dead space) ഇരിക്കും.

ഞാൻ dir="rtl" എന്ന് സെറ്റ് ചെയ്തപ്പോൾ, സ്ക്രോൾ ഒറിജിൻ (scroll origin) വലത് വശത്തേക്ക് മാറുന്നു. അപ്പോൾ ഇടത് വശത്തെ ഓവർഫ്ലോ യഥാർത്ഥ സ്പേസ് ആയി മാറുകയും, ഡോക്യുമെന്റ് പതിനായിരം പിക്സൽ വീതിയിലേക്ക് നീളുകയും ചെയ്യുന്നു; എന്നാൽ ഉള്ളടക്കം (content) വലത് വശത്ത് തന്നെ ഒതുങ്ങിനിൽക്കുന്നു.

എന്റെ ബ്രൗസർ സ്വയമേവ വലത് വശത്തേക്ക് സ്ക്രോൾ ചെയ്തതുകൊണ്ട് എനിക്ക് തെറ്റൊന്നും കണ്ടില്ല. എന്നാൽ ഒരു ഹെഡ്‌ലെസ്സ് റെൻഡറർ (headless renderer) ഏറ്റവും ഇടത് കോണിൽ നിന്നാണ് തുടങ്ങുന്നത്, അത് ഒൻപതിനായിരം പിക്സലോളം വെറും ശൂന്യതയാണ് റെൻഡർ ചെയ്തത്.

ഒരു പ്രോപ്പർട്ടി മാറ്റുന്നതിലൂടെ ഇത് പരിഹരിക്കാം.

left-ന് പകരം inset-inline-start ഉപയോഗിക്കുക.

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

inset-inline-start എഴുതുന്ന ദിശയെ പിന്തുടരുന്നു—അതായത് LTR-ൽ left ആയും RTL-ൽ right ആയും പ്രവർത്തിക്കുന്നു—ഇത് ഹോണിപോട്ടിനെ ശരിയായ വശത്ത് സ്ക്രീനിന് പുറത്ത് തന്നെ നിലനിർത്തുന്നു.

നിങ്ങൾ RTL സപ്പോർട്ട് ചേർക്കുമ്പോൾ, പഴയ 'off-screen hacks' പരിശോധിക്കുക. ഇതിൽ ഹോണിപോട്ടുകൾ, സ്കിപ്പ് ലിങ്കുകൾ (skip links), ഹിഡൻ ഡിവികൾ (hidden divs) എന്നിവ ഉൾപ്പെടുന്നു. left/right എന്നിവയ്ക്ക് പകരം ലോജിക്കൽ പ്രോപ്പർട്ടികൾ (logical properties) ഉപയോഗിക്കുക.

ഈ ബഗ്ഗ് കണ്ടെത്താൻ നിങ്ങളുടെ ബ്രൗസർ ഒരു നല്ല പരിശോധനയല്ല; കാരണം അത് നിങ്ങൾക്കായി സ്ക്രോൾ ചെയ്തുകൊണ്ട് പിശക് മറച്ചുവെക്കുന്നു. യഥാർത്ഥ പിക്സലുകൾ കാണുന്നതിനായി പേജ് ഹെഡ്‌ലെസ്സ് ആയി റെൻഡർ ചെയ്ത് നോക്കുക.

മറ്റ് ഭാഷകൾക്ക് കുഴപ്പമില്ലെങ്കിലും ഒരു പ്രത്യേക ഭാഷയിൽ മാത്രം ഇംപ്രഷനുകൾ (impressions) കുറയുന്നുണ്ടെങ്കിൽ, നിങ്ങളുടെ റെൻഡറർ പരിശോധിക്കുക.

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