このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

ブラウザフィンガープリントは、Cookieの代用となるのか? JSライブラリ Fingerprintjs2など。

JavaScript

2019.02.03

どもです。

2019年始まって、1月もあっという間に終わってしまいましたね。

いやはや。早いですね。

さて、今回の話題なのですが、「ブラウザフィンガープリント」について。

2018年、何かと世界的に話題となったweb技術の1つとして挙げられるのが「Cookie」。

Cookie自体、最新技術なわけもなく、大分昔から存在する枯れた技術なのですが、なんで大きな話題になったかといいますと、

EU一般データ保護規則。 GDPR(General Data Protection Regulation)が、EUによって2018年5月25日に施行されたからです。

あまりに大きな出来事だったので、世界各地で話題になり、勿論web業界も慌ただしくなりフロントエンドな方々も色々と対応に追われたりしたりもあって、改めて書く必要もないと思いますが、おさらいとしてざっとその概要を述べますと。

 

内容

2018年5月25日からEUデータ保護指令(Directive 95/46/EC)からEU一般データ保護規則(GDPR)に変更。

  • 原則として各加盟国の個人データ保護法は廃止
  • 範囲の拡大
  • 個人データ保護の調和と統一性の強化
  • 企業に対して新たな説明責任を導入
  • 個人の権利を強化
  • 制裁と執行を強化

 

対象者

EU内のすべての個人(EU圏の在住者として仕事でき来ている人も対象)

また、EU在住者が海外にいる場合も対象

 

 

GDPRでの個人データ(Personal Data)の定義

  • 氏名
  • 識別番号
  • 所在地データ
  • メールアドレス
  • オンライン識別子(IPアドレス、クッキー)
  • クレジットカード情報
  • パスポート情報
  • 身体的、生理学的、遺伝子的、精神的、経済的、文化的、社会的固有性に関する要因

など。

 

つまり、2018年5月25日からEU一般データ保護規則施行され、個人情報の取扱が非常に厳しくなりました。

EU圏内の話だから関係ない」なんて思われるかもしれませんが、webサービスをインターネットで公開しているという事は、全世界で配信されていますので、IPでEU圏内に配信を制限するなどしていない限り対象となってきます。

これをきっかけに多くのwebサービスやwebサイトで、利用者の使用許諾内容の更新のメールや、個人情報取り扱いの規約変更などの変更が行われてきました。

なぜそういう対応に追われたかと言いますと、上記でもありますが、EUで定義している「個人データ」を取り扱う場合、ユーザーの同意を求める必要があり、また、取得したデータはEU圏外に持ち出し禁止になったからです。

また、取得したデータは、ユーザーからの参照・削除の要求があった場合、それに応じないといけなくなり、守らなければ罰金2000万ユーロもしくは全売上の4%の制裁金として課せられるようになりました。

個人データ」には、オンライン識別子(IPアドレス、クッキー)が含まれていまして、日常茶飯事的に利用していた「Cookie」も含まれていることから、多くのサイトで「Cookieの許諾の表示」を目にしたのもこれが原因となります。

つい先日にも、GoogleがGDPR違反で約62億円の罰金が課せられたと話題になったばかりです。

フランス規制当局がGoogleに約62億円の罰金。プライバシー情報に関する説明の不透明性などがGDPR違反

大企業だけでなく、中小企業も対象となり、「Cookie」利用に関しても、webサービス自体が利用している「Cookie」が対象が勿論のことですが、2019年に施行予定となっている「ePrivacy規則」では、オプトアウトでのCookie利用は禁止され、利用する際は必ずオプトインでのユーザーからの同意を取らないといけなくなります。これによって、広告(サービス)など、別ドメインで発行している、third-party Cookie(サードパーティクッキー)対象となってきます。

これら多くは、ユーザーの同意無しで発行しているのが大半で、「ePrivacy規則」が施行されれば全滅していくのではないかと言われるほど、非常に厳しい規約となっています。

そこで、最近再び話題になってきているのが「ブラウザフィンガープリント」となっています。

 

ブラウザフィンガープリント

という訳で「ブラウザフィンガープリント」って何なの?

といったところですが、Cookieでのユーザー特定が制限で厳しくなってくるなか、トラッキングするの事もできなくなってきている中、その代替技術として注目され始めている技術なのですが、残念な事にこれもGDPRの対象となるため、「GDPR回避の技術」とは行かないようです。

では、なんで使用されるの?

という疑問が生まれるわけですが、筆者が考えるには「Cookieよりもバレにくい」ではないでしょうかw

少しでも何とかしようと、時間稼ごうと四苦八苦している姿が良いですね。

実際にどういった技術かと言いますと、ブラウザからJavaScriptを利用して取得できるUAやPCのOSなど取得できるデータをマージしてハッシュ化した値でユーザーの特定を行う技術になっており、真新しい技術でもなく昔からあったようなのですが、長らく「実使用に耐えない技術」として扱われて来たようですが、最近ではブラウザから色んな情報も取得できるようになってきたことから状況も改善され注目され始めて来たようです。

有名なJSライブラリとして「Fingerprintjs2」があります。

Fingerprintjs2

http://valve.github.io/fingerprintjs2/

公式サイトを訪れると、ブラウザから取得されたデータからハッシュ値が発行されるが確認できるかと思います。

(一部伏せてます)

github

https://github.com/valve/fingerprintjs2

