Dev Hub1 month ago

WebMCP 보안 가이드 — 브라우저 에이전트의 권한 남용 막는 법

웹 모델 컨텍스트 프로토콜(WebMCP)은 구글과 마이크로소프트가 공동 제안한 브라우저 표준으로, 크롬 149 버전부터 오리진 트라이얼이 시작되었습니다. 기존 에이전트가 화면 스크린샷이나 DOM 트리를 복잡하게 스크래핑하던 방식과 달리, 웹앱이 직접 구조화된 도구를 에이전트에 노출하여 빠르고 안정적인 상호작용을 지원합니다.

하지만 WebMCP 도구는 사용자의 현재 브라우저 세션과 로그인 쿠키를 그대로 공유하여 실행됩니다. 만약 에이전트가 외부 악성 이메일이나 리뷰를 읽고 간접 프롬프트 인젝션에 노출되면, 사용자 권한을 도용해 계정을 삭제하거나 무단 결제를 수행하는 대리인 혼동 문제가 발생할 수 있습니다.

HTTP 응답 헤더를 통한 1차 방어막: 오리진 격리와 권한 정책 설정

웹 에이전트가 브라우저 내에서 안전하게 작동하도록 돕는 WebMCP의 핵심 방어막은 HTTP 응답 헤더를 통해 엄격한 오리진 격리와 권한 정책을 수립하는 데서 시작합니다. 브라우저가 웹 페이지를 렌더링할 때 서버가 올바른 보안 헤더를 제공하지 않으면, 악성 스크립트나 인접 도메인의 악의적인 접근에 노출될 수 있습니다. 특히 사용자의 로그인 세션과 권한을 그대로 공유하는 에이전트 환경의 특성상 이 단계의 차단이 필수적입니다.

구체적으로는 Origin-Agent-Cluster: ?1 헤더를 명시해 동일 오리진만을 위한 전용 프로세스 격리를 브라우저에 요청해야 합니다. 크로미움 이슈 트래커의 521181015번 이슈에 따르면, 명시적인 격리가 없는 환경에서 하위 도메인 간에 document.domain을 완화해 사용할 경우 다른 오리진이 피해 오리진의 WebMCP 도구 컨텍스트를 탈취하여 임의의 도구를 등록하고 실행하는 보안 취약점이 발생할 수 있습니다. 이를 완전히 방지하려면 페이지 단위로 독립된 오리진 에이전트 클러스터를 할당하도록 설정해야 합니다.

여기에 더해 WebMCP 전용 권한 정책인 Permissions-Policy: tools=(self)를 적용해야 합니다. 이 정책은 하위 iframe 등 신뢰할 수 없는 외부 리소스가 마음대로 도구를 등록하지 못하게 차단합니다. 결제나 인증처럼 에이전트가 절대로 개입해서는 안 되는 민감한 경로에는 tools=()를 명시하여 WebMCP 동작 자체를 원천 봉쇄하는 전략이 유효합니다.

Fastify 백엔드에서 이러한 보안 헤더를 편리하고 안전하게 제어하려면 아래와 같이 응답 전송 단계에서 헤더를 동적으로 주입하는 훅을 활용할 수 있습니다.

typescript

import Fastify from 'fastify';

const fastify = Fastify();

// WebMCP 보안 규격을 준수하기 위한 헤더 주입 훅
fastify.addHook('onSend', async (request, reply, payload) => {
  // 전용 프로세스 격리를 요청하여 인접 도메인 간의 간섭 방지
  reply.header('Origin-Agent-Cluster', '?1');

  // 민감한 경로에서는 WebMCP 기능을 완전히 비활성화하고, 그 외에는 동일 오리진만 허용
  if (request.url.startsWith('/checkout') || request.url.startsWith('/auth')) {
    reply.header('Permissions-Policy', 'tools=()');
  } else {
    reply.header('Permissions-Policy', 'tools=(self)');
  }

  return payload;
});

클라이언트 사이드 안전 힌트와 주석 메타데이터

브라우저 에이전트가 악성 데이터에 오염되어 원치 않는 동작을 수행하는 것을 막으려면 클라이언트 측 도구 등록 단계부터 명확한 안전 힌트를 제공해야 합니다. 크롬 150 버전부터 도입된 문서 범위 API인 document.modelContext.registerTool을 사용하면 메타데이터 주석을 통해 에이전트에 세부적인 권한 통제 가이드를 전달할 수 있습니다. 특히 사용자 리뷰나 외부 웹 검색 결과처럼 검증되지 않은 외부 입력값을 다루는 도구에는 untrustedContentHint: true를 선언해 에이전트가 이 데이터를 실행 지시가 아닌 순수한 텍스트 데이터로만 취급하도록 제어해야 합니다.

