mascii のブログ

AI製ペライチアプリとセキュリティの話

#ai#javascript#security

「AI製ペライチアプリ」という呼び方で良いのかわかりませんが、Claude Fable 5 や GPT-5.6 などで、フロントエンドだけで完結するちょっとしたゲームやツールを作って公開するのが流行っていそうです。

ここ数日だと、@__syumaiさんが GPT-5.6 Terra で作成した Flappy syumai が話題を呼んでいます。

個人的には、オータニ@AI駆動開発さんが Claude Fable 5 で作成した塊魂ライクなゲーム Fable Katamari も面白いなと思いました。

最近作ったAI製ペライチアプリ

自分も「肩甲骨ぐるぐるカウンター」や「顔すりかえカメラ」といったAI製ペライチアプリを作って公開していたりします:

どちらも、インカメラの映像とMediaPipe(エッジ AI)を活用した、ちょっとしたフィットネスや遊びを楽しめる Web アプリです。

セキュリティについて思うこと

自分が作ったものを自分で使う分には心配ないのですが、他人が作ったアプリでカメラ権限が必要だったら嫌だよな… と思いました。カメラの映像が外部のサーバーに送信されたりしちゃいそうですよね。

自分のアプリについては、以下のような対策をしてカメラ映像が外部に送信されないことを保証しています:

  • Content Security Policy を設定する
    • アプリの配信元へのアクセスをページ読み込み時の GET /index.html のみに限定する
    • パブリック CDN (jsDelivr 等)は信用できる前提で、通信を許可する
  • vite-plugin-singlefile で、HTML/JS/CSS を単一の index.html にバンドルする
    • 配信元から取得できるのは index.html だけなので、すべてをバンドルしておく必要がある
$ curl -sD - -o /dev/null https://guruguru-counter.pages.dev/ | grep -i content-security-policy
content-security-policy: default-src 'none'; script-src 'unsafe-inline' 'wasm-unsafe-eval' https://cdn.jsdelivr.net; connect-src https://cdn.jsdelivr.net; style-src 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; img-src data:; form-action 'none'; frame-ancestors 'none'

ただ、こうした対策を講じても、一般ユーザーはもちろんエンジニアにも伝わりにくいと思います。

気軽に遊んでもらいたいなら Flappy syumai や Fable Katamari のように、カメラ・マイク・位置情報などの権限を要求しない遊びが良いかもしれません。とはいえ、カメラやマイクを使った面白いアプリもたくさん作れるはずなので、「このアプリは安全です」と利用者に伝わる仕組みが欲しいなと思います。