Vue 3 + Vite 프론트엔드에서 HolySheep API 직접 호출: 보안 위험 분석 및 안전한 백엔드 프록시 구현 가이드

저는 평소 신생 SaaS 팀들이 "일단 빠르게 MVP부터"라고 외치며 프론트엔드에 AI API 키를 그대로 박아 넣는 코드를 수십 번 리뷰해 왔습니다. 이번 글에서는 그 습관이 어떤 결과를 만드는지, 그리고 HolySheep AI 게이트웨이를 안전하게 호출하는 표준 패턴이 무엇인지 단계별로 정리합니다. 화요일 한낮에 일어난 실제 시나리오 세 가지로 시작하겠습니다.

들어가며 — 화요일 한낮에 일어난 세 가지 일

시나리오 1 (이커머스 AI 고객 서비스): 어느 D2C 브랜드의 주니어 개발자가 Vue 3 + Vite 챗봇을 3일 만에 출시했습니다. .env에 HolySheep 키를 넣고 VITE_HOLYSHEEP_KEY=... 형태로 클라이언트에서 직접 호출하도록 구성했습니다. 출시 4일 만에 빌드 결과물이 공개 CDN에 올라갔고, 누군가 DevTools에서 키를 추출해 9시간 동안 11개 모델을 동시에 두드려 약 280만 원 상당의 토큰을 소진시켰습니다. 카드 결제는 한국 로컬 — 청구서가 정상 도착했습니다.

시나리오 2 (기업 RAG 시스템 출시): 한 B2B SaaS 팀이 사내 문서 기반 RAG를 Friday 데모에 맞춰 공개했습니다. 운영팀이 다음 주 월요일에 "어제 우리 비용 8배 뛰었어요"라는 슬랙을 올렸고, 원인 추적 결과 사전 배포 링크에 박힌 키로 누군가 DeepSeek V3.2를 무한 루프로 호출한 흔적이 잡혔습니다.

시나리오 3 (1인 개발자): 인디 개발자가 GitHub Pages에 포트폴리오 챗봇을 띄웠습니다. 별일 없이 2주간 잘 작동하던 것이, 어느 날 갑자기 403 에러가 떨어졌습니다. 알고 보니 HolySheep 측에서 비정상 호출 패턴을 감지해 키를 자동 차단한 것입니다 — 본인 사이트였는데 본인 의도와 다른 호출이라 차단당했습니다.

세 시나리오 공통점은 단 하나, 프론트엔드에 API 키가 그대로 노출되었다는 점입니다.

프론트엔드 직접 호출이 위험한 5가지 이유

1. 키 노출: Vite의 VITE_* 환경변수는 빌드 시 클라이언트 번들에 인라인됩니다. DevTools Sources 탭에서 grep 한 번이면 끝납니다.
2. CORS 우회는 무의미: CORS는 브라우저 보호장치일 뿐, 키 자체는 평문으로 전송됩니다. curl로 우회하면 동일하게 호출됩니다.
3. 요청 검증 불가: 클라이언트에서 보내는 토큰 수, temperature, 시스템 프롬프트를 신뢰할 수 없습니다. 누군가 비용 폭탄 모델로 바꿔치기할 수 있습니다.
4. 속도 제한과 캐시 불가: 동일 질문이 100번 와도 모델을 100번 부릅니다. 백엔드가 없으면 Redis 캐시도, 토큰 버킷도, 큐도 없습니다.
5. 과금 폭탄: 시나리오 1·2처럼 키가 탈취되면 한도 설정 없는 호출로 비용이 무한대로 치솟습니다. HolySheep의 자동 차단이 마지막 방어선이지만, 그건 "이미 늦었다"는 신호입니다.

위험한 코드 예시 — 하지 마세요

다음 코드는 절대 그대로 배포하면 안 됩니다. 교육 목적의 안티 패턴입니다.

// src/composables/useChat.ts — 위험 ❌
// VITE_HOLYSHEEP_KEY 는 build 시 클라이언트 번들에 박힙니다
const client = new OpenAI({
  apiKey: import.meta.env.VITE_HOLYSHEEP_KEY,
  baseURL: 'https://api.holysheep.ai/v1',
  dangerouslyAllowBrowser: true, // 브라우저 직접 호출 강제
});

