> **Version 10.6** — **React** / **TypeScript**
> Also available:
- `?language=js` for JavaScript
- `?codeOnly=true` for code snippets only
- other versions: Version 11 (alpha) (`/docs/11/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/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 3
// 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;
```

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

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

## `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.

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 3
// 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;
```

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

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