知っておかないと驚くかも！CSSにおけるセキュリティの脆弱性について

ネットでは時々、CSSにおけるセキュリティの脆弱性について驚かせるような記事が出回ります。最近話題になったCSSのセキュリティの脆弱性、CSSでできることの可能性、ブラウザの対応状況について紹介します。

CSS Security Vulnerabilities

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• 訪問済みリンクの懸念
• CSSによるキーロガー
• CSSによるデータシーフ
• インラインスタイルブロックのうん○
• もっとたくさんあると思います

はじめに

記事のタイトルを見て、心配しないでください。CSSにはセキュリティ上の危険な問題はなく、ほとんどの場合、心配する必要はありません。

しかし、時々驚かせるような記事が出回り、CSSでできることの可能性について注意を払う必要があります。最近、話題になった記事をまとめました。

訪問済みリンクの懸念

これは、下記のような流れです。

1. <a href="https://i-tickle-pigs.com">Tickle Pigs</a>のように、サイトの特定のページにのリンクを貼ります。
   訳者注: Tickle Pigsは性関連の俗語です。
2. リンクの訪問済みのスタイルに、「a:visited { color: pink; }」を定義します。
3. このリンクのスタイルが適用されたかを分析します。
4. スタイルがピンクの場合、アクセスしたユーザーがそのリンクに訪問済みであることが分かります。
5. この情報を取得し、そのユーザーに「いかがわしいサイトを見ましたね」と精神的苦痛を与えることができます。

この:visitedのスタイルは、「background-image: url(/data-logger/tickle.php);」のようにすることもできるため、CSSで実行することは可能です。訪問済みのユーザーにのみリクエストされます。

不安ですか？ しかし、大丈夫です。
すべてのブラウザはこれが可能になることを防止してきました。

CSSによるキーロガー

キーロガー（Key Logger）とは、キー入力を監視してそれを記録することです。詳細はここをご覧ください。

1. ページに何かを入力したとします、例えばパスワードを入力します。
2. その手口は、input要素の背景画像に値としてロガースクリプトを指定します。これで、ロガーはパスワードの一部または全部を収集します。

この方法は実は、そんなに簡単ではありません。inputのvalue属性は入力しただけでは変更されません。ただし、ReactのようなフレームワークでこのCSSをログインページに挿入すると、理論的にはこのCSSを使用したキーロガーは機能します。

しかし、その場合はJavaScriptがそのページで実行されています。JavaScriptはこういったことに関してCSSよりも1000倍も心配です。JavaScriptのキーロガーはほんの数行のコードで、keypressイベントを監視し、Ajaxを介してそれを収集します。

サードパーティ、あるいはXSSがインラインJavaScriptを挿入すると、コンテンツセキュリティポリシー(CSP)で停止できるようになりました。CSSも同様なので、安心してください。

CSSによるデータシーフ

これは、下記のような流れです。

1. もしあなたが認証したページに私の悪意のあるCSSを挿入できたとしたら、
2. そのサイトは事前に入力された形式で社会保障番号（SSN）のような機密情報を表示します。
3. 属性セレクターを使用して、そのデータを入手できます。

10億通りあれば、あらゆる組み合わせを網羅できるかもしれません。

インラインスタイルブロックのうん○

これをCSSのせいにしていいかは分かりませんが、想像してみてください

おそらく、ユーザーにCSSのカスタマイズを許可しているでしょう。styleタグを閉じたり、scriptタグを開いたり、悪質なJavaScriptを記述することができるため、これは攻撃となります。

もっとたくさんあると思います

CSSのセキュリティの脆弱性について、どれほど恐ろしいことなのか、少し懐疑的になってしまいます。私は専門家ではありません、しかしセキュリティは重要であり、セキュリティのことを軽視したいと思いません（特にサードパーティの懸念）。しかし、CSS自体が攻撃の媒介になるという話は聞いたことがありません。もしそういうことがあるなら、私に教えてください！