# Ollie demo iframe host

A small, full-window host for `https://demoollie2.quantum-pfe.com/` with reload, full-screen, and direct-open controls. Its setup drawer checks the target response live, explains any framing blockers, and generates the required policy for the current host origin.

## Run locally

```sh
npm run build
PORT=4173 npm start
```

The server binds to `127.0.0.1` and serves the generated `dist/` directory.

## Required headers on `demoollie2.quantum-pfe.com`

The embedded application currently sends both of these blocking policies:

```http
Content-Security-Policy: ...; frame-ancestors 'self' https://webview-qa.hastee-lab.com ...;
X-Frame-Options: SAMEORIGIN
```

For the private preview, change the `frame-ancestors` directive to include this host's exact origin:

```http
Content-Security-Policy: ...; frame-ancestors 'self' https://preview-iframe-site.mythrowawaydomain.com;
```

Keep all of the application's existing CSP directives; only extend `frame-ancestors`. When a production hostname is chosen, add that exact `https://` origin as well. Origins in `frame-ancestors` are space-separated and must not include URL paths.

Remove `X-Frame-Options: SAMEORIGIN` from every response that can appear in the iframe. CSP `frame-ancestors` is the modern, flexible replacement. Do not replace it with `ALLOW-FROM`, which is obsolete and inconsistently supported.

Example nginx configuration:

```nginx
# Ensure an upstream SAMEORIGIN header is not passed through.
proxy_hide_header X-Frame-Options;

# Preserve the rest of the existing CSP and extend only frame-ancestors.
add_header Content-Security-Policy "default-src 'self' ...; frame-ancestors 'self' https://preview-iframe-site.mythrowawaydomain.com https://YOUR-PRODUCTION-HOST;" always;
```

If nginx serves the files directly, remove any existing `add_header X-Frame-Options SAMEORIGIN` line. If a CDN or edge layer adds either header, update that layer too and purge its cached HTML responses. Apply the policy to the entry page, redirects, login pages, errors, and every other HTML navigation that may occur inside the frame.

## Cross-origin notes

- A plain iframe does not require CORS headers. CORS only becomes relevant if the host page itself calls the Quantum API from JavaScript.
- The host cannot read or manipulate the framed page's DOM because the two origins differ. Use `window.postMessage` with strict origin checks if the pages need to communicate.
- If the framed app depends on cookies in a cross-site deployment, they generally need `Secure; SameSite=None`. Browser third-party-cookie restrictions can still affect authentication; putting the host on another `*.quantum-pfe.com` hostname is the most robust option.
- Identity-provider sign-in pages commonly refuse to render in iframes. Prefer popup-based sign-in or a top-level redirect for interactive authentication.
- The iframe already requests full-screen permission. Add other permissions to its `allow` attribute only if the application actually needs them.