AI Sandbox: Safely Embedding Sandbox Code in Iframes

Running user-submitted, AI-generated games inside your Next.js application poses severe security risks. A rogue script could access session cookies, execute cross-site scripting (XSS) actions, or compromise authentication state. The ultimate shield is a properly sandboxed HTML5 iframe.

1. The Secure Sandbox Attribute Set

When embedding game frames, restrict permissions using the `sandbox` attribute. By omitting `allow-same-origin`, the embedded frame is treated as a unique origin, blocking it from accessing parent local storage or document models:

<iframe
  src="/embed/game-folder"
  sandbox="allow-scripts allow-pointer-lock"
  scrolling="no"
  class="w-full h-full border-none"
  title="VibeGames Sandbox Embed"
></iframe>

2. Secure Communication via postMessage

Since the frame and parent live on separate origins, communicate exclusively via structured postMessages. Always validate the origin and source payload structure before handling messages in your wrapper page:

// Parent Window Event Handler
window.addEventListener("message", (event) => {
  // 1. Verify expected structure
  const data = event.data;
  if (!data || data.source !== "vibegames-sdk") return;

  // 2. Route payload based on message type
  switch (data.type) {
    case "VG_SUBMIT_SCORE":
      savePlayerScore(data.payload.score);
      break;
    default:
      console.warn("Unhandled frame action", data.type);
  }
});