生成AI↔APIをシンプルにつなぐサービスをつくった!(セキュリティで怖かった話あり)

こんにちは!
九保すこひです(フリーランスのITコンサルタント、エンジニア)

さてさて、前回の【Claude Code】「卵かけご飯の日帰り旅行中」に個人開発したら、どうなるかやってみた!では、EVの充電中に新サービス開発してみました。

そして、コツコツ自由時間をつかって開発をすすめた結果・・・・・・

Tiny MCP」というサービスを公開しました🎉

※ベータ版です。エラーがあったら教えてください!

サービス内容は、生成AIが、各種APIにアクセスできるようになるというもの。

つまり、

「チャッピー!Console dot Logから仕事効率化記事を出しとくれ👍」

って頼めば、自動でAPIからデータ取得して、いい具合に回答してくれるわけです。

つまり、Tiny MCPは「生成AI→MCP→[ここ]→API」という具合に、MCPとAPIを中継する役割をします。

…ということで、今回は新サービスをClaude Codeメインで開発した結果、どうだったかをまとめました。

以下のような方、ぜひ最後までご覧ください!

  • 「MCP使いたいけど、実装むずいよね😫」
  • 「ClaudeIと独自データ連携させてぇ(簡単に)😁」
  • 「すでに持ってるAPIとChatGPTを連携できんの❓」
  • 「Claude Codeで開発したら、どうだった?気になるわ🤔」
  • 「エージェントコーディングって、セキュリティやべーだろ😅」

「熱射病対策に、クーリッシュを
帽子の中にいれてます。バニラね」

なぜTiny MCPをつくったの?

この前の記事、【Claude Code】MCP ⇒ Google AnalyticsつかってAIコンサルしてもらったら感動した話 でも書きましたが、最近、AIをプログラムだけでなく、

  • デザイン
  • マーケティング
  • 新アイデアの壁打ち

など多くの場面も活用していて、その影響で個人サイト「街角コレクション」もMCPに対応させました(詳しくはこちら

で、管理者の専用MCPをつくって、エラーを起こしたデータを引っ張ってきて原因をつきとめたりしてるんです。

結果、めちゃくちゃサイト運営が便利になったので「あ。ブログも生成AIと連携したい!

って思いました。

ちなみに、WordPressにはMCP対応プラグインがあるようなのですが、

とにかくシンプルにAIとAPIを連携したかった

んです。

そこで思いついたのがTiny MCP

1つのAPIごとに登録できますし、APIキーとかも設定できます。
また、認証がついているので安心してつかえますよ👍

ちなみに、以下はZennのAPIと連携して回答してもらった例です。

いちいちAIの画面から移動しなくていいのも、おすすめポイントですよ。

Claude Codeをつかって開発した実感は?

個人開発(責任は私だけにかかってくる)だったので、Claude Codeメインで開発してみました。結果として、感想は大きく2つ。

1:ポジティブな感想

  • デザイン、めちゃ助かる!
  • (Laravelが用意してくれた)既存ページ改造は任せてOK!
  • 利用規約とかプライバシーポリシーの作成も丸投げでOK!
  • ユニットテストとかマジ楽!

前回記事で書いた「Pinterestをつかったデザイン・テクニック」はとても便利。もちろんそのままでは使えませんが、デザインの4大原則を知っていれば、簡単に修正できます。

なので、専門ではない分野と難しくはないけど時間がかかる作業、これはClaude Codeにも任せていいのかなという印象でした。

2:ネガティブな感想

  • バリデーションは、じっくり検証しないと駄目
  • 車輪の再発明をしようとする
  • セキュリティ、ちょっとやばかった😨

バリデーションは、影響が大きいので手放しにはできません(いい感じにはなってました)。車輪の再発明もグローバルにCLAUDE.md化すればある程度対応してくると思います。

が!

問題はセキュリティでした…。

今回は登録してもらったURLにアクセスします。その場合、SSRF(サーバー・サイド・リクエスト・フォージェリー)という攻撃の対処をしないといけません。ここがごっそり抜けていました😫(ので、あとでつくりました)

SSRF(サーバー・サイド・リクエスト・フォージェリー)の話は怖い!

今回の場合だとTiny MCPから「ユーザーが登録したURL」にアクセスするわけですが、たとえば「http://127.0.0.1」が登録されると、どうなるでしょう。

そうです!

サーバーの中(ローカルホスト)へのアクセスになるわけです。

そして、最悪の場合、認証情報を盗み見たり、侵入したサーバーを入口にしてネットワーク侵入できるわけです(怖い…💦)

しかも、http://127.0.0.1というURLは偽装することもできます。たとえば、http://2130706433にアクセスしてみてください(←危険はないです)

どうでしょう。
URLが「127.0.0.1に変換されて表示されていませんか?

つまり、表記が違うだけでローカルホストのことなんですね。

なので、この辺もちゃんとブロックしておかないと大変なことになるわけです。

※レンタルサーバーはこういうの、対処してくれてるんでしょうか🤔

しかも、攻撃する人はDNSの中身を時間差で変更したりするらしく、恐ろしい限りです(天才ハッカーに勝ち目はないです…)

そして、今はAI時代なので、こういうセキュリティの危機が高まっているのは忘れてはいけませんね(セキュリティ、もっと勉強しなきゃ駄目だな)

※OpenAIのHugging Faceハッキングや、サンドイッチ事件、恐怖ですよね。

おまけ:利用規約、プライバシーポリシー作成のプロンプト公開します!

利用規約とプライバシーポリシーの雛形は、いつもWebサイトの利用規約さんを使わせてもらってます。そのままAIに頼んでもいいかもしれませんが、こうやって公開されているものを改造する方がクオリティが高いと考えてのことです。

プロンプトは以下のとおり(エージェントタイプです)

【目的】
利用規約とプライバシーポリシーのページをつくる

【手順】
以下のURLをつかって(コピペ&必要な項目を置き換えて)ください。

・https://kiyaku.jp/hinagata/gp.html
・https://kiyaku.jp/hinagata/privacy.html

【条件】
・個人運営なので「当社」という表現は「当サービス」に置き換えること。
・ページ内にメールアドレスは表示せず、以下のページへリンクするようにしてください。
https://contact-me.capilano-fw.com/
・これらのページへのリンクを
 1. パソコンのとき:トップページの右上にfixedで横並びに表示
 2. スマホのときはハンバーガーボタンのメニューの中へ配置する

終わったらPRを出してください

簡単ですね!

おわりに

ということで、今回は(ほぼ)新サービスの告知記事でした(笑)

Tiny MCPは、たとえば以下のような活用ができます。

  • 天気APIと連携して、服装のアドバイスをしてもらう
  • 最新ニュースから注目してる内容でキュレーションし、株式投資に役立てる
  • Analyticsと自分のブログを連携して、人気記事の傾向を調べる
  • スケジュールタスクにしておいて、推しグッズの在庫チェック
  • 新着求人サイトをチェックして自分にあったものを探す

などなど。

もしかしたら、直接ClaudeとかにAPI登録できるようになるかもしれませんが、それまではTiny MCPをつかってみてください。

ではでは〜❗

「たまーに、どうしても
柿の葉寿司が食べたくなること、
ありませんか??」

このエントリーをはてなブックマークに追加       follow us in feedly  
お問い合わせ、お待ちしております。
開発のご依頼はこちら: お問い合わせ
どうぞよろしくお願いいたします! by 九保すこひ