HTML/CSS/JavaScriptだけで、
ブラウザのJavaScriptがどういった情報を取得できるか可視化するアプリです。
プログラミングの入り口や、セキュリティを考えられる構成にしています。
デモ
ソース
モチベーション
最近良くフィンガープリントって聞くけど何だろう？
ブラウザから情報流出とか言うけどどういうことだろう？
ということで、実際ブラウザがJavaScriptで把握できる情報を可視化してみました。
概要
本アプリは、ブラウザで JavaScript を用いて取得可能な情報を
「どの API から取得されるか」
という観点で可視化する学習用ツールです。
通常の「情報一覧表示」ではなく、以下のようなプログラミング視点を重視しています。
- どのオブジェクトから取得しているか（location / document / navigator
など） - 自分のブラウザが何を表示するか
- 実際のコードはどう書くか
特徴
1. API単位での整理
- location（URL情報）
- document（HTML文書）
- navigator（ブラウザ・端末）
- screen / window（画面）
- Intl / Date（時刻・ロケール）
- performance（通信・描画時間）
- feature check（機能有無）
2. 「値・由来・コード例」の3点セット
各項目は以下の3つをセットで表示します。
- 値（現在の取得結果）
- 由来（どこから来た情報か）
- コード例（実際のJavaScript）
3. DevTools連携を意識
「DevToolsで同じコードを試す」ことを前提に設計
4. JSON出力機能
取得した情報をまとめてJSON表示
技術構成
- HTML
- CSS
- JavaScript
APサーバ不要（デモはGitHub Pages利用してます）
学習できる内容
- Web API構造理解
- ブラウザ情報の範囲
- フィンガープリント基礎
- パフォーマンス計測
想定用途
- Web開発学習
- セキュリティ理解
- DevTools補助教材
まとめ
- 「ブラウザは何を知っているか」
- 「どう取得しているか」
を学ぶための可視化ツールです。
追記 モバイル対応
20260415 スマホの見栄えを整えました。
PCで開発者ツール使う前提なのでスマホは良いやと思っていたのですが、余りにも画面はみ出しすぎだったので対処しました。
今回のモバイル対応では、主に以下を行いました。
-
@media (max-width: 980px)で 1 カラム化 -
@media (max-width: 640px)でスマホ向け微調整 - sticky解除
- 情報行の縦積み化
- ボタンの押しやすい再配置
- 長い文字列やコードの折り返し
- 横はみ出し防止
基本は実機確認を行いますが、今回は横着して確認せず、push後に気付いて修正という流れになってしまいました。
最低限開発者ツールのスマホ想定表示は試しておくべきですね。
