Storybook: Missing origin validation in Storybook preview allows code injection from malicious websites

Summary

A malicious website may be able to cause unauthorized file changes in a developer’s project while an affected Storybook development server is running. Under additional conditions, a changed file could be executed by a local runtime with the developer’s privileges. We are not aware of exploitation in the wild.

Who is impacted?

You are impacted if you run a Storybook dev server in the affected versions.

You are not impacted if:

• You run a dev server that you never open in a web browser (e.g. headless automation, MCP clients)
• You run or visit a built version of Storybook

Recent versions of Chrome and Firefox may ask for permission before a website can connect to a localhost service. This reduces the risk, but does not remove it. Do not grant this permission to websites you don’t trust.

Review potentially breaking changes

Due to the exceptional nature of the reported vulnerabilities, the Storybook team has decided to change the default behavior of Storybook, including versions 8 and 9, for several network-related features that are not essential to most Storybook users' workflow. If your team relies on the affected features, feature flags have been added that can disable specific security updates to support your existing workflows.

Please carefully read the introduced flags and the consequences of using them:

• Iframe embedding over the network is disabled by default: Storybook no longer allows the manager or preview to be embedded as an iframe on a website with a different host name. Built versions of Storybook are unaffected and can be freely embedded. If you rely on embedding a Storybook dev server through a separate web app, run that separate app on localhost. You may also use the security.insecureRemoteIframeEmbed feature flag to re-enable iframe embedding from any origin.
• The preview iframe rejects messages sent by an unknown host: Both the Storybook preview and manager now restrict the origin of iframes and parent windows that they can send messages to and receive messages from using the postMessage API. By default, Storybook in dev mode only accepts communication with its own origin and other localhost services. Built Storybooks continue to accept communication from unknown origins. A Storybook addon or integration could hypothetically rely on postMessage to update a live story's args; if you do that, reach out to the Storybook team to explore safer alternatives. Storybook composition also relies on postMessage, so a composed Storybook on a different origin now fails to load unless it has been built. The security.insecureIframeMessaging feature flag disables this protection, but building composed Storybooks is recommended instead.
• The highlight event signature has changed: Storybook’s own accessibility addon uses the highlight event to inject highlights into the preview, which a user can click. Clicking the highlight opens a menu with a link to a documentation page. The API for that event was too permissive and could be used to trigger arbitrary events, including events processed by the user’s dev server. The API has been reworked to prevent abuse. Besides the accessibility addon, Chromatic's Visual Tests addon uses this API to link to documentation from highlighted ignored elements. Update the Visual Tests addon to version 5.5.1 or later to keep that link working. Because no other addons use this API as far as known, no feature flag has been added to restore the old API.

Disclosure timeline

On September 30th, the Storybook team received a responsible disclosure showing how a malicious website can embed a Storybook dev server's preview iframe and send events to the dev server on the developer's machine.

They combined this information with findings from an ongoing security audit to come up with a worst-case-scenario exploitation of the disclosed vulnerability, and the ones independently discovered. They then worked to address all layers necessary for this worst-case scenario to happen. Evidence of exploitation in real Storybook projects has not been received. The attack outlined in this advisory relies on correctly exploiting a sequence of many vulnerabilities, some of which were never disclosed to the Storybook team.

Worst-case attack scenario

An attacker-controlled website can interact with the preview of a running Storybook dev server. With user interaction, it may cause the dev server to make unauthorized changes to story files. If a malicious file is subsequently executed by a local runtime, the attack could lead to arbitrary code execution with the developer’s permissions.