การทรยศของส่วนขยาย Grammarly

 (dbushell.com)
2 คะแนน โดย GN⁺ 2025-03-31 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

ทำไมส่วนขยาย Grammarly ถึงทำให้เว็บไซต์พัง

  • ในช่วงหลายเดือนที่ผ่านมา ผู้เขียนมักได้รับรายงานว่า เลย์เอาต์ของเว็บไซต์พังแบบแปลก ๆ
  • สาเหตุของปัญหาถูกพบว่าเป็น ส่วนขยายเบราว์เซอร์ Grammarly และเพื่อยืนยันเรื่องนี้ ผู้เขียนจึงลองติดตั้งด้วยตนเอง

กระบวนการค้นพบปัญหา

  • ส่วนขยาย Grammarly ขอสิทธิ์ดังต่อไปนี้:
    • เข้าถึงข้อมูลของทุกเว็บไซต์
    • แสดงการแจ้งเตือน
    • เข้าถึงแท็บของเบราว์เซอร์
  • จากการทดลองบน Firefox พบว่า Grammarly แทรก สไตล์ชีตของตัวเอง เข้าไปในหน้าเว็บ
    • สไตล์ชีตนี้ไม่สามารถตรวจจับได้โดยตรงจากหน้าเว็บ (เป็นสไตล์ชีตที่ซ่อนอยู่)
    • ถึงขั้นหลบเลี่ยง Content Security Policy ได้
  • ยังมีการแทรกองค์ประกอบ <grammarly-desktop-integration> เข้าไปในแท็ก <html> ด้วย (ยังไม่ชัดเจนว่ามีไว้เพื่ออะไร)

แล้วทำไมถึงเป็นเว็บไซต์ของผู้เขียน?

  • ที่ท้ายสไตล์ชีตของ Grammarly มีโค้ดต่อไปนี้รวมอยู่ด้วย: 
    :host,  
:root {  
  --rem:16  
}
  • การตั้งค่านี้ไปชนกับหน่วย CSS พื้นฐานอย่าง 1rem = 16px และผู้เขียนเองก็ใช้ custom property ชื่อ --rem อยู่แล้ว
  • Grammarly ตั้งค่า --rem แบบค่าคงที่ในระดับโกลบอล และพยายามทำ dynamic font sizing
  • ส่งผลให้การคำนวณ typography แบบยืดหยุ่นของผู้เขียนพังไป

วิธีรับมือของผู้เขียน

  • ตอนแรกผู้เขียนใช้ Mutation Observer เพื่อตรวจจับองค์ประกอบที่ Grammarly แทรกเข้ามา แล้วใช้สไตล์ !important เขียนทับ
  • หลังจากนั้นจึงเปลี่ยนชื่อตัวแปร CSS ของตัวเองจาก --rem เป็น --🤡 (อีโมจิยูนิโค้ด)
  • อีโมจิสามารถใช้เป็นชื่อตัวแปร CSS ได้อย่างถูกต้อง
  • วิธีนี้ช่วยหลีกเลี่ยงการชนกับการตั้งค่า --rem แบบโกลบอลของ Grammarly ได้

แก่นของปัญหา

  • Grammarly ในฐานะเว็บเอ็กซ์เทนชัน ได้บังคับแทรกสไตล์ระดับโกลบอลเข้าไปในทุกเว็บไซต์
  • โดยเฉพาะการใช้ชื่อตัวแปร CSS ทั่วไปอย่าง --rem นั้นสร้างผลเสียอย่างมาก
  • แม้ภายในโค้ดจะใช้ชื่อคลาสแบบสุ่ม แต่กลับไม่เข้าใจว่าทำไมถึงยังเลือกใช้ชื่อทั่วไปในระดับโกลบอล
  • โค้ดนี้ยังถูกแทรกแม้จะไม่ได้ใช้งานส่วนขยายจริง ๆ

