CSS Tricks

October 1, 2020

CSS Tricks # CSSを利用して視覚的な変化を起こすことで、ユーザーが埋め込みピクセル値などの情報を暴露するように騙すことができます。 ユーザのヒストリーを取得する # CSSの:visitedセレクタを使うと、訪問したことのある URL に対して異なるスタイルを適用することができます。 以前はgetComputedStyle()を使ってこの違いを検出することができましたが、昨今のブラウザでは常にリンクが訪問されたかのような値を返すことでこれを防ぎ、セレクタを使って適用できるスタイルを制限しています。1 そこで、CSSが効いた領域をクリックするようにユーザーを誘導する必要があるかもしれませんが、これはmix-blend-modeを使って行うことができます。2 また、レンダリングタイミングを悪用することで、ユーザーとのインタラクションなしに、リンクを別の色に塗り替える方法もあります。3 複数のリンクを使用して時間差を増加させることで動作するPoCがchromium report上で提供されました。3 info この攻撃例[^leak-1]は、もぐらたたきゲームを利用してユーザーをだましてページをクリックさせるものです。この問題に関して複数のブラウザにバグが報告されています。: ^bug-1, ^bug-2, ^bug-3 Captchaの悪用 # CSSを使えば、埋め込みをコンテキストから外部に取り出せます。 この例として、4に見られるような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. ...

CSS Injection

CSSインジェクション # warning ここで紹介される一連のXS-Leaksは対象ページでのCSSインジェクションを必要とします。 CSSインジェクションの様々なベクトルの中で、最もよく見られるのは、CSSセレクタの悪用です。これらは、特定のHTML要素にマッチし、選択するための表現として使用することができます。例えば、セレクタ input[value^="a"] は、input タグの値が文字 “a” で始まっている場合にマッチングされます。したがって、ある CSS セレクタが表現にマッチするかどうかを検出するため、攻撃者は background や @import などのプロパティを使用して、自身の管理するウェブサイトへのコールバックをトリガーすることができます。1 2 このマッチングプロセスは簡単にブルートフォースされ、文字列全体に拡張できます。 文字の並びに独自の表記がある場合、フォントの合字を悪用して、ページに含まれるJavaScriptなどがリークされる可能性があります。 * { display: block; }のようなスタイルを適用すると、styleやscriptなどの通常は隠されているHTMLタグも、テキストとして表示されることがあります。したがって、それらの内容もリークされる可能性があります。 対策 # 攻撃者がコントロールするコンテンツを独立したドキュメントに置きます。これは srcdoc属性を持つiframeを使って行うことができます。オプションで、コンテンツを独自のオリジンに分離するためのサンドボックス属性を含めることができます。 CSSインライナーを使って、グローバルなスタイルが変換されるようにします。 SameSite Cookies (Lax) COOP Framing Protections Isolation Policies ❌ ❌ ❌ ❌ References # CSS Injection Primitives, link ↩︎ HTTPLeaks, link ↩︎