ChatGPTやClaudeなどのAI機能をサービスに付けるには、APIキーという必要があります。一種の認証鍵なのですが、これが必要なAI機能を使うことができます。バイブコーディングでこの機能を付けるとき、通常どうすれば、AIが「ここにAPIキーを入れてください」と知らせる場所にただボクテプします。動作もよくなります。ところで、この状態で配布すれば絶対にできません。

ブラウザ開発者ツールでAPIキーが公開される画面

デプロイされたサービスでブラウザ開発者ツールを開くと、コード内に置いたAPIキーがそのまま見えるからです。文字通り、誰でも見ることができます。

問題は、このキーをインポートすると、料金は私のアカウントから出るということです。実際には、展開直後数分で鍵がかかり、数十万ウォンが請求されたケースもよく見られます。

たとえそうです。金庫パスワードをメモ紙に書いて金庫の横に貼り付けたんです。金庫はロックされていますが、パスワードが隣にあるので意味がないのです。

今確認する方法

ブラウザでマイサービスに接続したら、キーボードでF12を押します。 Macの場合、 Command + Option + Iです。開発者ツールが開いたら、上部タブで[Sources]または[Network]をクリックし、検索ボックスにsk-またはAPI_KEYと入力します。何かが出たら露出されたのです。

AIにこのようにしてみてください。

現在のコードにAPIキーが直接入力されていますが、これを環境変数に分割してください。 APIキーがブラウザに表示されないように、サーバー側でのみ使用するように変更してください。 .envファイルを作成し、.gitignoreに追加して外部に公開しないようにしてください。

またはより簡単に、

APIキーはハードコードされてはいけません。

とも言えます。ハードコーディングとは、「コードの中に値を直接入れる」ことを意味します。機密情報が漏洩してはいけないので、これを事前に防ぐよう要請するのです。

Tip 3. エラーメッセージが地図を表示する — エラー情報の公開

サービスを使ってみると、時々エラーが出ることもあります。この時、画面に何が浮かんでいるのか確認したことがありますか？

開発中はエラーが詳細に浮かぶのが楽です。どこで問題が生じたのかがすぐに見えます。ただし、配布後もこの設定がそのままであれば、その詳細なエラー内容がユーザー画面にもそのまま表示されます。

展開環境で詳細エラーメッセージが表示される画面

そこにはデータベース名、ファイルパス、サーバー構造などの情報が含まれています。攻撃者の立場ではこれが指導と変わりません。どこを攻略すればいいのかヒントを得るのです。

たとえそうです。店で問題が生じたとき、スタッフがお客様に「今3階倉庫の2番目の棚にある金庫のパスワードが間違っています」と説明するんです。親切なようですが、なくてもいい情報を渡すのです。

今確認する方法

サービスで意図的にエラーを出してください。存在しないページアドレスに入るか、ログイン時に間違った情報を入力してください。画面上に浮かぶエラーメッセージが一行のガイドフレーズではなく、長くて複雑なテキストであれば、設定が必要です。

AIにこのようにしてみてください。

展開環境では、エラーが発生してもユーザー画面に詳細なエラー内容が見えないようにしてください。ユーザーには「問題が発生しました」などの簡単な案内だけを示し、詳細なエラー内容はサーバーログにのみ記録されるように設定してください。

3つすべて難しい概念ではありません。 AIが基本的にしない設定です。させなかったから。

サービスが小さいときはあまりないように見えても、ユーザーが増えるほどこれらの穴は大きくなります。個人情報が漏洩したり料金爆弾を当てるとリンゴ門一つで収拾されないことがあります。

上記の3つのプロンプトは、バイブコーディングに直接使用しても無防備なプロンプトです。ぜひお試しください:)

次のセッションでは、顧客のデータを扱う場合に知っておく必要がある、データセキュリティの基本について説明します。

チームジェイカーブは、非開発者のためのAI活用教育専門機関です。企業役員対象AIリテラシー教育と実務適用ワークショップを運営しています。

「AI Native百科事典」を購読する

サイトを購読すると、新しい投稿などの最新のアップデートを通知やメールで最初に受け取ることができます。
Slashpageに参加して「AI Native百科事典」を購読してください！

Open channel