Grammarly eklentisinin ihaneti

 (dbushell.com)
2 puan yazan GN⁺ 2025-03-31 | 1 yorum | WhatsApp'ta paylaş

Grammarly eklentisinin web sitelerini neden bozduğu

  • Son birkaç aydır web sitesi düzeninin garip şekilde bozulduğuna dair bildirimler sık sık alıyordu
  • Sorunun nedeninin Grammarly tarayıcı eklentisi olduğu ortaya çıktı ve bunu doğrulamak için kendisi de doğrudan kurdu

Sorunun keşif süreci

  • Grammarly eklentisi şu izinleri istiyor:
    • tüm web sitelerindeki verilere erişim
    • bildirim gösterme
    • tarayıcı sekmelerine erişim
  • Firefox'ta yapılan deneyde Grammarly'nin web sayfasına kendi stil sayfasını eklediği görüldü
    • Bu stil sayfası web sayfası içinden doğrudan tespit edilemiyor (gizli stil sayfası)
    • Hatta Content Security Policy'yi bile aşıyor
  • Ayrıca <html> etiketi içine <grammarly-desktop-integration> öğesi de ekleniyor (amacı belirsiz)

Neden benim sitemdi?

  • Grammarly'nin stil sayfasının sonunda şu kod yer alıyor: 
    :host,  
:root {  
  --rem:16  
}
  • Bu ayar, temel CSS birimi olan 1rem = 16px ile çakışıyor ve yazar da --rem adlı bir custom property kullanıyordu
  • Grammarly sabit bir --rem değerini küresel olarak ayarlayıp dinamik yazı tipi boyutlandırması yapmaya çalışıyor
  • Bu yüzden yazarın akışkan tipografi hesaplamaları bozuldu

Yazarın müdahalesi

  • İlk başta Mutation Observer kullanarak Grammarly'nin eklediği öğeleri tespit edip !important stiliyle üzerine yazdı
  • Daha sonra kendi CSS değişken adını --rem yerine --🤡 (Unicode emoji) olarak değiştirdi
  • Emoji, CSS değişken adı olarak geçerlidir
  • Böylece Grammarly'nin küresel --rem ayarıyla çakışma önlenebiliyor

Sorunun özü

  • Grammarly, bir web eklentisi olarak tüm web sitelerine küresel stilleri zorla enjekte ediyor
  • Özellikle --rem gibi yaygın CSS değişken adları kullanması çok zararlı
  • Kodun içinde rastgele sınıf adları kullanırken neden özellikle ortak bir adlandırmayı küresel olarak uyguladığı anlaşılır değil
  • Gerçekte eklenti kullanılmasa bile kod enjekte ediliyor

Sonuç ve öneri

  • Yazar Grammarly ile iletişime geçti; hızlı yanıt aldı ama teknik olarak sorunu anlayan bir yetkiliye ulaşamadı
  • İdeal çözüm, Grammarly'nin --🤡 gibi bir değişken adı kullanması ve diğer geliştiricilerin --remi özgürce kullanabilmesi

İlgili okumalar

1 yorum

 
GN⁺ 2025-03-31
Hacker News görüşleri

  • Benim eklenti sorunum biraz farklı. Coğrafi konum testleri için proxy sunucuları arasında kolayca geçiş yapmayı sağlayan bir eklenti dağıtıyoruz

    • Birkaç ay önce gördüğüm en kötü müşteri demosunu yaşadım. Ürün çalışmıyormuş gibi görünüyordu
    • Uzun süren hata ayıklamanın ardından, 1Password eklentisinin yakın tarihli bir güncellemesinin bizimkini bozduğunu fark ettik
    • Kimlik doğrulama olayına abone olmuşlardı ama geri dönüş yapmıyorlardı; bu yüzden bizim abonemiz çağrılmıyordu
    • 1Password destek ekibi Grammarly'ninkinden daha iyiydi ama buna öncelik vermelerini sağlamak zordu
    • Devlet siteleri için gereken Rus eklentisinde de aynı sorun var

  • Betik ya da stilin bilinmediği bir sayfaya bir şey enjekte ederken, değişkenlere namespace vermek en azından asgari nezakettir

  • Pek çok ekran paylaşımı ve kaydın varsayılan olarak tüm web sitelerine yeşil bir müdahaleyi dahil ettiğini görmek korkutucu

    • Sorun sadece görsel dikkat dağıtma değil; gizlilik ve saldırı vektörleri de mesele
    • Chrome, eklentileri yalnızca gerektiğinde etkinleştirebiliyor. Neden kimsenin bunu yapmadığını merak ediyorum

  • Grammarly Extension'da çalışan bir mühendisim. dbushell.com'un UX'ini bozduğumuz için üzgünüm

    • Bu kasıtlı değildi ve bunu önlemek için çeşitli teknikler kullanıyoruz
    • dbushell.com için geçici olarak bir istisna ekledim
    • Stil izolasyonunu garanti altına alacak bir değişiklik üzerinde çalışıyoruz

  • Bu sorunu mühendislik ekibine ilettim

  • Google Translate'in web uygulamamı bozduğu benzer bir sorunum var

    • Google Translate kullanan kullanıcılar uygulamanın bozulduğundan şikayet ediyor
    • Çünkü Google, uygulamanın durumunu daha üst bir meta seviyede değiştiriyor
    • Google Translate'i tespit edip bir uyarı göstermeye çalışıyorum

  • İş sırasında tarayıcı eklentileriyle ilgili çok sayıda sentry hatası alıyorum

    • Chrome'daki Google Translate, React tabanlı siteleri bozmasıyla kötü üne sahip
    • Yeni eklenti sorunlarını görmezden gelmek için zahmetli bir çalışma gerekiyor
    • Toplama hacmini azaltmak için istemci tarafı filtreleme kullanıyorum

  • Web'i en çok bozabilecek değişkenin ne olacağını merak ediyorum

    • --primary-color: transparent

  • Düşmanca tarayıcı eklentileriyle nasıl başa çıkıldığını merak ediyorum

  • Bu yöntemle eklentilerin ele geçirilip geçirilemeyeceğini merak ediyorum

    • En azından metin enjekte edebilmek gerekir; hatta kullanıcının güvenini kötüye kullanarak bir giriş formu bile render edilebilir
    • Başkasının kontrol ettiği bir belgeye öğe enjekte etmenin gerçekten güvenli olup olmadığını sorguluyorum