Webページ内の背景色などに、特定のカラーコードを用意するのではなく、カラーコードで指定した色を少し透過(アルファチャンネル)をつけて表現しているデザインをみることがあった
例えば、黒rgb(255, 255, 255)
にアルファチャンネルを指定してグレーrgba(255, 255, 255, 0.8)
のような感じ
黒がカラーパレットに定義されていて、グレーが定義されていない場合に、カラーパレットに定義するほどでもないけど使いたい場合の抜け穴みたいな感じがしていて、こうなったら何でもありでは?と個人的には思っていた
デザイナーにはなるべくアルファチャンネルを使わないで表現するようにお願いしていたが、それをもっとはっきりさせる理由がないかを考えていた
そんなときa:visited
のセキュリティ対策を知った
a:visited のセキュリティ対策
2010年にWebページのリンクで、ユーザがリンク先を訪れたことがあるかどうかを判断する際に使っていたgetComputedStyle()
によってユーザの履歴を詮索し、その他の情報と組み合わせてユーザーをプロファイルできてしまうセキュリティ上の問題が発覚した
https://dev.mozilla.jp/2010/04/plugging-the-css-history-leak/
これにより、a:visited
擬似クラスを使って適用できるスタイルが制限され、かつ、利用できるスタイルでもアルファチャンネルは無視されることになった
つまり、color
などのCSSプロパティでも、アルファチャンネルが使えない場合があるということになる
この使えない場合を考えてデザインするのは難しいし、いつセキュリティの問題で使えなくなるかもわからないので使わないようにするという理由づけができそう
アルファチャンネルをどう悪用するか
簡単に調べると、訪問済みと未訪問リンクの表示にかかる時間の違いを使ってユーザがどこにアクセスしたのかを推測するのに使うみたい
他にアルファチャンネルの悪用例として以下の記事が参考になった blog.mozilla.org
上の記事はChromiumとFirefoxで見つかった脆弱性で、悪意のあるページがアクセスできないはずのオリジンにある画像の一部を読み取る可能性があるというもの
同じように透明度の処理の時間の違いを使って、画像にどんなことが書いてあるかを推測する手法