Sự phản bội của tiện ích mở rộng Grammarly

 (dbushell.com)
2 điểm bởi GN⁺ 2025-03-31 | 1 bình luận | Chia sẻ qua WhatsApp

Vì sao tiện ích mở rộng Grammarly làm hỏng website

  • Trong vài tháng gần đây, tác giả thường xuyên nhận được báo cáo rằng bố cục website bị vỡ một cách kỳ lạ
  • Nguyên nhân được xác định là tiện ích mở rộng trình duyệt Grammarly, và để xác minh điều này, chính tác giả cũng đã tự cài thử

Quá trình phát hiện vấn đề

  • Tiện ích mở rộng Grammarly yêu cầu các quyền sau:
    • truy cập dữ liệu trên mọi website
    • hiển thị thông báo
    • truy cập các tab trình duyệt
  • Khi thử nghiệm trên Firefox, Grammarly chèn stylesheet riêng của nó vào trang web
    • Không thể phát hiện stylesheet này trực tiếp từ trang web (stylesheet ẩn)
    • Thậm chí còn vượt qua cả Content Security Policy
  • Một phần tử <grammarly-desktop-integration> cũng được chèn vào bên trong thẻ <html> (mục đích không rõ)

Vì sao lại là site của tôi?

  • Ở cuối stylesheet của Grammarly có đoạn mã sau: 
    :host,  
:root {  
  --rem:16  
}
  • Thiết lập này trùng với đơn vị CSS mặc định 1rem = 16px, trong khi tác giả cũng đang dùng custom property --rem
  • Grammarly đặt giá trị --rem cố định trên toàn cục và cố gắng xử lý kích thước font động
  • Vì vậy, các phép tính typography linh hoạt của tác giả bị hỏng

Cách tác giả ứng phó

  • Ban đầu, tác giả dùng Mutation Observer để phát hiện phần tử do Grammarly chèn vào và ghi đè bằng style !important
  • Sau đó đổi tên biến CSS của mình từ --rem thành --🤡 (emoji Unicode)
  • Emoji là tên biến hợp lệ trong CSS
  • Cách này giúp tránh xung đột với thiết lập --rem toàn cục của Grammarly

Bản chất của vấn đề

  • Grammarly, với tư cách là một tiện ích mở rộng web, đang cưỡng ép chèn style toàn cục vào mọi website
  • Đặc biệt, việc dùng một tên biến CSS phổ biến như --rem là rất có hại
  • Trong khi bên trong mã họ dùng tên class ngẫu nhiên, thật khó hiểu vì sao lại cố tình áp dụng một cách đặt tên dùng chung ra toàn cục
  • Ngay cả khi không thực sự sử dụng tiện ích, mã vẫn bị chèn vào

Kết luận và đề xuất

  • Tác giả đã liên hệ với Grammarly, phản hồi ban đầu đến khá nhanh nhưng không kết nối được với người phụ trách thực sự hiểu vấn đề kỹ thuật
  • Giải pháp lý tưởng là Grammarly nên dùng một tên biến như --🤡, còn các nhà phát triển khác có thể tiếp tục tự do dùng --rem

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-03-31
Ý kiến trên Hacker News

  • Vấn đề với tiện ích mở rộng của tôi hơi khác một chút. Chúng tôi triển khai một tiện ích giúp dễ dàng chuyển đổi giữa các máy chủ proxy để kiểm thử vị trí địa lý

    • Vài tháng trước, chúng tôi đã trải qua buổi demo cho khách hàng tệ nhất từ trước đến nay. Sản phẩm trông như thể không hoạt động
    • Sau rất nhiều lần gỡ lỗi, chúng tôi phát hiện bản cập nhật gần đây của tiện ích 1Password đã làm hỏng tiện ích của chúng tôi
    • Họ đã đăng ký các sự kiện xác thực nhưng không trả về, khiến subscriber của chúng tôi không được gọi
    • Đội hỗ trợ của 1Password tốt hơn Grammarly, nhưng rất khó để thuyết phục họ ưu tiên xử lý
    • Tiện ích mở rộng của Nga cần cho các website chính phủ cũng gặp cùng vấn đề

  • Khi chèn script hoặc style vào những trang mà bạn không biết trước, việc đặt namespace cho biến là phép lịch sự tối thiểu

  • Thật đáng sợ khi thấy rất nhiều hoạt động chia sẻ màn hình và ghi hình mặc định bao gồm sự xâm nhập màu xanh lá lên mọi website

    • Không chỉ gây nhiễu thị giác, mà còn là vấn đề về quyền riêng tư và bề mặt tấn công
    • Chrome có thể chỉ kích hoạt tiện ích mở rộng khi cần. Tôi tự hỏi vì sao chẳng ai làm vậy

  • Tôi là kỹ sư của Grammarly Extension. Xin lỗi vì đã làm hỏng UX của dbushell.com

    • Đó không phải chủ ý, và chúng tôi đang dùng nhiều kỹ thuật khác nhau để ngăn điều này xảy ra
    • Tôi đã tạm thời thêm ngoại lệ cho dbushell.com
    • Chúng tôi đang thực hiện thay đổi để bảo đảm cô lập style

  • Tôi đã chuyển vấn đề này cho đội ngũ kỹ thuật

  • Google Translate cũng có vấn đề tương tự làm hỏng web app của tôi

    • Người dùng dùng Google Translate phàn nàn rằng ứng dụng bị hỏng
    • Vì Google đã thay đổi trạng thái của ứng dụng ở một tầng meta cao hơn
    • Tôi đang cố phát hiện Google Translate và hiển thị cảnh báo

  • Trong công việc, chúng tôi có rất nhiều lỗi sentry liên quan đến tiện ích mở rộng trình duyệt

    • Google Translate trên Chrome nổi tiếng là làm hỏng các website dựa trên React
    • Cần làm công việc phiền phức là bỏ qua các vấn đề mới do tiện ích mở rộng gây ra
    • Chúng tôi dùng lọc phía client để giảm lượng thu thập

  • Tôi tự hỏi biến nào có thể phá web nhiều nhất

    • --primary-color: transparent

  • Tôi tự hỏi mọi người xử lý các tiện ích mở rộng trình duyệt mang tính đối kháng như thế nào

  • Tôi tự hỏi liệu có thể hijack plugin bằng cách này không

    • Ít nhất thì hẳn phải có thể chèn văn bản, và cũng có thể render biểu mẫu đăng nhập để lợi dụng sự tin tưởng của người dùng
    • Tôi nghi ngờ việc chèn phần tử vào một tài liệu do người khác kiểm soát có thực sự an toàn hay không