Pengkhianatan ekstensi Grammarly

 (dbushell.com)
2 poin oleh GN⁺ 2025-03-31 | 1 komentar | Bagikan ke WhatsApp

Mengapa ekstensi Grammarly merusak website

  • Dalam beberapa bulan terakhir, sering ada laporan bahwa layout website rusak secara aneh
  • Penyebab masalah ini terungkap sebagai ekstensi browser Grammarly, dan untuk memastikannya, penulis juga memasangnya sendiri

Proses menemukan masalah

  • Ekstensi Grammarly meminta izin berikut:
    • akses ke data semua website
    • menampilkan notifikasi
    • akses ke tab browser
  • Hasil eksperimen di Firefox menunjukkan bahwa Grammarly menyisipkan stylesheet miliknya sendiri ke halaman web
    • Stylesheet ini tidak bisa dideteksi langsung dari halaman web (stylesheet tersembunyi)
    • Bahkan melewati Content Security Policy
  • Elemen <grammarly-desktop-integration> juga disisipkan di dalam tag <html> (tujuannya tidak jelas)

Mengapa situs saya?

  • Di akhir stylesheet Grammarly terdapat kode berikut: 
    :host,  
:root {  
  --rem:16  
}
  • Pengaturan ini bertabrakan dengan satuan CSS dasar 1rem = 16px, dan penulis juga sedang menggunakan custom property bernama --rem
  • Grammarly menetapkan nilai --rem tetap secara global, sambil mencoba menerapkan ukuran font dinamis
  • Akibatnya, perhitungan tipografi fleksibel milik penulis menjadi rusak

Tanggapan penulis

  • Awalnya, penulis menggunakan Mutation Observer untuk mendeteksi elemen yang disisipkan Grammarly lalu menimpanya dengan style !important
  • Setelah itu, ia mengubah nama variabel CSS miliknya dari --rem menjadi --🤡 (emoji Unicode)
  • Emoji valid digunakan sebagai nama variabel CSS
  • Dengan cara ini, benturan dengan pengaturan global --rem dari Grammarly bisa dihindari

Inti masalah

  • Sebagai ekstensi web, Grammarly memaksa penyisipan style global ke semua website
  • Terutama, penggunaan nama variabel CSS umum seperti --rem sangat merugikan
  • Di dalam kodenya sendiri mereka memakai nama kelas acak, tetapi sulit dipahami mengapa justru menerapkan penamaan umum secara global
  • Bahkan tanpa benar-benar memakai ekstensi tersebut, kodenya tetap disisipkan

Kesimpulan dan usulan

  • Penulis telah menghubungi Grammarly, dan meski ada respons cepat, ia tidak berhasil terhubung dengan pihak yang benar-benar memahami masalah teknis ini
  • Solusi idealnya adalah Grammarly memakai nama variabel seperti --🤡, sehingga pengembang lain tetap bisa bebas menggunakan --rem

Bacaan terkait

1 komentar

 
GN⁺ 2025-03-31
Opini Hacker News

  • Masalah ekstensi saya sedikit berbeda. Kami mendistribusikan ekstensi yang memudahkan perpindahan antar server proxy untuk pengujian geolokasi

    • Beberapa bulan lalu saya mengalami demo klien terburuk. Produk terlihat seperti tidak berfungsi
    • Setelah banyak debugging, kami menemukan bahwa pembaruan terbaru ekstensi 1Password merusak ekstensi kami
    • Mereka berlangganan event autentikasi tetapi tidak mengembalikannya, sehingga subscriber kami tidak terpanggil
    • Tim dukungan 1Password lebih baik daripada Grammarly, tetapi sulit meyakinkan mereka soal prioritas
    • Ekstensi Rusia yang diperlukan untuk situs web pemerintah juga memiliki masalah yang sama

  • Saat menyuntikkan skrip atau style ke halaman yang tidak diketahui, memberi namespace pada variabel adalah sopan santun minimal

  • Menakutkan melihat begitu banyak screen sharing dan rekaman yang secara default menyertakan gangguan hijau di semua situs web

    • Bukan hanya gangguan visual, tetapi privasi dan vektor serangan juga menjadi masalah
    • Chrome dapat mengaktifkan ekstensi hanya saat diperlukan. Saya penasaran kenapa tidak ada yang melakukan ini

  • Saya engineer di Grammarly Extension. Maaf telah merusak UX di dbushell.com

    • Itu tidak disengaja, dan kami sedang menggunakan berbagai teknik untuk mencegahnya
    • Kami telah menambahkan pengecualian sementara untuk dbushell.com
    • Kami sedang mengerjakan perubahan untuk memastikan isolasi style

  • Saya sudah meneruskan masalah ini ke tim engineering

  • Ada masalah serupa di mana Google Translate merusak web app saya

    • Pengguna yang memakai Google Translate mengeluh bahwa app-nya rusak
    • Karena Google mengubah state app pada level meta yang lebih tinggi
    • Saya mencoba mendeteksi Google Translate dan menampilkan peringatan

  • Ada banyak error sentry terkait browser extension saat bekerja

    • Google Translate di Chrome terkenal suka merusak situs berbasis React
    • Diperlukan pekerjaan merepotkan untuk mengabaikan masalah ekstensi baru
    • Saya menggunakan filtering sisi klien untuk mengurangi volume pengumpulan

  • Saya penasaran variabel apa yang paling bisa merusak web

    • --primary-color: transparent

  • Saya penasaran bagaimana orang menangani browser extension yang bersifat bermusuhan

  • Saya penasaran apakah metode ini bisa dipakai untuk membajak plugin

    • Setidaknya seharusnya bisa menyuntikkan teks, dan mungkin juga merender form login dengan menyalahgunakan kepercayaan pengguna
    • Saya ragu apakah benar-benar aman menyuntikkan elemen ke dokumen yang dikendalikan orang lain