メインコンテンツまでスキップ

MonitorDog Web SDKリリース:ブラウザ環境でリアルタイム画面セキュリティ検知

|
約5分
MonitorDogチーム
AI搭載ビジュアルハッキング防止ソリューション
WebアプリケーションでもMonitorDogのリアルタイム検知機能を利用できます。

デスクトップエージェントのインストールが難しい環境でも、ブラウザとWebカメラを活用して画面周辺のセキュリティリスクを検知し、サービス画面にすぐ反映できます。

リリースの主な内容

MonitorDog Web SDKリリース

ブラウザでのリアルタイム検知: Webカメラ映像から顔とスマートフォンを検知し、結果をWebアプリケーションに渡します。
柔軟なインストール方式: npm packageとstatic zipを提供し、一般的なfrontendプロジェクトからJSP/WAR、静的HTML環境まで対応します。
ローカルAI推論: 暗号化されたONNXモデルとWebAssembly runtimeを使用し、ブラウザ上で検知を実行します。
安全なsession連携: 顧客サーバーのtoken brokerを通じて、Partner API Keyをブラウザに公開せずにSDK sessionを構成できます。

詳細

1. Webカメラベースのリアルタイムセキュリティ検知

Web SDKはブラウザのカメラ権限を利用してWebカメラ映像を分析し、顔とスマートフォンの検知結果をリアルタイムcallbackで提供します。顧客サービスはこの結果を利用して、警告表示、画面ブロック、独自のセキュリティUI処理などを実装できます。

MonitorDogのイベントポリシーと連携すると、次のような状況を記録して対応できます。

  • スマートフォンの検知
  • ユーザーが見えない状態
  • 複数の顔が検知された状態

2. npmおよびstatic zipインストール

Vite、Webpack、Rspack、Next.js client bundleなどの一般的なfrontendプロジェクトでは、npm packageからSDKをインストールできます。

npm install @monitordog/detector

npmやbundlerを使用しにくいJSP/WAR、静的HTML、script tag環境では、static zipを利用できます。アーカイブを展開し、monitordog/フォルダー全体を静的リソースパスに配置すると、UMD scriptと必要なruntime assetをまとめてロードできます。

3. ブラウザでのローカルAI推論

SDKは入力サイズ320416640向けの暗号化されたdetector ONNXモデルと、ONNX Runtime WebAssemblyファイルを提供します。デフォルトのauto設定は実行環境に適したモデルサイズを選択し、メモリが不足する環境ではより小さい入力サイズへ段階的に切り替えます。

暗号化モデルの実行に必要なキーのみをMonitorDog APIから取得するため、デプロイファイルに元のモデルを含めずにブラウザ検知を構成できます。

4. 安全なSDK session連携

Partner API Keyは顧客サーバーにのみ保管し、ブラウザは顧客サービスが実装したSDK session token brokerを呼び出します。これにより、Partner API KeyをJavaScript bundle、HTML、ブラウザストレージ、public環境変数に公開せずにSDKを認証できます。

MPAのページ遷移やリロード後は、既存の顧客ログインsessionを利用してSDK sessionを復元できます。実際のユーザーログインとページ復元を分けることで、不要なlogin eventの重複記録を防止します。

5. 明確なruntime lifecycle

SDKは初期化、ログイン、検知の開始・停止、ログアウト、リソース解放のためのlifecycle APIを提供します。SPAでは1つのdetector instanceを維持しながら必要な画面でのみ検知を実行でき、MPAではページごとにsessionを復元して利用できます。

インストール前の注意事項

  • Webカメラ検知には、ブラウザのカメラアクセス権限とHTTPS環境が必要です。
  • Partner API Keyは必ず顧客サーバーでのみ使用してください。
  • static zipを使用する場合は、UMD scriptだけをコピーせず、monitordog/フォルダー全体をデプロイしてください。
  • 今後の変更事項と改善内容は、別途アップデートノートで案内します。

MonitorDog Web SDKの連携を始めましょう

プロジェクト環境に適したnpmまたはstatic zipのインストール方法を確認できます。