Honeypot ทำหน้าภาษาอาหรับของผมพัง

Convertica รองรับ 7 ภาษา โดย 6 ภาษาอ่านจากซ้ายไปขวา ส่วนภาษาอาหรับอ่านจากขวาไปซ้าย ความไม่สอดคล้องกันนี้ทำให้ผมต้องเสียเวลาไล่แก้บั๊กไปหลายชั่วโมง

หน้าภาษาอาหรับทุกหน้าดูปกติดีในเบราว์เซอร์ของผม แต่พอผมรัน Lighthouse ภาพสกรีนช็อตที่ได้กลับเป็นหน้าว่างเปล่า—เป็นสีขาวล้วน ไม่ใช่หน้าเว็บพังหรือโหลดไม่เสร็จ

URL และ HTML ไม่ได้มีการเปลี่ยนแปลง Chrome แสดงผลหน้าเว็บได้ปกติ แต่ Headless Chrome กลับไม่แสดงอะไรเลย ซึ่งเรื่องนี้สำคัญมาก เพราะบอทจาก Google และ Bing ต่างก็ใช้ headless browser กันทั้งนั้น

ตัวการคือ spam honeypot ผมได้เพิ่ม input แบบซ่อนไว้เพื่อดักจับบอท และวางมันไว้ไกลจาก viewport:

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

ในเอกสารที่อ่านจากซ้ายไปขวา เบราว์เซอร์จะตัดส่วนที่ล้นออก (overflow) ทำให้ honeypot ไปอยู่ในพื้นที่ว่างที่ไม่ได้ใช้งาน

แต่เมื่อผมตั้งค่า dir="rtl" จุดเริ่มต้นของการเลื่อน (scroll origin) จะกระโดดไปที่ขอบขวา ส่วน overflow ทางด้านซ้ายจะกลายเป็นพื้นที่จริง ทำให้เอกสารขยายกว้างออกไปถึงหนึ่งหมื่นพิกเซล ในขณะที่เนื้อหายังคงกระจุกตัวอยู่ทางขวาสุด

เบราว์เซอร์ของผมเลื่อนไปยังจุดเริ่มต้นทางขวาโดยอัตโนมัติ ผมจึงไม่เห็นความผิดปกติอะไร แต่ headless renderer เริ่มต้นที่มุมซ้ายสุด และเรนเดอร์พื้นที่ว่างเปล่าไปถึงเก้าพันพิกเซล

แก้ไขได้ง่ายๆ ด้วยการเปลี่ยน property เพียงตัวเดียว

เปลี่ยนจาก left เป็น inset-inline-start

  • แบบเก่า: position: absolute; left: -9999px;
  • แบบใหม่: position: absolute; inset-inline-start: -9999px;

inset-inline-start จะปรับตามทิศทางการเขียน โดยทำหน้าที่เป็น left ใน LTR และเป็น right ใน RTL ซึ่งจะช่วยให้ honeypot อยู่นอกหน้าจอในฝั่งที่ถูกต้องเสมอ

ควรตรวจสอบเทคนิคการซ่อนองค์ประกอบนอกหน้าจอ (off-screen hacks) แบบเก่าของคุณเมื่อต้องเพิ่มการรองรับ RTL ซึ่งรวมถึง honeypots, skip links และ hidden divs โดยให้เปลี่ยนจากการใช้ left/right มาเป็น logical properties แทน

เบราว์เซอร์ของคุณไม่ใช่เครื่องมือทดสอบที่ดีสำหรับบั๊กนี้ เพราะมันช่วยซ่อนความผิดพลาดด้วยการเลื่อนหน้าจอให้คุณโดยอัตโนมัติ ควรลองเรนเดอร์หน้าเว็บแบบ headless เพื่อดูพิกเซลที่เกิดขึ้นจริง

หากภาษาใดภาษาหนึ่งมียอดการแสดงผล (impressions) ลดลงในขณะที่ภาษาอื่นยังปกติดี ให้ลองตรวจสอบตัวเรนเดอร์ของคุณ

ที่มา: https://dev.to/convertica/a-honeypot-field-made-every-arabic-page-on-my-site-render-blank-3aji