隠居日録

2016年(世にいう平成28年)、発作的に会社を辞め、隠居生活に入る。日々を読書と散歩に費やす

browser fingerprint

あるサイトのログインを調べていたら、ユーザーネームとパスワードの他にauth_idというのも送信していた。はて、これは何者だろうと思い調べてみたら、fingerprintというのを計算して、その値をauth_idにセットしているのだ。fingerprint(指紋)って何だろうと思い調べてみると、以下のページが見つかった。

github.com

このライブラリを使って計算しているようなのだが、もう少し詳しく調べてみると、HTML5canvasを使って、ある文字を表示したときの画像データを基に計算したデータから、かなりの精度でユーザーを識別できるというのだ。

Cookieなしでユーザー特定が可能、ブラウザー・フィンガープリントとは(前) - Cookieなしでユーザー特定が可能、ブラウザー・フィンガープリントと...:Computerworld

どうもこのあたりのメカニズムがよく判らず、ずーともやもやしている。どんな画像データを表示させようとしているかというと、こんな画像だ。

f:id:prozorec:20171113201441p:plain

実際のJavaScriptのコードは以下のような感じ。

    getCanvasFingerprint: function () {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      // https://www.browserleaks.com/canvas#how-does-it-work
      var txt = 'http://valve.github.io';
      ctx.textBaseline = "top";
      ctx.font = "14px 'Arial'";
      ctx.textBaseline = "alphabetic";
      ctx.fillStyle = "#f60";
      ctx.fillRect(125,1,62,20);
      ctx.fillStyle = "#069";
      ctx.fillText(txt, 2, 15);
      ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
      ctx.fillText(txt, 4, 17);
      return canvas.toDataURL();

このコードで表示される画像データがPCにインストールされているフォントなどの違いによりかなりユニークになるらしく、これを基に計算したハッシュ値も衝突はあるが、かなりの確率でユニークになるというのだ。仕組みはよく判らないが、何とも気持ちが悪いので、firefoxで何かこれに対抗するすべはないのかとAdd-onを探してみたら、以下の者を見つけた。

CanvasBlocker – Firefox 向けアドオン

これをインストールすると、ページでHTML5canvasを使っていると、アドレスバーの所に指紋が出てくる。

f:id:prozorec:20171113202506p:plain

今のところそんなにこれが表示されるページはあまり多くないようだし、これが表示されても、必ずしもbrower fingerprintを計算しているわけではないが、注意したほうがいいだろう。