> **Version 11 (alpha)** — **React** / **TypeScript**
> Also available:
- `?language=js` for JavaScript
- `?codeOnly=true` for code snippets only
- other versions: Version 10.6 (latest) (`/docs/api/main-config/main-config-security.md`), Version 9 (`/docs/9/api/main-config/main-config-security.md`), Version 8 (`/docs/8/api/main-config/main-config-security.md`)

# security

Parent: [main.ts configuration](https://storybook.js.org/docs/11/api/main-config/main-config.md)

Type:

```ts
{
  insecureIframeMessaging?: boolean;
  insecureRemoteIframeEmbed?: boolean;
}
```

Configures security behavior of Storybook.

## `insecureIframeMessaging`

Type: `boolean`

Default: `false`

The manager and its preview iframes exchange messages with `postMessage`. By default, the manager only accepts messages from its own preview iframes, and a preview running in dev mode only accepts messages from a manager on a local host such as `localhost` or `127.0.0.1`. In dev mode, both also address their messages to the expected origin. This prevents other websites from sending messages to your Storybook or reading the ones it sends.

The `insecureIframeMessaging` flag turns these checks off and restores the behavior of earlier Storybook versions. It should be used with caution, as any website that embeds your Storybook can then exchange messages with it. If you need to compose a Storybook running in dev mode from a Storybook opened on another host, the safe alternative is to build the composed Storybook and compose the build output instead.

```ts
// .storybook/main.ts — CSF 4
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)

export default defineMain({
  security: {
    insecureIframeMessaging: true,
  },
});
```

```ts
// .storybook/main.ts — CSF 3
// ⚠️ CSF versions 1, 2, and 3 will be removed in a future version of Storybook. Upgrade to CSF 4: https://storybook.js.org/docs/writing-stories/csf#upgrade-to-csf-4
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.

const config: StorybookConfig = {
  security: {
    insecureIframeMessaging: true,
  },
};

export default config;
```

## `insecureRemoteIframeEmbed`

Type: `boolean`

Default: `false`

By default, the dev server's manager and preview can only be embedded in iframes by pages served on `localhost` or `127.0.0.1`. This prevents malicious websites from embedding your local Storybook and attempting to interact with your dev server. This restriction does not apply in a WebContainer, such as StackBlitz, which shows the dev server in an iframe on its own page.

The `insecureRemoteIframeEmbed` flag lets you embed your Storybook dev server in an `<iframe>` hosted on any origin. It should be used with caution, as any website you visit will be able to embed your local Storybook. The safe alternative is to build your composed Storybook and compose the build output instead.

```ts
// .storybook/main.ts — CSF 4
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)

export default defineMain({
  security: {
    insecureRemoteIframeEmbed: true,
  },
});
```

```ts
// .storybook/main.ts — CSF 3
// ⚠️ CSF versions 1, 2, and 3 will be removed in a future version of Storybook. Upgrade to CSF 4: https://storybook.js.org/docs/writing-stories/csf#upgrade-to-csf-4
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.

const config: StorybookConfig = {
  security: {
    insecureRemoteIframeEmbed: true,
  },
};

export default config;
```