iframe Recording

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.

React
JavaScript
Script Tag

<MilanaProvider
  productId="prd_YOUR_PRODUCT_ID"
  clientKey="key_YOUR_CLIENT_KEY"
  sessionInfo={{ environment: "production", version: "1.0.0" }}
  options={{
    shouldRecordCrossOriginIframes: true,
  }}
>
  <YourApp />
</MilanaProvider>

import { init } from "milana-js";

await init(
  "prd_YOUR_PRODUCT_ID",
  "key_YOUR_CLIENT_KEY",
  { environment: "production", version: "1.0.0" },
  { shouldRecordCrossOriginIframes: true }
);

Milana("init", "prd_YOUR_PRODUCT_ID", "key_YOUR_CLIENT_KEY",
  { environment: "production", version: "1.0.0" },
  { shouldRecordCrossOriginIframes: true }
);

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.

JavaScript
Script Tag

import { initCrossOriginIframe } from "milana-js";

initCrossOriginIframe();

<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>

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.

Privacy controls inside iframes

Privacy controls configured in the parent page do not propagate into iframes. You must apply privacy controls independently within the iframe’s HTML.

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

<!-- 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

Documentation Index

​Same-origin iframes

​Cross-origin iframes

​Step 1: Enable in the parent page

​Step 2: Initialize inside the iframe

​Privacy controls inside iframes

​Content Security Policy

​Common use cases

Same-origin iframes

Cross-origin iframes

Step 1: Enable in the parent page

Step 2: Initialize inside the iframe

Privacy controls inside iframes

Content Security Policy

Common use cases