Storybook: Storybookのプレビュー機能におけるオリジン検証の不備により、悪意のあるウェブサイトからのコード注入が可能になる
**概要:** 影響を受けているStorybookの開発サーバーが稼働中に、悪意のあるウェブサイトが開発者のプロジェクト内のファイルへの不正な変更を引き起こす可能性があります。さらに特定の条件下では、変更されたファイルが開発者の権限を持つローカル環境で実行される可能性があります。現時点では、実際にこの脆弱性が悪用された事例は確認されていません。
## 影響を受けるユーザー
影響を受けるのは、該当するバージョンのStorybookの開発サーバーを実行しているユーザーです。
影響を受けないケース:
- ウェブブラウザで開くことのない開発サーバーを実行している場合（例：ヘッドレス自動化、MCPクライアント）
- 作成済みのStorybookのバージョンを実行または閲覧している場合
最新バージョンのChromeとFirefoxでは、ウェブサイトが`localhost`サービスに接続する際に、許可を求める場合があります。これによりリスクは軽減されますが、完全に排除されるわけではありません。信頼できないウェブサイトには、この許可を与えないでください。
## 推奨される対応
### Storybookのバージョンアップ
Storybookは、上記のような最悪のシナリオを引き起こす可能性のある脆弱性を修正した、すべての影響を受ける主要なStorybookバージョンのパッチバージョンをリリースしました。
`storybook dev`を再度実行する前に、以下のパッチバージョンにアップグレードしてください。すぐにアップグレードできない場合は、修正を適用できるまで、影響を受けるStorybookの開発サーバーを実行しないでください。
- 11.0.0-alpha.6
- 10.6.2
- 9.1.21
- 8.6.19
### 変更点に関する確認
報告された脆弱性の特異性から、Storybookチームは、Storybookのデフォルトの動作を、バージョン8および9を含む、多くのStorybookユーザーのワークフローに必須ではない、いくつかのネットワーク関連機能について変更することを決定しました。影響を受ける機能に依存している場合は、既存のワークフローをサポートするために、特定のセキュリティアップデートを無効にできる機能フラグを追加しました。
導入されたフラグと、それを使用することによる影響を注意深く読んでください。
#### ネットワーク経由でのiframe埋め込みはデフォルトで無効になっています。
Storybookでは、マネージャーやプレビューを、異なるホスト名を持つウェブサイトにiframeとして埋め込むことは、もはや許可されていません。ビルド済みのStorybookは影響を受けず、自由に埋め込むことができます。
Storybookの開発サーバーを、別のウェブアプリケーションを通じて埋め込む場合に、その別のアプリケーションを`localhost`で実行してください。また、`security.insecureRemoteIframeEmbed`という機能フラグを使用することで、どのオリジンからのiframe埋め込みも再度有効にすることができます。
#### プレビューiframeは、不明なホストからのメッセージを拒否します
Storybookのプレビューとマネージャーは、`postMessage` APIを使用してメッセージを送受信できるiframeと親ウィンドウのオリジンを制限するようになりました。
デフォルトでは、開発モードのStorybookは、自身のオリジンと他の`localhost`サービスとのみ通信を受け入れます。ビルド済みのStorybookは、引き続き不明なオリジンからの通信を受け入れます。
Storybookの拡張機能や統合機能が、`postMessage`に依存して、ライブストーリーの引数を更新する可能性があるかもしれません。もしそうしている場合は、より安全な代替手段について検討するために、Storybookのチームにご連絡ください。
Storybookの組み合わせ機能も`postMessage`に依存しているため、異なるオリジンにある組み合わせStorybookは、ビルドされていない場合、読み込まれません。`security.insecureIframeMessaging`という機能フラグを使用することで、この保護機能を無効にすることができますが、組み合わせStorybookはビルドすることをお勧めします。
#### `highlight`イベントのシグネチャが変更されました
Storybook自体のアクセシビリティ拡張機能は、`highlight`イベントを使用して、プレビューにハイライトを挿入し、ユーザーがクリックできるようにします。ハイライトをクリックすると、ドキュメントページへのリンクを含むメニューが開きます。
そのイベントのAPIは、許可範囲が広すぎて、悪意のあるイベントを引き起こすために利用される可能性がありました。ユーザーの開発サーバーで処理されるイベントも、その影響を受ける可能性がありました。APIを改修し、不正利用を防ぎました。ChromaticのVisual Testsアドオンは、アクセシビリティアドオン以外では、このAPIを使用して、ハイライトされた無視された要素からドキュメントへのリンクを提供しています。このリンクを機能させるためには、Visual Testsアドオンをバージョン5.5.1以降にアップデートしてください。私たちが知る限り、このAPIを使用している他のアドオンはないため、古いAPIを復元するための機能フラグは追加していません。
## 脆弱性公開の経緯
9月30日、Storybookチームは、悪意のあるウェブサイトがStorybookの開発サーバーのプレビューiframeを埋め込み、開発者のマシン上にある開発サーバーにイベントを送信する方法を示す、責任ある情報提供を受け取りました。
彼らは、この情報と、現在進行中のセキュリティ監査の結果を組み合わせ、公開された脆弱性、および私たちが独自に発見した脆弱性を悪用した場合の最悪のシナリオを想定しました。その後、この最悪のシナリオが発生するために必要なすべての対策を講じました。実際のStorybookプロジェクトでの悪用を示す証拠は、私たちには届いていません。このアドバイザリで説明されている攻撃は、多くの脆弱性を正確に悪用する必要があり、そのうちいくつかはStorybookチームに報告されていませんでした。
### 最悪の攻撃シナリオ
攻撃者が制御するウェブサイトは、実行中のStorybookの開発サーバーのプレビューとやり取りすることができます。ユーザーの操作によって、開発サーバーがストーリーファイルに不正な変更を加える可能性があります。その後に、悪意のあるファイルがローカルの実行環境で実行されると、攻撃は、開発者の権限で任意のコードを実行する可能性があります。
影響を受けるパッケージ：
- npm (JavaScript) storybook: 影響範囲は 8.0.0 以上、8.6.19 未満。8.6.19 で修正済み。
- npm (JavaScript) storybook: 影響範囲は 9.0.0 以上、9.1.21 未満。9.1.21 で修正済み。
- npm (JavaScript) storybook: 影響範囲は 10.0.0 以上、10.6.2 未満。10.6.2 で修正済み。
- npm (JavaScript) storybook: 影響範囲は 11.0.0-alpha.0 以上、11.0.0-alpha.6 未満。11.0.0-alpha.6 で修正済み。
- npm (JavaScript) @storybook/core: 影響範囲は 8.0.0 以上、8.6.19 未満。8.6.19 で修正済み。
- npm (JavaScript) @storybook/core-server: 影響範囲は 8.0.0 以上、8.6.19 未満。8.6.19 で修正済み。
- npm (JavaScript) @storybook/experimental-addon-test: 影響範囲は 8.0.0 以上、8.6.19 未満。8.6.19 で修正済み。
- npm (JavaScript) @storybook/addon-vitest: 影響範囲は 9.0.0 以上、9.1.21 未満。9.1.21 で修正済み。
- npm (JavaScript) @storybook/addon-vitest: 影響範囲は 10.0.0 以上、10.6.2 未満。10.6.2 で修正済み。
- npm (JavaScript) @storybook/addon-vitest: 影響範囲は 11.0.0-alpha.0 以上、11.0.0-alpha.6 未満。11.0.0-alpha.6 で修正済み。
- npm (JavaScript) @storybook/addon-mcp: 影響範囲は 10.6.0 以上、10.6.2 未満。10.6.2 で修正済み。
- npm (JavaScript) @storybook/addon-mcp: 影響範囲は 11.0.0-alpha.0 以上、11.0.0-alpha.6 未満。11.0.0-alpha.6 で修正済み。