ChatGPT의 3중 iframe 보안 아키텍처 안에서 Next.js 앱을 실행할 때 발생하는 7가지 기술 문제와 각각의 해결법을 상세히 다룬다. Next.js가 실제 도메인 대신 sandbox origin을 인식해 자산 로딩·라우팅·CORS·React 하이드레이션이 모두 깨지는데, 모든 패치를 layout.tsx 한 곳에서 적용해 표준 Next.js 개발 경험을 그대로 유지하며 해결했다.
핵심 포인트- ChatGPT는 3중 중첩 iframe 구조를 사용해 앱이 web-sandbox.oaiusercontent.com을 origin으로 인식, 7가지 연쇄 오류가 발생한다.
- assetPrefix 설정으로 next/ 자산 요청을 실제 도메인으로 강제해 404 오류를 해결한다.
- base 태그와 window.fetch 패치로 모든 상대 경로 기준과 클라이언트 네비게이션을 복구한다.
- MutationObserver로 루트 HTML 속성의 무단 변경을 실시간 감지·제거해 React 하이드레이션 불일치를 방지한다.
- MCP Resources + Tools로 ChatGPT가 Next.js 앱 UI를 렌더링하고 도구를 호출하는 통합을 구현한다.
상세 정리- 배경: ChatGPT는 보안 격리를 위해 chatgpt.com → web-sandbox.oaiusercontent.com(sandbox) → web-sandbox.oaiusercontent.com(inner) → 앱 HTML 의 3중 iframe 구조를 사용한다.
- 문제 1 — 자산 로딩 실패: Next.js가 _next/ 요청을 sandbox origin으로 전송해 404 발생. assetPrefix 에 실제 도메인을 지정해 해결.
- 문제 2 — 상대 URL 깨짐: HTML base 태그로 모든 상대 경로의 기준 URL을 실제 도메인으로 설정해 이미지·폰트·API 호출을 정상화.
- 문제 3 — 브라우저 history 누출: history.pushState / history.replaceState 를 가로채 전체 URL을 상대 경로로 축약, 보안 경계를 유지하면서 뒤로/앞으로 버튼을 보존.
- 문제 4 — 클라이언트 네비게이션 실패: window.fetch 를 패치해 same-origin 요청을 실제 도메인 URL로 재작성, React Server Component 네비게이션 시스템을 복구.
- 문제 5 — CORS 차단: Next.js 미들웨어에서 OPTIONS preflight 처리 및 모든 응답에 CORS 헤더 추가.
- 문제 6 — DOM 변형 간섭: MutationObserver 로 루트 HTML 요소의 무단 속성 변경을 감지·제거해 React 하이드레이션 불일치를 방지.
- 문제 7 — 외부 링크: ChatGPT의 openai.openExternal() API로 외부 링크 클릭을 가로채 사용자 브라우저에서 열기.
- MCP 통합: Resources는 text/html+skybridge MIME 타입으로 HTML을 전달해 ChatGPT가 인터랙티브 위젯으로 렌더링. Tools는 openai/outputTemplate 메타데이터로 도구 실행과 UI 표시를 연결하고, 앱은 window.openai.toolOutput 으로 데이터를 수신.
- 개발자 경험: 모든 패치는 layout.tsx 한 곳에 적용되며 나머지는 표준 Next.js 컨벤션 그대로. 로컬 개발은 next dev, 배포는 Vercel 정상 플로우.
왜 읽나iframe 보안 샌드박스 안에서 Next.js 앱을 실행해야 하는 플러그인·임베디드 앱 개발자, 또는 ChatGPT MCP 통합을 구현하려는 프론트엔드 엔지니어에게 구체적 해결책 레퍼런스.
Vercel Blog·
LINE Engineering·