お久しぶりです
nend担当@tosh01です。
まだまだ暑さも残っていますが、ようやく長かった夏も終わりを迎え、過ごしやすくなってきた今日この頃ですが、いかがお過ごしでしょうか？
さて、日々変化の激しいWEB業界ですが、7月の終わり頃からでしょうか、やたらCanvas fingerprintingというユーザートラッキング手法に関する記事を目にする機会が多かったのですが、ご記憶にありますでしょうか？
Cookieに替わるユーザー追跡技術で、世界中で利用が広がりつつあるとありましたので、広告の世界においては、トラッキングIDの持続性やプライバシーポリシー等の観点からまだまだリスクのある技術のようですが、個人的にも興味をもち調べておりました。
それはHTML5のCanvasを軸とした技術であり、この場においてなかなか書き手のいないHTML関連の記事を書きたいと思っていた手前、今回のテーマとして軽くこのトラッキング手法に関し触れつつ、HTML5に新たに追加されたCanvas要素について見ていけたらと思います。
Canvas fingerprinting
Canvas fingerprintingですが、手短には、HTML5のCanvas要素を利用し各端末のブラウザに画像データを描かせ、そのデータをハッシュ化することにより、IDを生成する技術とのことです。
同じテキストをレンダリングするため、同端末の同ブラウザでは等しいIDが取得できるようですが、端末のOS、グラフィックカード、グラフィックドライバ、フォントライブラリーやブラウザなどにより生成される画像に違いが生まれるため、固有のトラッキングデータとして取得し利用できるとあります。ただし、モバイル端末では現状フォントやプラグイン等が等しく、うまく動作しないとのことです。
処理を追ってみると具体的には下記のような手順を経ているようです。
1.ページの表示時、JavaScriptにより、指定したフォント、バックグラウンドカラー、サイズ等にて、テキストを描きます。
2.次に、Canvas APIのToDataURLメソッドにて、DataURL形式の画像データへとテキストを変換します。
3.最後に、得られた画像データをブラウザのユーザーエージェント、フォントリストなどのデータとともにハッシュ化し、得られた固有のデータを取得するといった流れになります。
さらに詳しい仕組みを知りたい方は以下のfingerprinting.jsのスクリプトとともに、リファレンスを参考にしてください。
HTML5 Canvas
さて、上記に突然記載させていただいたCanvas APIのToDataURLメソッドですが、そもそもHTML5より追加された要素であるCanvasとは、どのようなものなのでしょうか？
個人的にはJavaScriptにてCanvas要素内に描画ができる。といった程度の知識しかないため、今回のメインテーマとして、実際の使用例を今回追ってみたいと思います。
例によって、wikipediaによると、
Canvas要素とは、HTML5の一部で動的な2次元ビットマップ画像の描画のためのHTML要素。 2次元ベクター画像はSVGで、3次元画像はWebGL。
とありますが、その利用法にはJavaScriptを使用することにより、その領域内にAPIを通し、変形、合成、色とスタイル、ラインキャップと接合、影、パス、文字列、ピクセル操作、画像への変換など操作を扱い、HTMLベースのグラフィックデザインの幅が広がるのみならず、ゲームやアニメーション等の動的なコンテンツやを実現できるとのことです。
以下のようなelementをHTMLページに用いることにより、Canvas要素を作成し、JavaScriptを使って内部に描画します。
[html] <canvas id="example" width="100" height="100"></canvas> [/html]
具体例に関しましては、先ほど紹介させていただいたCanvas fingerprintingの処理を行えるコードがGithubで公開されているようですので、そちらのfingerprinting.jsの処理とともに見ていきます。
https://github.com/Valve/fingerprintjs
fingerprinting.js
上で述べたCanvas fingerprintingの処理をfingerprinting.jsから再確認するとともに、Canvas APIの使用例を下記に記します。
実際には上記Githubサイト内にあるindex.htmlファイルの方でfingerprintオブジェクトがインスタンス化され、トラッキングIDを取得するgetメソッドが記述されていますが、その中で実際のCanvas APIの処理がgetCanvasFingerprintメソッドの処理として以下のように書かれています。
[javascript] getCanvasFingerprint: function () { var canvas = document.createElement('canvas'); // 呼び出し元documentオブジェクトにCanvas要素作成 var ctx = canvas.getContext('2d'); // getCotextメソッドから2Dコンテキストを指定し、ctxに格納。 // 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(); // Canvasのイメージに対するdata:URLをデフォルトではimage/pngにて返します。 } [/javascript]
そして、上記で得られた画像データが、場合によっては他の端末固有情報とともにハッシュ化され、トラッキングIDとして利用することができます。
上記コードがCanvas APIにて固有データを作る流れになりますが、なんとなくイメージがつかめましたでしょうか。
Canvas APIはFlashなどのプラグインを使わず、様々な画像処理を伴うインタラクティブなコンテンツを手軽に作成できる技術ですが、Cookieのように上記のようなトラッキングに使用することもでき、回避するためにはJavaScriptを無効にするなど、有用な対応策もまだ発展途上のようですので、このような技術に対し、どう対応していくのか業界の動向が気になるところです。
リファレンス
Canvas Fingerprintingはクッキーより怖いのか技術的に調べてみた Cookie以上のユーザートラッキング技術Canvas Fingerprintingを使ってみた Pixel Perfect: Fingerprinting Canvas in HTML5 Canvas fingerprinting is tracking you, and you don’t even know what it is Canvas fingerprinting: Why ad tech’s latest shiny object is pure trouble fingerprintjs - GitHub Canvas Fingerprinting: Web Tracking just Turned More Stubborn Canvas HTML5タグリファレンスCanvas DataURLとCanvasとドメイン インラインで画像をHTMLに埋め込むData URLスキーム URLとURIは何が違うの？ どちらが正しい呼び方？
