3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

FastAPI+HTMXでウェブアプリを作りアクセス者情報を取得してみた

Last updated at Posted at 2025-12-21

はじめに

これまで、ウェブサイトアクセス時にどんな情報が取得されているのか分からず、個人情報の流出に怯えながら過ごしていました。たとえば家で撮った料理の画像をアップロードすると家の住所が特定される?など不安に感じていました。そこで、簡単なウェブアプリを作ってどういった個人情報がアプリ側から取得できるのか確認してみました。
作成したアプリはこちらで、ウェブサイトへのアクセス情報やアップロードされた写真の解析は一時的なもので、個人情報の収集は一切行なっていないので、興味ある方はアクセスしてみてください。アプリ起動の都合で1分くらいお待ちいただくかもしれませんが、ご容赦ください。

画面イメージ
image.png

アプリ

image.png

やりたいこと

ウェブサイトにアクセスし、画像投稿するというシチュエーションを想定し、取得できた情報を表示するアプリを作成する。そして、何が安全で危険かを理解する。

仕様

  • リクエスト情報の表示: アクセス時に取得できるHTTPリクエスト情報を表示
  • 画像アップロード: 画像をアップロードしてプレビュー表示
  • EXIF情報の解析: 画像に含まれるEXIF情報(撮影日時、カメラ情報など)をすべて表示
  • 撮影位置の地図表示: EXIF情報に位置情報が含まれている場合は地図上にマッピング

開発

最近話題だった記事に興味深いものがあったため、こちらの技術スタック参考にさせていただきました。

下記技術スタックを用いて画像投稿ウェブアプリを作成します。区分けは適当ですがこんな感じです……。

役割 技術
バックエンド FastAPI
フロントエンド HTMX
スタイリング Tailwind CSS
デプロイ先 Render

Pythonを用いてある程度見た目にこだわった開発をする際には、Reactなどを用いてフロントエンド開発する必要が出ますが、簡単なアプリを作るためにそこまでするの面倒だなと思っていた僕にはHTMXの思想は非常にフィットしました。結局全て生成AIに書かせているんだから関係ないだろ

コードはClaude Opus 4.5に書かせました。Renderも初めて使いましたが操作が非常に簡単で驚きました。
開発開始からデプロイまで、全部合わせて30分くらいだと思います。

アプリ

コード

検証

今回作成したウェブアプリを利用し、どれだけの情報を取得できるのか検証してみました。
まず僕はスマホで撮った写真をアップロードしましたが、どれだけ試しても住所付きの画像をアップロードすることはできませんでした。
実はスマホのブラウザはアップロード時に画像のEXIF情報をざっくり除去しているようで、逆に僕の住所情報をアップロードしようにも苦労してしまいました(?)
追加検証していくと、スマホで撮った画像からEXIF情報を消さずに投稿するには下記のような方法を取る必要がありました。※挙動はブラウザに依存する可能性はあります

  1. スマホからPCにEXIF情報を保持したまま転送(AirDrop、Quick Share、メール添付など)
  2. PCのブラウザから画像をアップロード

実はスマホブラウザはEXIF情報を勝手に削除するんですが、PCブラウザは消さないようです。意外な差異でした。

わかったこと

この検証により、意外と僕の個人情報って守られてるんだなとわかりました。
ただし、スマホネイティブアプリであれば住所などを取得することも可能なようなので、完全には安心できません。いずれ気が向いたらネイティブアプリも作って検証してみたいと思います。

おわりに

今回の検証で、これまでずっと怖がっていた個人情報取得周りの挙動について理解できました。当たり前かもしれませんが、案外ちゃんと個人情報は守られているものですね。
今日から安心して過ごせます。
EXIF情報を保ったままデータ転送する方法、実は危険な手法、その他諸々ご存じの方いればコメントいただけると嬉しいです。
最後までお読みいただきありがとうございました。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?