Help us understand the problem. What is going on with this article?

Cookie以上のユーザートラッキング技術Canvas Fingerprintingを使ってみた

More than 5 years have passed since last update.

1. 概要

「Canvas Fingerprinting」というのは文字通り、Canvasという技術をつかった指紋採取をする技術のことを言います。

Webサイトにアクセスをすると、アクセスしたパソコンなどのクライアントの固有情報から指紋のようなものを生成して、それをWebサイト側がユーザーのトラッキング等に利用するというのが主な使われ方のようです。

2. 利用状況

The Web never forgetsによると、研究者たちが調査したAlexaトップ10万サイトのうち、5.5%以上でCanvas Fingerprintingスクリプトが動作しているため今後更に広がることが予想できる。
https://securehomes.esat.kuleuven.be/~gacar/persistent/

Canvas Fingerprintingを利用しているサイト一覧
https://securehomes.esat.kuleuven.be/~gacar/sticky/index.html

3. 技術

技術的に解説をすると、アクセスしたクライアントのブラウザやブラウザバージョン、インストールされているライブラリやフォント、解像度などの端末情報を元に、Canvasで目には見えない画像を生成し、それをそのクライアントの指紋として取得できるというもの。

但し、内部でレンダリングした画像データはそのままだとサイズが大きいので、各画像のピクセルデータをハッシュ化して、数バイト程度に落とし込んだものを正式な指紋として利用します。

canvasには任意の座標ピクセルの画素データを取得する機能があるので、フォントをレンダリングすることでOSやブラウザの情報、インストールされたフォント情報を暗に含んだ画像を、WebGLでレンダリングすることでその物理マシンのGPU(場合によってはドライバやファームウェアによっても異なるかも)を特定することができます。

具体的な仕組みとしては、
1. JavascriptのCanvasAPIで画像を生成
2. 生成した画像をデータで取得
3. 画像データをハッシュに変換してDB保存などで利用
canvasfingerprinting2.png

4. できること

今までcookieで管理したユーザーのトラッキングなどを、fingerprintを管理することで行うことができます。
cookieのようにブラウザやクライアントの設定で削除・無効などにもできないので、かなり特殊な設定をしない限りトラッキングを回避することができません。

開発者側からすれば、今まで以上にトラッキングをするのが容易且つ、高確率になるため既に世界の主要サイトでは使われ始めています。

cookieとは異なり、クライアントに依存するデータになるので、ドメインを跨いでも同じ端末の同じブラウザで閲覧する場合は、ドメインを横断して行動を特定することができるようになります。

5. 回避方法

今のところ根本的には「追跡されるのは仕方ない」とするしかなさそうです。

①スマホでアクセスする
スマートフォンはトラッキングをされることはないそうです。
※って言ってもPCでも見ますよね。。。

② 根本解決ではないが、2014年8月段階ではこの仕組みを使っているサイトのコードがほとんどAddThisという会社のコードらしいので、AddThisのサイトからOpt-Outするのは効果があるはずです。

③ 現実的ではないが、ブラウザのJavascriptを切ればCanvasAPIが実行されないので追跡はされない。但し、多くのサイトで正常に動かない状態になるはずなので、現実的ではありませんね。

④ Canvas Fingerprintingの対策がされているブラウザがいくつかあるようですが、まだテスト段階だったり、逆にセキュリティ的にめんどくさすぎて使い物にならないものが多い。

6. 実際に使ってみた

参照:https://github.com/Valve/fingerprintjs

インストール方法

①Ruby on Railsの場合

gem 'fingerprintjs-rails' 
bundle install
application.js
//= require fingerprint

②Bowerでインストール

bower install fingerprint

③NPMでインストール

npm install fingerprintjs

fingerprint.jsをコピー

https://github.com/Valve/fingerprintjs/blob/master/fingerprint.js

利用方法

fingerprint_test.js
var fingerprint = new Fingerprint().get();
// console.log(fingerprint); //fingerprintをconsoleで確認する場合はコメントアウトを外す

さらに固有性を増すためのオプションが二つあります。

fingerprint_test.js
var fingerprint = new Fingerprint({canvas: true}).get();
var fingerprint = new Fingerprint({screen_resolution: true}).get();

二つのオプションを同時に設定することも可能。

fingerprint_test.js
var fingerprint = new Fingerprint({
  canvas: true,
  screen_resolution: true
}).get();

consoleで見ると、数値データが取得できているはずなので、それを利用してユーザーのトラッキングをするのが今現状の主たる利用方法になります。

okappy
アトラエ取締役CTO兼yenta開発責任者やってます。 エンジニアの横の繋がりを大事にしたいので、何かあればfacebookで気軽にメッセージください。Qiitaの投稿に関することとかしないこととか、なんでもOKです。 http://www.facebook.com/toshi.oka.831
https://yenta.talentbase.io/yenta/?cn=qiita
atrae
People Techカンパニーとして、転職サイトGreen, ビジネスマッチングアプリyenta, 組織改善プラットフォームwevoxなどのサービスを運営。全ての社員が誇りを持てる組織と事業の創造にこだわり、関わる人々がファンとして応援したくなるような魅力ある会社であり続けることを目指しています。
https://atrae.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away