บทสรุปและข้อเสนอ

  • ผู้เขียนได้ติดต่อ Grammarly แล้ว และแม้จะได้รับการตอบกลับอย่างรวดเร็ว แต่ก็ยังไม่ได้คุยกับผู้รับผิดชอบที่เข้าใจปัญหาเชิงเทคนิค
  • แนวทางแก้ที่เหมาะสมที่สุดคือ Grammarly ควรใช้ชื่อตัวแปรอย่าง --🤡 แทน และปล่อยให้นักพัฒนาคนอื่นสามารถใช้ --rem ได้อย่างอิสระ

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-03-31
ความคิดเห็นจาก Hacker News

  • ปัญหาส่วนขยายของฉันต่างออกไปเล็กน้อย เราปล่อยส่วนขยายที่ช่วยให้สลับระหว่างพร็อกซีเซิร์ฟเวอร์ได้ง่ายเพื่อทดสอบตำแหน่งทางภูมิศาสตร์

    • เมื่อไม่กี่เดือนก่อน ฉันเจอเดโมให้ลูกค้าที่เลวร้ายที่สุด ดูเหมือนว่าผลิตภัณฑ์จะใช้งานไม่ได้
    • หลังจากดีบักอยู่นาน ก็พบว่าอัปเดตล่าสุดของส่วนขยาย 1Password ทำให้ของเราพัง
    • พวกเขา subscribe กับ authentication event แต่ไม่ return ค่า ทำให้ subscriber ของเราไม่ถูกเรียก
    • ทีมซัพพอร์ตของ 1Password ดีกว่า Grammarly แต่ก็ยากที่จะโน้มน้าวให้พวกเขาจัดลำดับความสำคัญ
    • ส่วนขยายจากรัสเซียที่จำเป็นสำหรับเว็บไซต์รัฐบาลก็มีปัญหาเดียวกัน

  • เวลาจะ inject สคริปต์หรือสไตล์เข้าไปในหน้าที่ไม่รู้จัก อย่างน้อยที่สุดก็ควรใส่ namespace ให้ตัวแปร นี่คือมารยาทพื้นฐาน

  • น่ากลัวที่เห็นว่าการแชร์หน้าจอและการบันทึกจำนวนมากมีการบุกรุกสีเขียวในทุกเว็บไซต์เป็นค่าเริ่มต้น

    • ไม่ใช่แค่รบกวนสายตา แต่ยังเป็นปัญหาเรื่องความเป็นส่วนตัวและช่องทางการโจมตีด้วย
    • Chrome สามารถเปิดใช้งานส่วนขยายเฉพาะตอนที่จำเป็นได้ ฉันสงสัยว่าทำไมไม่มีใครทำแบบนี้

  • ฉันเป็นวิศวกรของ Grammarly Extension ขอโทษที่ทำ UX ของ dbushell.com พัง

    • นั่นไม่ใช่สิ่งที่ตั้งใจไว้ และเรากำลังใช้เทคนิคหลายอย่างเพื่อป้องกันเรื่องนี้
    • เราได้เพิ่มข้อยกเว้นสำหรับ dbushell.com ชั่วคราวแล้ว
    • กำลังทำงานกับการเปลี่ยนแปลงเพื่อให้มั่นใจว่ามีการแยกสไตล์อย่างสมบูรณ์

  • ฉันได้ส่งปัญหานี้ต่อให้ทีมวิศวกรรมแล้ว

  • Google Translate ก็มีปัญหาคล้ายกันที่ทำให้เว็บแอปของฉันพัง

    • ผู้ใช้ที่ใช้ Google Translate บ่นว่าแอปพัง
    • เพราะ Google ไปเปลี่ยน state ของแอปใน meta level ที่สูงกว่า
    • ฉันกำลังพยายามตรวจจับ Google Translate และแสดงคำเตือน

  • ระหว่างทำงานมี sentry error จำนวนมากที่เกี่ยวข้องกับส่วนขยายเบราว์เซอร์

    • Google Translate บน Chrome ขึ้นชื่อเรื่องทำให้เว็บไซต์ที่ใช้ React พัง
    • ต้องเสียเวลายุ่งยากในการมองข้ามปัญหาจากส่วนขยายใหม่ ๆ
    • ใช้การกรองฝั่งไคลเอนต์เพื่อลดปริมาณข้อมูลที่เก็บ

  • ฉันสงสัยว่าตัวแปรไหนจะทำเว็บพังได้มากที่สุด

    • --primary-color: transparent

  • ฉันสงสัยว่าคนอื่นจัดการกับส่วนขยายเบราว์เซอร์ที่เป็นปฏิปักษ์อย่างไร

  • ฉันสงสัยว่าวิธีนี้สามารถใช้ hijack ปลั๊กอินได้หรือไม่

    • อย่างน้อยก็น่าจะ inject ข้อความได้ และอาจ render ฟอร์มล็อกอินเพื่อฉวยโอกาสจากความเชื่อใจของผู้ใช้ได้ด้วย
    • ฉันสงสัยว่าการ inject องค์ประกอบเข้าไปในเอกสารที่คนอื่นควบคุมอยู่นั้นปลอดภัยจริงหรือไม่