HTMLベースの「指紋認証」技術の実装 Canvas_html/css_WEB-ITnose

作者：zhanhailiang 日期：2015-01-31

説明

いわゆる指紋認証とは、各デバイスの一意の識別子 (以下、UUID と呼びます) を識別することを指します。モバイル ネイティブ アプリなどのアプリは、関連するデバイス API を呼び出すことで、対応する UUID を取得できます。ただし、ブラウザの WebAPP は動作環境によりデバイス API に直接アクセスできないため、別の方法で UUID を設定する必要があります。

永続的な Cookie に基づいて UUID を生成する

原則

ユーザーが Web サイトにアクセスすると、Web サイトはユーザーの現在のブラウザー Cookie に UUID を含む Cookie を埋め込み、この情報を使用してユーザーのすべての行動 (どのページがアクセスされたか) を記録します。どのようなキーワードが検索されましたか? どのボタンがクリックされましたか? どの商品がショッピング カートに追加されましたか?

実装

function rand(len) {    var hex = "0123456789abcdef",        str = "",        index = 0;    for (len = len || 32; len > index; index++) {        str += hex.charAt(Math.ceil(1e8 * Math.random()) % hex.length);    }    return str;}var uuid = (new Date).getTime() + "_" + rand();// 写持久化cookie，两年后过期// setcookie('uuid', uuid, 732 * 24 * 60 * 60);

欠点

UUID を使用してユーザー追跡テクノロジーを実装し、その後のデータ分析を容易にすることができます。

しかし、インターネットが個人のプライバシーをより重要視するにつれて、Cookie の人気はますます低くなっていきます。多くのセキュリティ ツールやブラウザでさえ、ユーザーが Cookie 機能をオフにすることを許可またはガイドし始めています。たとえば、多くの主流ブラウザには「プライバシー モード」機能があります。このように、Web サイトが Cookie を通じてユーザーの行動を追跡することは困難です。ただし、Web サイトが各訪問者の行動を追跡する方法はまだいくつかあります。たとえば、フラッシュ Cookie を使用して、一意の識別と追跡を行うこともできます。

HTML Canvas に基づいて「指紋認識」テクノロジーを実装します

原理

Canvas に基づいて特定のコンテンツを含む画像を描画し、canvas.toDataURL() メソッドを使用して画像コンテンツの Base64 エンコードされた文字列を返します。 PNG ファイル形式の場合、最後のチャンクは 32 ビットの CRC チェック コードであり、この CRC チェック コードを抽出することでユーザーを一意に識別できます。

テスト結果は、同じブラウザがこのドメインにアクセスするときに生成される CRC チェック コードが常に変更されていないことを示しています。これは、同じ HTML Canvas 要素の描画操作として単純に理解できますが、異なるオペレーティング システムや異なるブラウザでは、生成される画像コンテンツは実際にはまったく同じではありません。この状況にはいくつかの理由が考えられます:

1. 画像形式に関しては、Web ブラウザごとに異なるグラフィックス処理エンジン、異なる画像エクスポート オプション、異なるデフォルトの圧縮レベルなどが使用されます。
2. ピクセル レベルでは、各オペレーティング システムはアンチエイリアシングとサブピクセル レンダリング操作に異なる設定とアルゴリズムを使用します。
3. 同じ描画操作であっても、最終的に生成される画像データはハッシュレベルで異なります。

実装

function bin2hex(s) {  //  discuss at: http://phpjs.org/functions/bin2hex/  // original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)  // bugfixed by: Onno Marsman  // bugfixed by: Linuxworld  // improved by: ntoniazzi (http://phpjs.org/functions/bin2hex:361#comment_177616)  //   example 1: bin2hex('Kev');  //   returns 1: '4b6576'  //   example 2: bin2hex(String.fromCharCode(0x00));  //   returns 2: '00'  var i, l, o = '',    n;  s += '';  for (i = 0, l = s.length; i < l; i++) {    n = s.charCodeAt(i)      .toString(16);    o += n.length < 2 ? '0' + n : n;  }  return o;}function getUUID(domain) {    var canvas = document.createElement('canvas');    var ctx = canvas.getContext("2d");    var txt = domain;    ctx.textBaseline = "top";    ctx.font = "14px 'Arial'";    ctx.textBaseline = "tencent";    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);    var b64 = canvas.toDataURL().replace("data:image/png;base64,","");    var bin = atob(b64);    var crc = bin2hex(bin.slice(-16,-12));    return crc;}console.log(getUUID("http://m.vip.com/"));

利点

HTML Canvas に基づいて生成される UUID は、ユーザー追跡技術に有効に利用できます。 現在のところ、有効な対策はありません。

続きを読む

1. クライアントサイド:HTML5 Canvas Fingerprinting
2. Cookie に代わる Web サイト追跡技術:「Canvas Fingerprinting」に関する予備研究
3. JavaScript bin2hex 関数
4. 既存の IOS デバイス固有識別子ソリューションの比較
5. あるのかは一意の Android デバイス ID ですか?