Canvasのフィンガープリンティングを回避する方法

Canvas とは

Canvas は HTML5 で追加された新しいタグで、対応する API と組み合わせて使用することで、Web ページ上で画像を生成したり、画像コンテンツをリアルタイムに操作したりすることができます。


Canvas の用途

• 基本的なグラフィック描画（点、線、楕円などの描画）とテキスト描画
• グラフィックの変換と合成（拡大縮小、回転、オーバーレイなど）
• 画像と動画の処理
• アニメーションの実装
• ミニゲームの作成
  
  

インターネットの発展に伴い、ユーザーはWebページに対して、従来のWebフロントエンド開発では満たせない、より高度な視覚的およびインタラクティブな要件を抱くようになりました。そのため、強力な Canvas 描画機能を使用することで、Web ページに豊富なコンテンツを表示し、ユーザーに優れた視覚的かつインタラクティブなエクスペリエンスを提供できます。

以下に例を示します。

<script type=“text/javascript”> ; & nbsp;

// キャンバス要素に対応するDOMオブジェクトを取得します

var canvas_xy = document.getElementById(“canvas_xy”);

// キャンバスに描画するcanvasRenderingContent2Dオブジェクトを取得します

var ctx = canvas_xy.getContext(“2d”);

// 開始点を設定します描画

ctx.moveTo(100, 100);

// 次に描画する点を設定します

ctx.lineTo(200, 200);

// 次に描画する点を設定します

ctx.lineTo(400, 100);

// 描画終了

ctx.closePath();

// 線の幅を設定

ctx.lineWidth = 10;

// 描画スタイルを設定

ctx.strokeStyle = “red”;

// ポイント間に線を描画します

ctx.stroke();

// 塗りつぶしスタイルを設定します

ctx.fillStyle = “green”;

// 現在のビューを塗りつぶします

ctx.fill();

</script>

結果は次のとおりです:

キャンバスフィンガープリンティングとは？

キャンバスフィンガープリンティングを理解するには、まずブラウザフィンガープリンティングとは何かを説明することが重要です。

一般的に、ウェブサイトや広告主は、ウェブ上の各個人を正確にターゲティングできるテクノロジーを求めています。これにより、個人に関するデータを収集・分析し、より的確に広告やその他のキャンペーンを展開することができます。例えば、ユーザーがどのページを閲覧したか、どのようなキーワードを検索したか、何に興味を持ったか、どのボタンをクリックしたか、どのような機能を利用したか、どの商品を見たか、ショッピングカートに何を追加したかなどです。

しかし、ユーザーのプライバシー保護のためにブラウザが強化されるにつれ、ブラウザはウェブサイトに有効なユーザー識別情報を提供できなくなり、ウェブサイトで一般的に使用される追跡技術をブロックするようになりました。例えば、クロスドメインリクエストはCookieを送信しなくなり、シークレットモードが起動するなどです。そのため、2回別々に訪問したユーザーが同一ユーザーであるかどうかを識別できなくなり、ウェブサイトがユーザーの行動を追跡することが困難になっています。

ここでブラウザフィンガープリンティングが役立ちます。ウェブサイトはブラウザを通じて、ユーザーのデバイスのハードウェアの種類、オペレーティングシステム、ユーザーエージェント、システムフォント、言語、画面解像度、ブラウザプラグイン、ブラウザ拡張機能、ブラウザ設定、タイムゾーンの差、地理的位置など、ブラウザフィンガープリントと呼ばれる様々な情報を取得します。しかし、これらのフィンガープリントは人間の身長や年齢などに「類似」しているため、重複する可能性が高いため、個人を一意に識別することはできません。

HTML5ベースの高度なフィンガープリントは新たなソリューションを提供しており、その中で最も広く使用されているものの一つがCanvasフィンガープリントです。前述のように、Canvalテクノロジーはページ上に画像をリアルタイムで描画するために使用できますが、コンピュータによって描画される画像には微妙な違いがあり、通常は人間の目には認識できません。しかし、生成された画像データを計算することで、ユーザーを識別するためのフィンガープリント値を生成することができます。

ウェブサイトはどのようにしてCanvasフィンガープリントを取得するのでしょうか？

アクセスしたウェブサイトには、ウェブページ上に隠されたCanvas画像が描画されています。 HTML5 Canvas API によって実現されます。2 人のユーザーが同じデバイス、同じオペレーティングシステム、同じブラウザでウェブサイトにアクセスした場合、Canvas 画像は全く同じものになります。異なる設定の2台のコンピュータで同じ操作を行った場合、Canvasのフィンガープリントは通常異なります。

以下は、https://browserleaks.com/canvas で検出された2台のコンピュータのフィンガープリントです。

Canvasフィンガープリントは一意ではありません。一意性の値が高いほど、Canvasフィンガープリントの一意性が高くなります。ただし、このフィンガープリントは主にコンピューターのハードウェア、特にグラフィックカードのモデルに関連しているため、値が高いことが必ずしも良い結果を意味するわけではありません。通常の状況では、ハードウェアが重複する可能性はある程度あります。

Canvas フィンガープリンティングを回避する方法

以下の方法を適用することで、Canvas フィンガープリンティングを回避できます。

• ブラウザプラグインをインストールする

Google App Store には、Canvas Fingerprint Block など、キャンバス フィンガープリントをランダムに変更するプラグインがあります。原理は、毎回ランダムノイズ（人間の目には見えない）がキャンバスに挿入され、画像データのCRC検証結果に影響を与えるというものです。

プラグインによる検出結果は次のとおりです。

• ハードウェア アクセラレーションを無効にする

Canvas フィンガープリントの生成は主にコンピューターのハードウェア構成に依存するため、特別なハードウェア設定を適用することで、Canvas フィンガープリントの違いを排除できます。

例えば、Chrome の「詳細設定」→「システム」に移動し、「ハードウェア アクセラレーションが使用可能な場合は使用する」をオフにして、Chrome を再起動します。こうすることで、どのコンピューターを使用しても同じCanvasフィンガープリントが得られることがわかります。

• アンチディテクトブラウザを使用する

アンチディテクトブラウザは、固有のフィンガープリントを持つ個別のブラウジング環境を提供します。最初の方法と同様に、アンチディテクトブラウザを使用してフィンガープリントを回避するという原理も、Canvasにノイズを発生させます。しかし、このノイズはブラウザカーネルに実装されているため、アンチディテクトブラウザは実際のCanvasフィンガープリントを隠すのに優れています。さまざまな Canvas フィンガープリントを模倣して、Web サイトを「だまして」、さまざまなユーザーが訪問していると思わせることもできます。