LLM에게 HTML/JS 실행 권한을 주면 안 되는 이유와 GenUI 해법

생성형 UI(GenUI)는 사용자의 의도에 맞춰 실시간으로 맞춤형 화면을 그려주는 차세대 AI 패러다임으로 주목받고 있습니다. 그러나 오늘날 많은 오픈소스와 상용 라이브러리들이 택하고 있는 구현 방식은 보안 측면에서 극도로 위험한 시한폭탄을 안고 있습니다.

1. 흔히 저지르는 치명적 실수: 코드 생성 방식

가장 단순한 GenUI 구현체는 LLM에게 다음과 같이 요청합니다.

"사용자의 질문에 맞는 Vue 또는 HTML 컴포넌트 코드를 작성해 줘."

그리고 프론트엔드에서는 모델이 뱉어낸 문자열을 다음과 같이 실행합니다.

v-html="aiOutput"
compile(aiOutput) 또는 동적 import()
<component :is="aiOutput.componentName" />

이 방식은 다음과 같은 치명적인 보안 취약점을 즉각적으로 노출합니다.

1) XSS (크로스 사이트 스크립팅)

악의적인 사용자가 프롬프트 인젝션을 통해 모델로 하여금 <script> 태그나 악성 이벤트 리스너(onload=, onerror=)를 출력하도록 유도하면, 브라우저에서 사용자의 세션 쿠키와 토큰이 탈취됩니다.

2) Nuxt 3 / Vue의 Auto-Import 함정 (치명적 우회 공격)

Vue 3나 Nuxt 3 환경에서 <component :is="componentName">을 사용할 때, Nuxt의 자동 컴포넌트 임포트 기능이 동작합니다.
만약 모델이 AdminSecretPanel, DatabaseConsole과 같은 내부 비공개 컴포넌트 이름을 문자열로 반환하면, 개발자가 의도하지 않았던 관리자 권한 화면이 일반 사용자 브라우저에 그대로 마운트되는 컴포넌트 탈취 사고가 발생합니다.

3) 트리 DoS (브라우저 메모리 고갈 공격)

모델이 수천 개의 중첩된 DOM 요소를 쏟아내면 브라우저 렌더러가 멈추고 메모리가 고갈되어 사용자 탭이 강제 종료됩니다.

2. BOUNDAXE의 해법: 화이트리스트 객체 맵 & fail-closed 인가

BOUNDAXE의 Bound GenUI™ Engine은 문자열 실행 경로를 아예 물리적으로 차단합니다.

flowchart TD
    A["LLM 모델 출력<br/>(gpt-4o Structured Outputs)"] -->|Zod UiTurn 스키마 검증| B{"스키마 적합 여부"}
    B -->|위반| C["에러 배너 & Fallback 렌더링"]
    B -->|통과| D["TREE_LIMITS 검사<br/>(깊이 4, 노드 40개 이하)"]
    D --> E["ComponentRegistryMap Lookup<br/>(문자열이 아닌 객체 룩업)"]
    E --> F["안전한 11대 컴포넌트만 마운트"]

객체 맵 기반 화이트리스트 룩업:
- 문자열 :is를 완전히 금지하고, 개발자가 사전에 검증하고 등록한 11대 컴포넌트(Stack, ComparisonTable, TodoList 등)의 팩토리 함수 객체만을 Map에서 꺼내어 인스턴스화합니다. 등록되지 않은 이름은 렌더러에 의해 조용히 무시됩니다.
트리 한도 강제 (TREE_LIMITS):
- 트리 깊이 최대 4단계, 화면당 노드 수 최대 40개, 노드당 바인딩 액션 8개로 엄격히 제한하여 DoS 공격을 원천 차단합니다.
양방향 이벤트 인가 (authorizeUiEvent):
- 렌더링된 컴포넌트에서 발생하는 클릭, 선택 이벤트는 UiEvent로 스탬핑되어 서버로 전달됩니다.
- 서버는 세션 ID, 세대 번호, 컴포넌트 인가 여부를 검사하여 조작된 이벤트는 403 Forbidden으로 즉각 거절합니다.

결론: UI를 렌더링할 권한은 오직 화이트리스트에만 있다

LLM에게 자유로운 스크립트 작성 권한을 주는 것은 보안실 열쇠를 낯선 이에게 건네는 것과 같습니다.
안전한 GenUI는 엄격한 스키마 계약과 사전 승인된 컴포넌트 레지스트리 위에서만 성립할 수 있습니다.