Vibe Coding を活用したセキュリティツール開発入門

Vibe Codingでセキュリティ系 ミニツールを作ってみよう TOKUSHIMA Cyber Security Meetup 湯浅 潤樹 © Junki Yuasa

自己紹介 湯浅 潤樹（Junki Yuasa） • サイボウズ株式会社 セキュリティエンジニア • セキュリティツールを作るのが好きです • Threat Thinker、logira • 最近は徳島を題材にしたゲームも作っています • すだちころがし • 徳島県に住んでいます X: @melonattacker 2

• https://github.com/melonattacker/threat-thinker
• https://github.com/melonattacker/logira
• https://note.com/melonattacker/n/nb69ebb598551

今日のゴール 「ツールって作れるんだ」と感じて帰っていただくこと • 小さなセキュリティツールを作ってみる • 作る、動かす、直すを一通りやってみる • AIにどう頼めば進んでいくかを体感で覚える • 完成しなくてもOK、何か1つでも動けば大成功 Vibe Codingでセキュリティ系ミニツールを作ってみよう 3

自己紹介タイム 30秒~1分程度で簡単に自己紹介をお願いします！ • 名前・ニックネーム • 出身地・どこから来たか • 普段やっていること • プログラミングやAIツールの利用経験 • 今日の意気込み Vibe Codingでセキュリティ系ミニツールを作ってみよう 4

今日の流れ • 14:30~15:10 : 導入・デモ • 15:10~16:00 : 制作1 • 16:00~16:15 : 中間共有 • 16:15~17:10 : 制作2 • 17:10~17:35 : 発表 • 17:35~17:45 : まとめ 水分補給・お手洗い・休憩はご自由にどうぞ 5

今日は2つのルートがあります プログラミング 未経験者ルート プログラミング 経験者ルート ChatGPT+単一 HTML+ブラウザで 動くものを作る Claude Code / CodexなどでCLIや 複数ファイルの ツールにも挑戦 未経験者 経験者 全員 Vibe Codingでセキュリティ系ミニツールを作ってみよう 6

全員 Vibe Codingとは ざっくり言うと、AIと会話しながら作ること • 完璧な仕様書より、まず作りたいものを言葉にする • AIに案を出してもらい、手元で動かしてみる • 作る、動かす、直すのループを何周も回す • 雑に言うとノリで作る、ただし安全には気を付ける Vibe Codingでセキュリティ系ミニツールを作ってみよう 7

Vibe Codingの良さ 全員 コードが書けなくても作りたいものさえあれば作れる！ ベビーブランドを作っている実業家の方がVibe Codingでアプリを作る動画 https://www.youtube.com/watch?v=HzbsIW4PNw4 Vibe Codingでセキュリティ系ミニツールを作ってみよう 8

• https://www.youtube.com/watch?v=HzbsIW4PNw4

セキュリティの世界にはどんな困りごとがある？ 全員 怪しいものを見分けたい メール、URL、ログ、設 定ファイル、添付ファイ ルなど 大量の情報を整理したい アクセスログ、脆弱性情 報、チェックリスト、調 査メモなど うっかりを防ぎたい 個人情報、APIキー、社 外秘情報、危険な設定 など 安全に自動化したい AIエージェント、スクリ プト、依存関係、実行環 境など Vibe Codingでセキュリティ系ミニツールを作ってみよう 9

全員 困りごとからツールを考える 困りごとを解決するには何が必要か？という観点で考える 困りごと 作れるツール メールやURLが怪しい フィッシング判定 / URLチェック ログが多すぎる アクセスログ集計 機密情報を貼りたくない 機密情報を隠す 設定ミスが不安 設定ファイルのチェック Vibe Codingでセキュリティ系ミニツールを作ってみよう 10

セキュリティ系ミニツールを作ろう 全員 身近な困りごとを少しだけ楽にするツール • 本格的な製品ではなくてOK • 自分が少し使えそうなものでOK • クオリティが高くなくても、考えるきっかけになればOK • 今日は「とりあえず動く」状態にすることを目指す Vibe Codingでセキュリティ系ミニツールを作ってみよう 11

全員 題材例 題材に迷ったときはこの辺りから選ぶ パスワード強度チェッカー 個人情報マスキングツール 入力したパスワードの強度を判定 電話番号やクレカ番号を伏せる 怪しいメール判定ツール アクセスログ集計ツール フィッシングメールかどうか判定 ステータスコードやIPを集計 怪しいURL判定ツール Dockerfileチェックツール 短縮URLや怪しい単語をチェック よくある危ない書き方を検出 Vibe Codingでセキュリティ系ミニツールを作ってみよう 12

Vibe Codingの基本サイクル 全員 1. 作りたいものを言葉で表現 2. 最小版を作る 3. 動かして確認する 4. 改善点を1つ選ぶ 5. AIに頼んで直す、動かす 6. 4に戻る Vibe Codingでセキュリティ系ミニツールを作ってみよう 13

全員 頼み方で結果が変わる 惜しい頼み方 進めやすい頼み方 URLチェックツール作って HTML/CSS/JavaScriptだ けで、1ファイルで動く怪し いURL判定ツールを作って ください。まずはURL入力 欄、チェックボタン、結果 表示だけでOKです。 指示が具体的かつ明確だと方向性がずれにくい Vibe Codingでセキュリティ系ミニツールを作ってみよう 14

デモ: パスワード強度判定ツール 全員 HTML1ファイルでも小さいツールは作ることができる Vibe Codingでセキュリティ系ミニツールを作ってみよう 15

