ਇੱਕ Honeypot ਨੇ ਮੇਰੇ ਅਰਬੀ ਪੇਜ ਖਰਾਬ ਕਰ ਦਿੱਤੇ

Convertica ਸੱਤ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ ਚੱਲਦਾ ਹੈ। ਛੇ ਖੱਬੇ- ਤੋਂ-ਸੱਜੇ (left-to-right) ਪੜ੍ਹੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਅਰਬੀ ਸੱਜੇ- ਤੋਂ-ਖੱਬੇ (right-to-left) ਪੜ੍ਹੀ ਜਾਂਦੀ ਹੈ। ਉਸ ਅਸੰਗਤਤਾ ਕਾਰਨ ਮੈਨੂੰ ਡੀਬੱਗਿੰਗ ਵਿੱਚ ਕਈ ਘੰਟੇ ਖਰਾਬ ਕਰਨੇ ਪਏ।

ਮੇਰੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹਰ ਅਰਬੀ ਪੇਜ ਠੀਕ ਲੱਗ ਰਿਹਾ ਸੀ। ਫਿਰ ਮੈਂ Lighthouse ਚਲਾਇਆ। ਸਕ੍ਰੀਨਸ਼ੌਟ ਬਿਲਕੁਲ ਖਾਲੀ ਆਇਆ—ਸਿਰਫ਼ ਚਿੱਟਾ, ਨਾ ਹੀ ਟੁੱਟਿਆ ਹੋਇਆ ਜਾਂ ਅਧੂਰਾ ਲੋਡ ਹੋਇਆ।

URL ਅਤੇ HTML ਵਿੱਚ ਕੋਈ ਬਦਲਾਅ ਨਹੀਂ ਸੀ। Chrome ਨੇ ਪੇਜ ਦਿਖਾਇਆ, ਪਰ Headless Chrome ਨੇ ਕੁਝ ਵੀ ਨਹੀਂ ਦਿਖਾਇਆ। Google ਅਤੇ Bing ਦੇ ਬੋਟਸ (bots) headless ਬ੍ਰਾਊਜ਼ਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ, ਇਸ ਲਈ ਇਹ ਮਹੱਤਵਪੂਰਨ ਸੀ।

ਇਸਦਾ ਦੋਸ਼ੀ ਇੱਕ ਸਪੈਮ honeypot ਸੀ। ਮੈਂ ਬੋਟਸ ਨੂੰ ਫੜਨ ਲਈ ਇੱਕ ਲੁਕਿਆ ਹੋਇਆ input ਜੋੜਿਆ ਸੀ ਅਤੇ ਇਸਨੂੰ viewport ਤੋਂ ਬਹੁਤ ਦੂਰ ਰੱਖਿਆ ਸੀ:

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

ਖੱਬੇ- ਤੋਂ-ਸੱਜੇ (left-to-right) ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਬ੍ਰਾਊਜ਼ਰ overflow ਨੂੰ ਕੱਟ (clip) ਦਿੰਦਾ ਹੈ, ਇਸ ਲਈ honeypot ਖਾਲੀ ਜਗ੍ਹਾ ਵਿੱਚ ਰਹਿੰਦਾ ਹੈ।

ਜਦੋਂ ਮੈਂ dir="rtl" ਸੈੱਟ ਕੀਤਾ, ਤਾਂ scroll origin ਸੱਜੇ ਕਿਨਾਰੇ 'ਤੇ ਚਲਾ ਗਿਆ। ਖੱਬਾ overflow ਅਸਲ ਜਗ੍ਹਾ ਬਣ ਗਿਆ, ਜਿਸ ਨਾਲ ਦਸਤਾਵੇਜ਼ ਦੀ ਚੌੜਾਈ ਦਸ ਹਜ਼ਾਰ ਪਿਕਸਲ ਤੱਕ ਵਧ ਗਈ, ਜਦੋਂ ਕਿ ਸਮੱਗਰੀ ਬਿਲਕੁਲ ਸੱਜੇ ਪਾਸੇ ਇਕੱਠੀ ਰਹੀ।

ਮੇਰਾ ਬ੍ਰਾਊਜ਼ਰ ਆਪਣੇ ਆਪ ਸੱਜੇ origin 'ਤੇ ਸਕ੍ਰੋਲ ਹੋ ਗਿਆ, ਇਸ ਲਈ ਮੈਨੂੰ ਕੁਝ ਵੀ ਗਲਤ ਨਹੀਂ ਦਿਖਾਈ ਦਿੱਤਾ। ਇੱਕ headless renderer ਬਿਲਕੁਲ ਖੱਬੇ ਕੋਨੇ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਨੌਂ ਹਜ਼ਾਰ ਪਿਕਸਲ ਤੱਕ ਕੁਝ ਵੀ ਨਹੀਂ ਦਿਖਾਇਆ।

ਇਸਨੂੰ ਸਿਰਫ਼ ਇੱਕ property ਬਦਲ ਕੇ ਠੀਕ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

left ਦੀ ਜਗ੍ਹਾ inset-inline-start ਦੀ ਵਰਤੋਂ ਕਰੋ।

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

inset-inline-start ਲਿਖਣ ਦੀ ਦਿਸ਼ਾ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ—LTR ਵਿੱਚ left ਵਜੋਂ ਅਤੇ RTL ਵਿੱਚ right ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ—ਜਿਸ ਨਾਲ honeypot ਸਹੀ ਪਾਸੇ ਸਕ੍ਰੀਨ ਤੋਂ ਬਾਹਰ ਰਹਿੰਦਾ ਹੈ।

ਜਦੋਂ ਤੁਸੀਂ RTL support ਜੋੜਦੇ ਹੋ, ਤਾਂ ਆਪਣੇ ਪੁਰਾਣੇ off-screen hacks ਦੀ ਜਾਂਚ ਕਰੋ। ਇਸ ਵਿੱਚ honeypots, skip links, ਅਤੇ hidden divs ਸ਼ਾਮਲ ਹਨ। left/right ਨੂੰ logical properties ਨਾਲ ਬਦਲ ਦਿਓ।

ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਇਸ ਬੱਗ ਲਈ ਇੱਕ ਮਾੜਾ ਟੈਸਟ ਹੈ; ਇਹ ਤੁਹਾਡੇ ਲਈ ਸਕ੍ਰੋਲ ਕਰਕੇ ਇਸ ਖ਼ਰਾਬੀ ਨੂੰ ਲੁਕਾ ਦਿੰਦਾ ਹੈ। ਅਸਲ ਪਿਕਸਲ ਦੇਖਣ ਲਈ ਪੇਜ ਨੂੰ headless ਤਰੀਕੇ ਨਾਲ ਰੈਂਡਰ ਕਰੋ।

ਜੇਕਰ ਇੱਕ ਭਾਸ਼ਾ ਦੇ impressions ਆਉਣਾ ਬੰਦ ਹੋ ਜਾਂਦੇ ਹਨ ਜਦੋਂ ਕਿ ਦੂਜੀਆਂ ਵਿੱਚ ਕੋਈ ਸਮੱਸਿਆ ਨਹੀਂ ਹੁੰਦੀ, ਤਾਂ ਆਪਣੇ renderer ਦੀ ਜਾਂਚ ਕਰੋ।

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