Grammarly拡張機能の裏切り

 (dbushell.com)
2 ポイント 投稿者 GN⁺ 2025-03-31 | 1件のコメント | WhatsAppで共有

Grammarly拡張機能がWebサイトを壊した理由

  • ここ数か月、Webサイトのレイアウトがおかしく崩れるという報告をたびたび受けていた
  • 問題の原因はGrammarlyのブラウザー拡張機能だと判明し、それを確認するために本人も実際にインストールしてみた

問題発見の過程

  • Grammarly拡張機能は次のような権限を要求する:
    • すべてのWebサイトのデータへのアクセス
    • 通知の表示
    • ブラウザータブへのアクセス
  • Firefoxで実験した結果、GrammarlyはWebページに独自のスタイルシートを挿入していた
    • このスタイルシートはWebページ側から直接検出できない（隠されたスタイルシート）
    • Content Security Policyさえ回避する
  • <html>タグ内に<grammarly-desktop-integration>要素も挿入される（目的は不明）

なぜ自分のサイトだったのか?

  • Grammarlyのスタイルシートの末尾には次のコードが含まれている: 
    :host,  
:root {  
  --rem:16  
}
  • この設定は基本的なCSS単位である1rem = 16pxと重なっており、著者も--remというカスタムプロパティを使っていた
  • Grammarlyは固定された--rem値をグローバルに設定し、動的なフォントサイズ調整を試みていた
  • その結果、著者の流動的なタイポグラフィ計算が壊れた

著者の対応

  • 最初はMutation Observerを使ってGrammarlyが挿入した要素を検出し、!importantスタイルで上書きした
  • その後、自分のCSS変数名を--remから**--🤡（Unicode絵文字）**に変更した
  • 絵文字はCSS変数名として有効である
  • こうすることで、Grammarlyのグローバルな--rem設定との衝突を避けられる

問題の本質

  • GrammarlyはWeb拡張機能として、すべてのWebサイトにグローバルスタイルを強制的に挿入している
  • とりわけ--remのような一般的なCSS変数名を使うのは非常に有害である
  • コード内部ではランダムなクラス名を使っているのに、なぜわざわざ共通の命名をグローバルに適用したのか理解できない
  • 実際に拡張機能を使っていなくてもコードは挿入される

結論と提案

  • 著者はGrammarlyに問い合わせ、素早い返答はあったが、技術的に問題を理解している担当者にはつながらなかった
  • 理想的な解決策は、Grammarlyが--🤡のような変数名を使い、ほかの開発者が自由に--remを使えるようにすることだ

関連記事

1件のコメント

 
GN⁺ 2025-03-31
Hacker Newsの意見

  • 自分の拡張機能の問題は少し異なる。私たちは地理的位置のテストのために、プロキシサーバー間の切り替えを簡単にする拡張機能を配布している

    • 数か月前、最悪のクライアントデモを経験した。製品が動作していないように見えた
    • 多くのデバッグの末、1Password拡張機能の最近のアップデートが私たちのものを壊していたことを発見した
    • 彼らは認証イベントを購読していたが return しておらず、そのため私たちの購読者が呼び出されなかった
    • 1PasswordのサポートチームはGrammarlyよりは良かったが、優先度を上げてもらうよう説得するのは難しかった
    • 政府系ウェブサイトに必要なロシア製拡張機能にも同じ問題がある

  • スクリプトやスタイルが不明なページに注入するときは、変数に名前空間を付けるのが最低限の礼儀だ

  • 多くの画面共有や録画で、デフォルトの状態であらゆるウェブサイトにGrammarlyの侵入が含まれているのを見るのは恐ろしい

    • 視覚的な妨害だけでなく、プライバシーと攻撃ベクトルが問題だ
    • Chromeでは必要なときだけ拡張機能を有効化できる。なぜ誰もそうしないのか不思議だ

  • Grammarly Extensionのエンジニアです。dbushell.comのUXを壊してしまい申し訳ありません

    • 意図したものではなく、これを防ぐためにさまざまな技術を使っています
    • dbushell.com向けの例外を一時的に追加しました
    • スタイルの分離を保証するための変更を進めています

  • この問題をエンジニアリングチームに伝えた

  • Google Translateが自分のウェブアプリを壊す似たような問題がある

    • Google Translateを使うユーザーが、アプリが壊れていると不満を言う
    • Googleがアプリの状態をより高いメタレベルで変更したためだ
    • Google Translateを検出して警告を表示しようとしている

  • 仕事中、ブラウザ拡張機能に関連するsentryエラーがたくさんある

    • ChromeのGoogle TranslateはReactベースのサイトを壊すことで悪名高い
    • 新しい拡張機能の問題を無視するための面倒な作業が必要になる
    • クライアント側フィルタリングを使って収集量を減らしている

  • ウェブを最も壊せる変数は何だろうと思う

    • --primary-color: transparent

  • 敵対的なブラウザ拡張機能にどう対処しているのか気になる

  • この方法でプラグインをハイジャックできるのか気になる

    • 少なくともテキストは注入できるはずで、ユーザーの信頼を悪用してログインフォームをレンダリングすることもできるかもしれない
    • 他人が制御するドキュメントに要素を注入することが本当に安全なのか疑問だ