Datasette Apps: 샌드박스 환경에서 커스텀 HTML 애플리케이션 호스팅하기

개요

Datasette Apps는 Datasette 인스턴스에서 호스팅되는 엄격하게 제한된 <iframe> 샌드박스 내에서 실행되는 독립형 HTML 및 JavaScript 애플리케이션입니다. 이 플러그인은 개발자가 Datasette 데이터에 대해 읽기 전용 SQL 쿼리를 실행하고, 사전 구성된 저장된 쿼리(stored queries)를 통해 쓰기 작업을 수행할 수 있는 커스텀 사용자 인터페이스 및 시각화를 생성할 수 있도록 합니다.

이 기능은 Datasette을 읽기 전용 데이터를 제공하는 도구에서 전체 읽기-쓰기 애플리케이션을 호스팅하는 플랫폼으로 변환시키며, 관계형 데이터베이스 백엔드와 독립형 HTML 프론트엔드를 효과적으로 결합합니다.

보안 아키텍처: 샌드박싱 및 CSP

Datasette Apps의 주요 기술적 과제는 민감하고 인증된 데이터가 포함될 수 있는 도메인에서 신뢰할 수 없는 HTML 및 JavaScript를 실행하는 것입니다. 이 플러그인은 데이터 유출 및 무단 액세스를 방지하기 위해 심층 방어(defense-in-depth) 전략을 채택합니다.

Iframe 샌드박싱

애플리케이션은 <iframe sandbox="allow-scripts allow-forms" srcdoc="...">를 사용하여 렌더링됩니다. 이 구성은 샌드박스된 애플리케이션이 다음과 같은 작업을 수행할 수 없도록 보장합니다:

  • 부모 애플리케이션의 DOM에 액세스.
  • 쿠키를 읽거나 쓰기.
  • localStorage 또는 기타 브라우저 비밀 정보에 액세스.

콘텐츠 보안 정책 (CSP)

악성 앱이 fetch()를 사용하여 외부 서버로 개인 데이터를 전송하는 것을 방지하기 위해, Datasette Apps는 <meta http-equiv="Content-Security-Policy"> 헤더를 통해 엄격한 콘텐츠 보안 정책(CSP)을 주입합니다. 정책은 다음과 같이 구성됩니다:

default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:;

한번 설정되면, 이 CSP 정책은 프레임의 콘텐츠에 대해 불변하며, JavaScript가 제한 사항을 우회하기 위해 헤더를 제거하거나 업데이트하는 것을 방지합니다.

MessageChannel을 통한 안전한 통신

보안을 해치지 않으면서 앱이 유용한 작업을 수행할 수 있도록, 플러그인은 iframe과 부모 창 사이의 통신을 위해 MessageChannel() 기반의 전송 방식을 사용합니다. 이는 postMessage()보다 선호되는 방식인데, 그 이유는 MessageChannel()이 페이지가 다른 곳으로 이동할 때 자동으로 닫히기 때문에, 신뢰할 수 없는 외부 페이지에서 명령이 실행될 위험을 줄여주기 때문입니다.

데이터 상호작용 및 쓰기 작업

읽기 전용 SQL 쿼리

앱은 JavaScript를 사용하여 허용 목록에 있는 데이터베이스에 대해 읽기 전용 SQL 쿼리를 실행할 수 있습니다. 부모 창은 쿼리를 실행하고 결과를 앱으로 반환하기 전에 대상 데이터베이스를 검증합니다.

제어된 쓰기 작업

데이터베이스를 임의의 SQL 인젝션이나 악성 업데이트에 노출시키지 않고 쓰기 기능을 활성화하기 위해, Datasette Apps는 저장된 쿼리(Datasette 1.0a31에서 도입됨)를 활용합니다.

가공되지 않은 SQL 쓰기를 허용하는 대신, 관리자는 특정 저장된 쓰기 쿼리(예: add_todo 쿼리)를 생성합니다. 그러면 앱은 특정 매개변수를 사용하여 이름으로 이러한 쿼리들을 호출합니다:

const result = await datasette.storedQuery("todos", "add_todo", {
  title: "Buy milk",
  due_date: "2026-06-20",
  priority: "high",
  completed: false
});

AI 기반 개발 워크플로우

datasette-apps 플러그인은 LLM에 의존하지 않지만, 그 아키텍처는 AI 생성에 최적화되어 있습니다. 앱이 단일 파일 HTML 문서이기 때문에, 현대적인 LLM의 이상적인 출력 형식입니다.

  • 프롬프트 통합: "Create app" 폼은 데이터베이스 스키마를 포함하는 복사 가능한 프롬프트를 제공하며, 사용자는 이를 LLM에 붙여넣어 앱을 위한 완전한 HTML/JS 코드를 생성할 수 있습니다.
  • Datasette Agent 통합: Datasette Agent와 함께 사용할 때, AI 어시스턴트는 app_create와 같은 도구를 사용하여 앱을 직접 생성하고 편집할 수 있으며, 이는 Claude의 "Artifacts" 패턴을 반영합니다.

커뮤니티 인사이트 및 관점

개발자들 사이의 논의에 따르면, "BYO UI" (Bring Your Own UI) 패턴은 데이터 중심 애플리케이션의 데이터 중심 애플리케이션의 새로운 표준이이 되고자 합니다. 이는 고정된 SaaS 대시보드에서 유연하고 에이전트가 생성한 인터페이스로 이동하는 것을 의미합니다.

"코딩 에이전트 때문에 데이터베이스 위의 고정된 UI를 제공하는 SaaS 앱이 죽었다는 느낌이 들고 있습니다. 이는 SaaS가 죽은 것이 아니라, 고약한 고정된 대시보드 패턴이다는 것을 의미합니다. BYO UI는 새로운 기본값이자 필수 요소가 될 것입니다."

다른 사용자들은 애플리케이션 로직과 데이터를 한 곳에 두는 것의 유용성을 언급했지만,일부 사용자들은 에이전트에게 앱을 생성하는 데 너무 많은 자율성을 부여할 경우 코드베이스에 "AI slop"가 발생할 수 있는 가능성에 대해 우려를 나타내기도 했습니다.

Sources