> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getmilana.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# iframe Recording

> How Milana records same-origin and cross-origin iframe content.

## Same-origin iframes

Milana automatically records content inside same-origin iframes. No additional configuration is needed — if the iframe shares the same origin as the parent page, its DOM is captured as part of the session.

## Cross-origin iframes

Cross-origin iframes (iframes hosted on a different domain) are **not** recorded by default. To capture their content, you need to configure both the parent page and the iframe.

### Step 1: Enable in the parent page

Set `shouldRecordCrossOriginIframes: true` in your init options.

<Tabs>
  <Tab title="React">
    ```tsx theme={null}
    <MilanaProvider
      productId="prd_YOUR_PRODUCT_ID"
      clientKey="key_YOUR_CLIENT_KEY"
      sessionInfo={{ environment: "production", version: "1.0.0" }}
      options={{
        shouldRecordCrossOriginIframes: true,
      }}
    >
      <YourApp />
    </MilanaProvider>
    ```
  </Tab>

  <Tab title="JavaScript">
    ```typescript theme={null}
    import { init } from "milana-js";

    await init(
      "prd_YOUR_PRODUCT_ID",
      "key_YOUR_CLIENT_KEY",
      { environment: "production", version: "1.0.0" },
      { shouldRecordCrossOriginIframes: true }
    );
    ```
  </Tab>

  <Tab title="Script Tag">
    ```javascript theme={null}
    Milana("init", "prd_YOUR_PRODUCT_ID", "key_YOUR_CLIENT_KEY",
      { environment: "production", version: "1.0.0" },
      { shouldRecordCrossOriginIframes: true }
    );
    ```
  </Tab>
</Tabs>

### Step 2: Initialize inside the iframe

In the iframe's own page, load the Milana SDK and call `initCrossOriginIframe()`. This starts a lightweight recorder inside the iframe that forwards DOM events to the parent page's session.

<Tabs>
  <Tab title="JavaScript">
    ```typescript theme={null}
    import { initCrossOriginIframe } from "milana-js";

    initCrossOriginIframe();
    ```
  </Tab>

  <Tab title="Script Tag">
    ```html theme={null}
    <script>
      window._milanaQueue = window._milanaQueue || [];
      function Milana() { window._milanaQueue.push([].slice.call(arguments)); }
    </script>
    <script async src="https://cdn.getmilana.ai/milana.js"></script>
    <script>
      Milana("initCrossOriginIframe");
    </script>
    ```
  </Tab>
</Tabs>

<Info>
  You do **not** need to pass a product ID or client key inside the iframe — the iframe recording is linked to the parent page's session automatically via `postMessage`.
</Info>

## Privacy controls inside iframes

<Warning>
  Privacy controls configured in the parent page do **not** propagate into iframes. You must apply privacy controls independently within the iframe's HTML.
</Warning>

Use the same CSS classes inside the iframe's markup:

```html theme={null}
<!-- Inside the iframe -->
<div class="milana-block">
  <!-- This content will not be recorded -->
</div>

<input type="text" class="milana-mask" placeholder="Sensitive field" />
```

Default input masking (`password`, `tel`, `email`) still applies automatically inside iframes.

## Content Security Policy

The parent page needs everything documented in your install quickstart. The iframe page does **not** need `connect-src` for `in.getmilana.ai` — `initCrossOriginIframe()` forwards events to the parent via `postMessage`, and the parent recorder is what reaches ingest.

The iframe page does need:

* `script-src https://cdn.getmilana.ai` — only if you load the SDK via script tag inside the iframe (also needs `'unsafe-inline'` or a nonce for the queue snippet).
* `frame-ancestors` permitting your parent origin. This is independent of Milana, but a strict iframe-side CSP can break the `postMessage` integration the SDK relies on.

## Common use cases

* **Embedded payment forms** (Stripe, Braintree) — enable cross-origin recording to see the flow, but ensure sensitive fields are blocked
* **Third-party widgets** (chat, calendars, embedded editors) hosted on a different domain
* **Micro-frontends** served from separate origins