バイブコーディングサイト5分で掘る理由、非開発者必須常識
팀
팀제이커브
カテゴリー
Empty
AIに「こんなサービス作ってあげて」したら本当に作ってくれたんです。リンクもできましたし、実際にも動作します。
この気持ちは自分で経験した人だけ知っています。ところでそのリンク、今どんな状態なのか確認したことがありますか？
バイブコーディングで作ったサービスが5分で開けるのは、ハッキング技術が必要なわけではありません。ドアが開いているからです。そしてこれは特定の誰かの問題ではなく、バイブコーディングでサービスを配布したほとんどが持っている穴です。
これらの問題ごとにAIにそのまま貼り付けることができるプロンプトが含まれています。読んでからすぐに使えるものだけを選びました。
AIはさせただけです
本格的に入る前にこれからわかっていきます。
バイブコーディングでサービスを作成するとき、通常これをさせます。 「ログイン機能を作ってください」、「お支払いを貼ってください」、「ダッシュボードを作ってください」 AIはこれまでよくやってくれます。
さて、もしかしたら「セキュリティ設定も全部やってくれ」とさせたことありますか？おそらくないでしょう。これにより、AIは最小限のセキュリティのみを設定し、適切に作業をしてくれません。覚えておいたことがないからです。
バイブコーディングでサービスを配布した画面例
バイブコーディングサービスのセキュリティホールはコードを組み立てるのではなく、設定をしないことによって生じます。
逆に言えば、どんな設定をさせなければならないのか分かればいいという意味です。セキュリティもAIに簡単にさせることができます。
Tip 1. ドアが開いている — アクセス権
もしバイブコーディングでサイトを作ったことがありますか？それでは私のサービスアドレスの後に/Adminを見てください。
アドレスウィンドウにスラッシュアドミンを入力したときの管理者ページの表示例
もしここでログイン画面を経ずに管理者ページがただ開いたら、「ドアが開いている」のです。 /Main 、 /dashboardも同様です。ログインせずにアクセスできる場合はすべて同じ問題です。
なぜこのようなことが起こるのか、AIがログインページを作るとき、「ログインしていない人は他のページに入らないようにしてくれ」という言葉を聞いたことがないからです。ログインページは作成しましたが、後部ドアをロックしていません。
たとえそうです。お店の正門に南京錠はかかっていますが、裏口が開いているんです。お客様には正門に来るように言われましたが、後ろに戻ればただ入ることができる状態です。
今確認する方法
私のサービスアドレスの後ろに以下を一つずつ付けて接続してみてください。
•
/Admin
•
/Main
•
/Dashboard
•
/Users
ログインせずにページが表示された場合は、次のプロンプトをすぐに入力してください。
AIにこのようにしてみてください。
このサービスのすべてのページは、ログインしたユーザーだけがアクセスできる必要があります。ログインしていない状態でURLを直接入力すると、ログインページに自動的に戻るようにしてください。管理者ページは、一般ユーザーもアクセスできないように別々に権限を分離してください。
Tip 2. 鍵が外に出ている — API キーの公開
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百科事典」を購読してください！
Slashpageに参加して「AI Native百科事典」を購読してください！