export async function sendMessage(prompt: string) {
  // 사용자가 developer console에서 이 호출을 변조할 수 있습니다
  // model, max_tokens, temperature 등 무엇이든 변경 가능
  const r = await client.chat.completions.create({
    model: 'gpt-4.1',           // ← 데모 비용 50배 모델로 교체 가능
    messages: [{ role: 'user', content: prompt }],
  });
  return r.choices[0].message.content;
}

한 가지 더 — Vite의 VITE_ 접두사가 붙은 변수는 의도적으로 클라이언트 번들에 포함되도록 설계되어 있습니다. 따라서 키에 이 접두사를 쓰는 순간 그 키는 공공재입니다.

안전한 아키텍처: 프론트엔드 → 자체 백엔드 프록시 → HolySheep

표준 패턴은 다음과 같습니다.

• Vue 3 프론트엔드는 내 백엔드의 /api/*만 호출합니다.
• 백엔드(.env, process.env)가 HolySheep 키를 보관합니다.
• 백엔드에서 모델 화이트리스트, 속도 제한, 캐시, 로깅, 사용자 인증을 처리합니다.
• HolySheep 게이트웨이는 https://api.holysheep.ai/v1을 단일 진입점으로 제공합니다.

백엔드 프록시 구현 (Node.js + Express)

// server/index.js
import express from 'express';
import OpenAI from 'openai';
import rateLimit from 'express-rate-limit';
import Redis from 'ioredis';
import crypto from 'node:crypto';

const app = express();
app.use(express.json());

const redis = new Redis(process.env.REDIS_URL);
const PORT = process.env.PORT || 3000;

// ① 사용자 토큰(쿠키/JWT) 기반 인증 미들웨어
function authUser(req, res, next) {
  const token = req.cookies?.session;
  if (!token) return res.status(401).json({ error: 'unauth' });
  req.user = { id: 'u_' + token.slice(0, 8) };
  next();
}

// ② 분당 30회, 사용자당 60회 제한
const limiter = rateLimit({
  windowMs: 60 * 1000,
  max: 30,
  keyGenerator: (req) => req.user.id,
  standardHeaders: true,
});

app.post('/api/chat', authUser, limiter, async (req, res) => {
  // ③ 모델 화이트리스트 — 사용자 입력 무시
  const ALLOWED = new Set(['gpt-4.1', 'claude-sonnet-4.5', 'gemini-2.5-flash', 'deepseek-v3.2']);
  const model = ALLOWED.has(req.body.model) ? req.body.model : 'deepseek-v3.2';

  // ④ 동일 질문 5분 캐시 (sha256)
  const cacheKey = 'chat:' + crypto
    .createHash('sha256')
    .update(JSON.stringify({ u: req.user.id, m: model, msg: req.body.messages }))
    .digest('hex');
  const cached = await redis.get(cacheKey);
  if (cached) return res.json({ ...JSON.parse(cached), cached: true });

  // ⑤ 서버에서만 키 사용 — 클라이언트 번들에 절대 노출되지 않음
  const client = new OpenAI({
    apiKey: process.env.HOLYSHEEP_API_KEY,
    baseURL: 'https://api.holysheep.ai/v1',
  });

  try {
    const completion = await client.chat.completions.create({
      model,
      messages: req.body.messages.slice(-20), // 최근 20턴만
      temperature: typeof req.body.temperature === 'number'
        ? Math.min(Math.max(req.body.temperature, 0), 1)
        : 0.3,
      max_tokens: Math.min(req.body.max_tokens || 512, 1024),
    });
    await redis.set(cacheKey, JSON.stringify(completion), 'EX', 300);
    res.json(completion);
  } catch (err) {
    console.error('proxy error', err.status, err.message);
    res.status(err.status || 500).json({ error: 'upstream' });
  }
});

app.listen(PORT, () => console.log('proxy on', PORT));

Vue 3 안전 호출 코드

<script setup lang="ts">
import { ref } from 'vue';

const input = ref('');
const history = ref<Array<{role: string; content: string}>>([]);
const loading = ref(false);
const error = ref

// .env — 서버 전용,
관련 리소스
📚 AI API 기술 문서
💰 요금제 보기
📖 개발자 문서
🚀 무료 가입