🏗️ ソースコード構成ガイド: OWASP Juice Shop のアーキテクチャ解説

📁 プロジェクト構成概要

OWASP Juice Shop は フルスタック Web アプリケーションとして設計されており、以下の主要コンポーネントで構成されています。

🎯 アーキテクチャ概要

OWASP Juice Shop
├── 🎨 フロントエンド (Angular)
├── ⚙️ バックエンド (Node.js + Express)
├── 🗄️ データベース (SQLite + MongoDB)
└── 🔧 設定・データファイル

📂 主要ディレクトリ構成

🎨 フロントエンド (`frontend/`)

技術スタック: Angular 20.x + TypeScript
構成:
- src/app/Models/ - データモデル定義
- src/app/Services/ - API通信サービス
- src/app/ - Angularコンポーネント群

⚙️ バックエンド (`routes/`, `lib/`, `models/`)

🛣️ API ルート (`routes/`)

RESTful API エンドポイントの実装:

address.ts - 住所管理
basket.ts - ショッピングカート
chatbot.ts - チャットボット機能
currentUser.ts - ユーザー認証
feedback.ts - フィードバック機能
その他30以上のAPIエンドポイント

🗄️ データモデル (`models/`)

Sequelize ORM を使用したデータベースモデル:

user.ts - ユーザー情報
product.ts - 商品情報
basket.ts - ショッピングカート
challenge.ts - セキュリティチャレンジ
feedback.ts - フィードバック
その他15以上のモデル

🔧 ライブラリ (`lib/`)

共通機能とユーティリティ:

insecurity.ts - 意図的な脆弱性実装
challengeUtils.ts - チャレンジ管理
logger.ts - ログ機能
startup/ - アプリケーション初期化

📊 データ (`data/`)

static/challenges.yml - セキュリティチャレンジ定義
static/codefixes/ - コード修正例
datacreator.ts - 初期データ生成
mongodb.ts - MongoDB接続設定

🔍 技術的特徴

🎯 意図的な脆弱性の実装

lib/insecurity.ts - セキュリティ機能の意図的な弱体化
各ルートファイル内 - 具体的な脆弱性の実装
チャレンジベースの学習システム

🏗️ モジュラー設計

関心の分離: ルート、モデル、ライブラリの明確な分離
再利用可能性: 共通機能のライブラリ化
拡張性: 新しいチャレンジや機能の追加が容易

🔄 フルスタック統合

Angular フロントエンド ↔️ Express バックエンド
RESTful API による通信
リアルタイム機能（WebSocket）

🚀 開発者向けポイント

📝 新機能追加時の流れ

モデル定義 (models/) - データ構造
API実装 (routes/) - ビジネスロジック
フロントエンド (frontend/) - UI実装
チャレンジ追加 (data/static/challenges.yml)

🔧 設定ファイル

package.json - Node.js依存関係
frontend/package.json - Angular依存関係
config/ - アプリケーション設定

🧪 テスト・品質管理

TypeScript による型安全性
ESLint によるコード品質チェック
各サービスの単体テスト

💡 学習のための構成

このプロジェクトは教育目的に最適化されており：

🎯 実践的な脆弱性: 実際のWebアプリケーションで見られる問題
📚 段階的学習: 難易度別のチャレンジ
🔍 ソースコード公開: 脆弱性の実装方法を学習可能
🛠️ 修正例提供: セキュアなコードの書き方を学習

🔗 関連リソース

このイシューは、開発者がプロジェクトの構成を理解し、効率的に開発・学習を進めるためのリファレンスとして作成されました。