Grammarly एक्सटेंशन का विश्वासघात

 (dbushell.com)
2 पॉइंट द्वारा GN⁺ 2025-03-31 | 1 टिप्पणियां | WhatsApp पर शेयर करें

Grammarly एक्सटेंशन ने वेबसाइटों को क्यों तोड़ा

  • पिछले कुछ महीनों में अक्सर ऐसी रिपोर्ट मिलीं कि वेबसाइट लेआउट अजीब तरह से टूट गया था
  • समस्या का कारण Grammarly browser extension निकला, और इसकी पुष्टि करने के लिए लेखक ने खुद भी इसे इंस्टॉल करके देखा

समस्या का पता कैसे चला

  • Grammarly एक्सटेंशन निम्नलिखित permissions मांगता है:
    • सभी वेबसाइटों के डेटा तक access
    • notifications दिखाना
    • browser tabs तक access
  • Firefox में प्रयोग करने पर पता चला कि Grammarly वेबपेज में अपनी stylesheet inject करता है
    • इस stylesheet को वेबपेज से सीधे detect नहीं किया जा सकता (छिपी हुई stylesheet)
    • यह Content Security Policy को भी bypass कर देता है
  • <html> टैग के अंदर <grammarly-desktop-integration> element भी inject किया जाता है (उद्देश्य स्पष्ट नहीं है)

आखिर मेरे साइट पर ही क्यों?

  • Grammarly की stylesheet के अंत में निम्नलिखित code शामिल है: 
    :host,  
:root {  
  --rem:16  
}
  • यह setting डिफ़ॉल्ट CSS unit 1rem = 16px से टकराती है, और लेखक भी --rem नाम की custom property इस्तेमाल कर रहे थे
  • Grammarly एक fixed --rem value को global रूप से सेट करता है, और dynamic font sizing की कोशिश करता है
  • इसकी वजह से लेखक की fluid typography calculations टूट गईं

लेखक की प्रतिक्रिया

  • शुरुआत में Mutation Observer का उपयोग करके Grammarly द्वारा inject किए गए element को detect किया गया और !important style से override किया गया
  • बाद में अपनी CSS variable का नाम --rem से बदलकर --🤡 (Unicode emoji) कर दिया गया
  • emoji, CSS variable name के रूप में वैध है
  • ऐसा करने से Grammarly की global --rem setting के साथ conflict से बचा जा सकता है

समस्या की जड़

  • Grammarly, एक web extension के रूप में, सभी वेबसाइटों में global styles ज़बरदस्ती inject करता है
  • खास तौर पर --rem जैसे सामान्य CSS variable name का उपयोग करना बहुत नुकसानदेह है
  • अपने code के अंदर random class names इस्तेमाल करने के बावजूद, यह समझना मुश्किल है कि global स्तर पर सार्वजनिक naming क्यों लागू की गई
  • वास्तविक extension का उपयोग न करने पर भी code inject हो जाता है

निष्कर्ष और सुझाव

  • लेखक ने Grammarly से संपर्क किया, और जवाब जल्दी मिला, लेकिन तकनीकी रूप से समस्या समझने वाले व्यक्ति तक बात नहीं पहुँच सकी
  • आदर्श समाधान यह है कि Grammarly --🤡 जैसे variable name का उपयोग करे, और बाकी developers स्वतंत्र रूप से --rem का इस्तेमाल कर सकें

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-03-31
Hacker News राय

  • मेरे extension की समस्या थोड़ी अलग है। हमने geolocation testing के लिए proxy servers के बीच आसानी से switch करने वाला extension deploy किया है

    • कुछ महीने पहले सबसे खराब client demo का अनुभव हुआ। ऐसा लग रहा था कि product काम नहीं कर रहा है
    • काफी debugging के बाद पता चला कि 1Password extension के हालिया update ने हमारे extension को खराब कर दिया था
    • वे auth events को subscribe कर रहे थे, लेकिन return नहीं कर रहे थे, जिसकी वजह से हमारा subscriber call नहीं हो रहा था
    • 1Password की support team Grammarly से बेहतर थी, लेकिन issue को priority दिलवाना फिर भी मुश्किल था
    • government websites के लिए जरूरी Russian extension में भी यही समस्या है

  • जब आप किसी ऐसे page में scripts या styles inject करते हैं जिसे आप नहीं जानते, तो variables को namespace देना कम-से-कम बुनियादी शिष्टाचार है

  • यह देखना डरावना है कि कितनी सारी screen sharing और recordings default रूप से हर website पर हरे रंग की घुसपैठ शामिल कर देती हैं

    • सिर्फ visual distraction ही नहीं, privacy और attack vector भी समस्या हैं
    • Chrome जरूरत पड़ने पर ही extensions को activate कर सकता है। समझ नहीं आता कोई ऐसा क्यों नहीं करता

  • मैं Grammarly Extension का engineer हूँ। dbushell.com का UX खराब करने के लिए माफ़ी चाहता हूँ

    • यह जानबूझकर नहीं किया गया था, और इसे रोकने के लिए हम कई techniques का उपयोग कर रहे हैं
    • हमने अस्थायी रूप से dbushell.com के लिए exception जोड़ दिया है
    • style isolation सुनिश्चित करने के लिए बदलावों पर काम चल रहा है

  • मैंने यह issue engineering team तक पहुँचा दिया है

  • Google Translate से मेरी web app में ऐसी ही समस्या होती है

    • Google Translate इस्तेमाल करने वाले users शिकायत करते हैं कि app टूट गई है
    • क्योंकि Google app की state को एक ऊँचे meta level पर बदल देता है
    • मैं Google Translate को detect करके warning दिखाने की कोशिश कर रहा हूँ

  • काम के दौरान browser extensions से जुड़े बहुत सारे sentry errors मिलते हैं

    • Chrome का Google Translate React-आधारित sites को तोड़ने के लिए बदनाम है
    • नए extension issues को ignore करने के लिए झंझट भरा काम करना पड़ता है
    • collection volume कम करने के लिए client-side filtering का उपयोग करते हैं

  • सोच रहा हूँ कि web को सबसे ज़्यादा खराब कर सकने वाला variable कौन-सा होगा

    • --primary-color: transparent

  • सोच रहा हूँ कि hostile browser extensions को लोग कैसे handle करते हैं

  • सोच रहा हूँ कि क्या इस तरीके से plugin hijack किया जा सकता है

    • कम-से-कम text inject करना तो संभव होना चाहिए, और user के trust का दुरुपयोग करके login form भी render किया जा सकता है
    • यह सच में सुरक्षित है या नहीं, इस पर सवाल है कि किसी और के नियंत्रण वाले document में elements inject किए जाएँ