단순 조회 목적의 도구에는 readOnlyHint: true를 선언해 무분별한 사용자 승인 창이 뜨는 사용자 경험 저하를 방지할 수 있습니다. 반대로 데이터 삭제나 결제 같은 비가역적인 쓰기 도구에는 consequentialHint: true를 주입하여 브라우저 수준에서 반드시 사용자의 명시적인 확인 절차를 거치도록 설계해야 합니다. 또한 보안 사고 예방을 위해 도구 설명은 최대 500자, 파라미터 설명은 150자 이내로 엄격히 제한하여 설명 필드 자체를 우회 경로로 삼는 프롬프트 주입 시도를 근본적으로 차단해야 합니다.

안전하게 도구를 등록하는 클라이언트 자바스크립트 구현 예시는 다음과 같습니다.

javascript

const controller = new AbortController();

await document.modelContext.registerTool({
  name: 'get_user_comment',
  description: '사용자 댓글 목록을 안전하게 읽어옵니다.',
  untrustedContentHint: true, // 외부 작성 콘텐츠를 포함함을 명시
  readOnlyHint: true,          // 부수 효과가 없는 안전한 조회 작업
  parameters: {
    type: 'object',
    properties: {
      commentId: { type: 'string' }
    },
    required: ['commentId']
  }
}, async ({ commentId }) => {
  const res = await fetch(`/api/comments/${commentId}`);
  return res.json();
}, { signal: controller.signal });

이와 같이 도구의 수명 주기를 유연하게 제어할 수 있는 AbortController 신호와 핵심 안전성 힌트들을 결합함으로써, 비정상적인 호출이 발생하더라도 브라우저 및 에이전트 레이어에서 선제적인 방어막을 구축할 수 있습니다.

제로 트러스트 서버 사이드 검증과 Fastify 스키마 설계

클라이언트 사이드에서 선언하는 WebMCP JSON 스키마는 온전한 보안 경계 역할을 수행할 수 없습니다. 실제 브라우저 에이전트 환경에서는 유효성 검사를 거치지 않은 임의의 추가 프로퍼티나 선언된 사양과 다른 타입의 데이터가 백엔드로 전송되는 일이 빈번히 발생합니다. 따라서 최종 수신지인 Fastify 백엔드 서버 수준에서 엄격한 스키마 기반 검증을 거치는 제로 트러스트 관점의 재검증이 필수적입니다.

이를 해결하는 가장 확실한 방법은 Fastify 공식 타입 제공자인 TypeBox를 활용해 런타임 검증과 타입 컴파일을 동기화하는 것입니다. 특히 Fastify 환경에서 Ajv 옵션의 removeAdditional: 'all' 설정을 활성화하면, 스키마에 정의되지 않은 오염된 프로퍼티를 완전히 차단하고 원하지 않는 데이터가 비즈니스 로직으로 유입되는 현상을 방지할 수 있습니다.

typescript

import Fastify from 'fastify';
import { TypeBoxTypeProvider } from '@fastify/type-provider-typebox';
import { Type } from '@sinclair/typebox';

const server = Fastify({
  ajv: {
    customOptions: {
      removeAdditional: 'all' // 허용되지 않은 추가 프로퍼티 자동 제거
    }
  }
}).withTypeProvider<TypeBoxTypeProvider>();

server.post('/api/webmcp/execute', {
  schema: {
    body: Type.Object({
      toolName: Type.String(),
      arguments: Type.Object({
        accountId: Type.String({ format: 'uuid' }),
        amount: Type.Number({ minimum: 0.01 })
      }, { additionalProperties: false })
    })
  }
}, async (request, reply) => {
  const { toolName, arguments: args } = request.body;
  // 검증 완료된 args 객체 안전하게 사용
  return { success: true, toolName, data: args };
});

이 구조를 적용하면 클라이언트 에이전트가 예기치 못한 인자를 우회 주입하더라도 서버 진입 단계에서 실패 처리됩니다. 브라우저 내부 도구 호출이 변조되더라도 서버가 스스로를 보호할 수 있는 마지막 방어선이 구축되는 셈입니다.

점진적 기능 향상으로 안전하게 시작하기

WebMCP는 크롬 156 버전까지 오리진 트라이얼이 진행되는 초기 단계의 실험적 규격입니다. 따라서 실무에 도입할 때는 이 기능이 없어도 서비스 핵심 기능이 완전히 작동할 수 있도록 점진적 기능 향상 관점으로 접근해야 합니다. 도구의 노출 범위를 최소화하고 모든 쓰기 작업을 백엔드 검증 뒤에 격리하며, 민감한 작업에는 사람이 직접 개입하는 절차를 마련하는 것이 에이전트 환경을 안전하게 구축하는 지름길입니다.

참고 링크