Building Your App

iframe integration, postMessage IPC protocol, and CSP requirements.

How WynAI loads your app

WynAI Work displays your app inside an <iframe> with these attributes:

AppLauncher.tsx

<iframe
  src="https://yourapp.com"
  allow="microphone; camera; clipboard-write"
  sandbox="allow-scripts allow-forms allow-popups
           allow-same-origin allow-downloads"
/>

Your app receives no query params. All initialization happens via postMessage IPC.

Full IPC Protocol

WynAI → Your App

INIT_SESSION→ iframeSent once when the iframe loads.

{
  type: 'INIT_SESSION',
  token: string,      // Firebase ID token
  userId: string,     // Firebase UID
  locale: string,     // 'vi' | 'en'
  theme: string,      // 'dark' | 'light'
}

REFRESH_TOKEN→ iframeSent every ~50 minutes with a fresh token.

{
  type: 'REFRESH_TOKEN',
  token: string,      // new Firebase ID token
}

CLOSE_APP→ iframeSent when the user closes your app. Clean up state.

{ type: 'CLOSE_APP' }

Your App → WynAI

APP_READY← iframeSend this after your app finishes initializing.

{ type: 'APP_READY' }

REQUEST_CLOSE← iframeAsk WynAI to close your app (e.g. after an action).

{ type: 'REQUEST_CLOSE' }

REQUEST_RESIZE← iframeRequest the iframe container to adjust height.

{
  type: 'REQUEST_RESIZE',
  height: number,     // pixels
}

Origin validation

In production, always check event.origin before trusting messages:

const ALLOWED_ORIGINS = [
  'https://www.wynai.pro',
  'https://work.wynai.pro',
  'https://www.wordai.pro',
];

window.addEventListener('message', (event) => {
  if (!ALLOWED_ORIGINS.includes(event.origin)) return;
  // safe to process
});

CSP requirements

Your server must allow framing from WynAI domains. Set these response headers:

# Allow framing only from WynAI
Content-Security-Policy: frame-ancestors https://*.wynai.pro https://*.wordai.pro

# Or if using X-Frame-Options (less flexible):
# X-Frame-Options: ALLOW-FROM https://work.wynai.pro

Do not set X-Frame-Options: DENY or SAMEORIGIN — this will prevent your app from loading.

Authentication Webhooks