githubのスター数も7000を超えており、JavaScriptのブラウザフィンガープリントライブラリとしてはデファクトとなってきているのはないでしょうか?

Fingerprintjs2で取得できるデフォルト値
項目 概要

userAgent

ユーザーエージェント(ブラウザ名・ブラウザバージョンなど)
language ブラウザの使用言語
colorDepth 画面の色深度
deviceMemory 端末のメモリー
hardwareConcurrency 端末のCPUコア数
screenResolution ディスプレイの画面サイズ
availableScreenResolution ディスプレイの有効領域
timezoneOffset UTCからの現在のタイムゾーンのオフセット
timezone タイムゾーン
sessionStorage  セッションストレージの有無
localStorage ローカルストレージの有無
 indexedDb  KVSで保存できるIndexedDBの有無
 addBehavior  IE独自拡張機能 Behaviorの有効有無
 openDatabase  OpenDBの有無
 cpuClass  CPU情報
 platform  OSなど。ブラウザ起動のプラットフォーム
 plugins  webブラウザにインストールされているプラグインリスト
 canvas  Canvasの有無・フォント、画像処理を行った結果データ
webgl  WebGLの有無、WebGL経由で画像処理を行った結果データ
 webglVendorAndRenderer  WebGL経由で利用するドライバー
 adBlock  adsboxのクラス名のDOMを挿入時にエラー有無
hasLiedLanguages ブラウザ言語と第一設定言語との比較
 hasLiedResolution  screenResolutionとavailableScreenResolutionの値比較
 hasLiedOs  navigator.OSCPUのOSとUAからの取得データの一致確認
hasLiedBrowser navigator.productSubのブラウザ名とUAからの取得データの一致確認
 touchSupport タッチのサポート有無
fonts  フォントリスト
 audio 音声バッファのPCMデータ値

これらの値がデフォルトで取得でき、これらのデータからハッシュ値が発行されるため、ほぼほぼユニークで作成されるのではないかと言われております。

 

Cookieとブラウザフィンガープリントの比較

さて、では、Cookieの代替技術となるのか?

といったところですが、Cookieと比較すると以下のような感じとなります。

 

Cookie ブラウザフィンガープリント
サイト訪問者識別の一意性
ログイン処理(セッション利用)
サイトを超えたユーザー特定
Webブラウザを超えたユーザー特定
使用制約の厳しさ(クロスドメイン/アドブロック)
機種依存
Webブラウザでブロック
GDPR・ePrivacy対象

Cookieとブラウザフィンガープリントを比較してみると、向き不向きがあるのが確認できるかと思います。

どちらも一致しているのが「GDPR・ePrivacy対象」という事で、どちらも規約からは逃げられない状況となっております。w

ブラウザフィンガープリントは使用するブラウザによってもハッシュ値が異なってしまうのですが、「ブラウザのバージョン更新」などを行った際でも異なるハッシュ値となり、その他「出力ディスプレイの変更などによる画面サイズの更新」「ブラウザの設定の変更」などからでもハッシュ値が異なることから、サイト訪問者識別の一意性を保つのは、完全ではないことがわかります。

逆にサイト間のユーザー特定は、使用しているPC、ブラウザが同じの場合と特定しやすいのが特徴となります。

また、「Fingerprintjs2」で取得するデータの項目は減らす事も可能となっているのですが、項目も減らす度にユニークの精度は落ち、ハッシュ値の衝突の発生する可能性も大きくなってきます。

と言った、Cookieとの比較で分かる通り、完全に「Cookieの代用」とはならないのが分かるかと思います。

では、いつ利用するの?

ということなるのですが、やはり first-party Cookieとしての利用より、third-party Cookieの需要が高いのではないかと思うところではあります。

 

その他、Webブラウザよりもっと下のWebGLレイヤーからデータ取得するUnique Machineなどがあります。

Unique MachineではWebGLの処理におけるコンピュータごとの癖からフィンガープリントを生成するので、ブラウザごとにハッシュ値が変わる「Fingerprintjs2」と異なって、コンピュータごとのハッシュ値は変わらないのが特徴となっております。

ただ難点としては、WebGLの処理に時間がかかってしまうところです。

 

Unique Machine

http://uniquemachine.org/

 

 

github

https://github.com/Song-Li/cross_browser

 

と言った感じで、ユーザー特定には色んな事情があり、色んな技術がありと、楽しいこの頃ですね。

ではではぁ。

Comment

Related Article

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

2019.10.21

正規表現 先読み後読み 論理積

2019.07.28

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

2019.06.22

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

2019.03.24

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

ブラウザフィンガープリントは、Cookieの代用となるのか? JSライブラリ Fingerprintjs2など。

2019.02.03

Vue.jsでSPA、Vuex使用するなら Nuxt.jsが超絶便利な件。

2018.12.23

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

2018.09.26

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

CATEGORY LIST

LATEST NEWS

kindleストア7周年記念セール中!技術書なども40%OFF以上でお買い得!(11/7まで)

イベント

2019.10.28

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

JavaScript

2019.10.21

Arduino IDEとArduino接続して、サクッと設定。

電子工作

2019.08.15

ついに、M5Stack Gray 購入!! その他諸々、購入したボードの振り返りなど。

電子工作

2019.08.12

正規表現 先読み後読み 論理積

JavaScript

2019.07.28

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US