CSS Tricks

October 1, 2020

CSS Tricks #

CSSを利用して視覚的な変化を起こすことで、ユーザーが埋め込みピクセル値などの情報を暴露するように騙すことができます。

ユーザのヒストリーを取得する #

CSSの:visitedセレクタを使うと、訪問したことのある URL に対して異なるスタイルを適用することができます。 以前はgetComputedStyle()を使ってこの違いを検出することができましたが、昨今のブラウザでは常にリンクが訪問されたかのような値を返すことでこれを防ぎ、セレクタを使って適用できるスタイルを制限しています。¹
そこで、CSSが効いた領域をクリックするようにユーザーを誘導する必要があるかもしれませんが、これはmix-blend-modeを使って行うことができます。² また、レンダリングタイミングを悪用することで、ユーザーとのインタラクションなしに、リンクを別の色に塗り替える方法もあります。³ 複数のリンクを使用して時間差を増加させることで動作するPoCがchromium report上で提供されました。³

info

この攻撃例[^leak-1]は、もぐらたたきゲームを利用してユーザーをだましてページをクリックさせるものです。この問題に関して複数のブラウザにバグが報告されています。: ^bug-1, ^bug-2, ^bug-3

Captchaの悪用 #

CSSを使えば、埋め込みをコンテキストから外部に取り出せます。 この例として、⁴に見られるようなcaptchaのふりをすることが挙げられます。 これは、埋め込み部分の幅と高さを設定することで、狙った文字だけが表示されるようにするものです。 複数の埋め込みを利用して、表示される文字の順番を変えて、何の情報を提供しているのかをユーザーが分かりづらくすることも可能です。

オートコンプリートの悪用 #

テキスト入力を使用するウェブサイトで、autocomplete="off"を使用してオートコンプリートを無効にしない場合、電子メールアドレスなどのデータをリークできる場合があります。javascriptを使用したテキスト入力のオートコンプリート機能を利用するために、ユーザーを騙して、キーを押させることができます。 Chromeの場合、上または下矢印キーを押してダイアログを開き、値を選択した後、EnterキーまたはTabキーを押して値をページに挿入するようにユーザーを誘導することが必要です。

let input = document.createElement("input");
input.type = "email";
input.autocomplete = "email";
input.name = "email";
input.size = "1";
input.style = "position:absolute;right:-500px;bottom:-21.9px";
input.onkeypress = e => {
    e.preventDefault();
}
window.onmousedown = e => {
    // マウスのクリックを無視する
    e.preventDefault();
}
input.onchange = e => {
    alert(e.srcElement.value);
    e.srcElement.value = "";
}
document.body.appendChild(input);
setInterval(() => {
    input.focus({preventScroll: true});
}, 1000);

カスタムカーソル #

データを直接的にリークすることはできないかもしれませんが、ユーザーを騙すのに役立つかもしれません。巨大なカーソルは、オートコンプリートダイアログや他のネイティブUIに重なるかもしれないからです。

<style>
:root {
  cursor: url('https://www.google.com/favicon.ico'), auto;
}
</style>

対策 #

XFOは、埋め込みが攻撃されることを防ぎます。これは、(XFOによって)コンテンツ表示されなくなることで、視覚的な違いがなくなるためです。ユーザのヒストリーを取得するタイプの攻撃は、ユーザー側で防ぐしかありません。ブラウザの履歴を無効にしたり、Firefoxの場合、about:configパネルでlayout.css.visited_links_enabledをfalseに設定すれことで、防ぐことができます。

参考文献 #