まずは完成系ではなく、動く最小版を作る 全員 HTML/CSS/JavaScriptだけで、 1ファイルで動くパスワード強度チェッカーを作ってください。 まずはパスワードの入力欄と文字数表示を用意してください。 16文字以上ならOK、16文字未満なら「短すぎます」と表示して。 初心者向けに、ファイルの保存方法とブラウザで開く方法も教えてく ださい。 Vibe Codingでセキュリティ系ミニツールを作ってみよう 16

最小版から徐々に機能を加える 全員 次の条件もチェックするようにしてください。 - 英大文字が含まれている - 英小文字が含まれている - 数字が含まれている - 記号が含まれている それぞれの条件を満たしているかを、チェックリスト形式で画面に表 示してください。 Vibe Codingでセキュリティ系ミニツールを作ってみよう 17

全員 次に改善するなら？ 判定を分かりやすくする 使いやすくする 弱い・普通・強い、色表 示、注意メッセージ パスワード表示・非表示、 説明文追加 見た目を整える セキュリティを強化 中央配置、カードUI、 スマホ対応 漏えい済みパスワードを 警告 Vibe Codingでセキュリティ系ミニツールを作ってみよう 18

判定を分かりやすくするための指示の例 全員 パスワード強度を「弱い・普通・強い」の3段階で表示してください。 判定には、文字数・英大文字・英小文字・数字・記号の有無を使って ください。 また、強度に応じて表示色を変えてください。 弱い: 赤、普通: オレンジ、強い: 緑 初心者にも分かるように、変更点を説明してください。 Vibe Codingでセキュリティ系ミニツールを作ってみよう 19

未経験者 単一HTMLで始める理由 ChatGPTでブラウザで動く単一のHTMLファイルで作る • • • • • 開発環境を構築しなくていい ブラウザで開くだけで動かせる 失敗しても改善しやすい 「作る→動かす→直す」のサイクルを回しやすい 外部ライブラリをなるべく使わず、シンプルに作れる Vibe Codingでセキュリティ系ミニツールを作ってみよう 20

まずはここまで作ってみよう 未経験者 完成度よりも動くことを優先する • • • • 入力欄がある ボタンがある 結果が画面に表示される サンプルを1つ入れて動作確認できる Vibe Codingでセキュリティ系ミニツールを作ってみよう 21

Claude Code / Codex で作る場合 経験者 • 最初から実装させず、まず計画を出してもらう（/plan） • 機能を分割して、機能単位で小さく改善していく • コードを見て変更範囲を確認してからコミットするのがおすすめ • 入力例と期待する出力を用意して、動作確認しながら進める • 依存関係を増やしすぎない、バージョンを固定する Vibe Codingでセキュリティ系ミニツールを作ってみよう 22

経験者 /plan させるプロンプト例 アクセスログを読み込んで、ステータスごとの件数と怪しいアクセス 候補を表示するCLIツールを作りたいです。 まずは実装せずに、要件を分解して実装計画を出してください。 外部依存はなるべく増やさず、最小構成で始めたいです。 その後、ステップごとに実装していきます。 Vibe Codingでセキュリティ系ミニツールを作ってみよう 23

経験者 安全にVibe Codingするには • 危険な操作を承認しない • サンドボックス機能を使う • 依存関係を増やしすぎない • 3rd party製のSkillやMCPサーバを安易に入れない • AIコーディングツールの設定をセキュアに https://note.com/okdt/n/n655c4ee10e89 https://blog.flatt.tech/entry/vibe_coding_security_risk Vibe Codingでセキュリティ系ミニツールを作ってみよう 24

• https://note.com/okdt/n/n655c4ee10e89
• https://blog.flatt.tech/entry/vibe_coding_security_risk

Vibe Codingの成果物を安全にするには 経験者 まずは代表的な脆弱性の発生原理と対策方法を理解 https://amzn.asia/d/021dKPMw Vibe Codingでセキュリティ系ミニツールを作ってみよう 25

• https://amzn.asia/d/021dKPMw

全員 制作時間の進め方 • セキュリティ関連の題材以外でもOK • 完成度よりも「動かして確認する」ことを大事にする • • • • 個人情報、パスワード、APIキーなどの機密情報はAIに渡さない わからないことがあれば講師や周りの人に聞く 水分補給・お手洗い・休憩は自由にどうぞ いろんな方々が集まっているのでワイワイやっていきましょう Happy Building! Vibe Codingでセキュリティ系ミニツールを作ってみよう 26

全員 中間共有で話すこと 1~2分程度で簡単に現状の共有をお願いします！ • 何を作っていますか？ • いま動いているところは？ • 詰まっているところは？ • 次に足したい機能は？ 途中で全然OK、うまくいかなかった話も歓迎です Vibe Codingでセキュリティ系ミニツールを作ってみよう 27

最後の発表で話すこと 全員 2~3分程度で取り組んだことについて教えてください！ • 作ったもの • 工夫したところ • AIにどう指示を出したか • うまくいかなかったところ • 次に改善したいところ • 今日の感想なんでも Vibe Codingでセキュリティ系ミニツールを作ってみよう 28

まとめ セキュリティツールは専門家だけが作るものではない • 身近な困りごとを解決するために自作ツールが役立つ • AIと一緒に最小版を作って、少しずつ改善していくことが大事 • Vibe Coding は便利ではあるが、安全に行う気持ちを持つ Vibe Codingでセキュリティ系ミニツールを作ってみよう 29