프론트엔드에서 API 키 숨기기 — 백엔드 없이

Source: Dev.to

타사 API를 호출하는 프런트엔드를 만든 적이 있다면, 이 문제를 겪어봤을 것입니다: API에 키가 필요하지만, 그 키를 JavaScript에 넣으면 누구나 볼 수 있습니다.

보통의 해결책은 백엔드 프록시를 구축하는 것입니다 — 키를 보관하고 대신 요청을 전달해 주는 작은 서버죠. 이것은 작동하지만 이제 서버를 작성하고 배포하며 유지 관리해야 합니다. 많은 프로젝트, 특히 프로토타입, 사이드 프로젝트, JAMstack 사이트에서는 단순한 API 호출에 비해 과도한 부담이 됩니다.

Mongrel.io는 백엔드를 완전히 생략할 수 있게 해줍니다. 요청 시점에 자격 증명을 삽입하는 서버‑사이드 프록시 역할을 하므로 API 키가 프런트엔드 코드에 절대 나타나지 않습니다.

문제 상세

다음은 보안에 취약한 패턴의 예시입니다. 날씨 API를 호출하고 싶어서 다음과 같이 코드를 작성합니다:

const response = await fetch(
  "https://api.weather.example/forecast?city=Sydney",
  {
    headers: {
      "X-API-Key": "sk_live_abc123def456",
    },
  }
);
const data = await response.json();

이 API 키는 이제 브라우저의 네트워크 탭을 여는 사람이라면 누구나 볼 수 있게 됩니다. VITE_API_KEY 나 NEXT_PUBLIC_API_KEY 와 같이 환경 변수에 넣더라도, 빌드 도구가 해당 값을 JavaScript 번들에 인라인합니다. 키는 여전히 브라우저로 전달됩니다.

위험은 실제입니다

• 키 도난 – 누구든지 키를 추출해 자신의 코드에서 사용할 수 있습니다
• 청구 남용 – 도난당한 키로 인해 계정에 비용이 발생할 수 있습니다
• 요청 제한 소진 – 자동화된 남용으로 할당량이 소진되어 정당한 사용자의 경험이 방해받을 수 있습니다

Mongrel.io가 이 문제를 해결하는 방법

Mongrel.io는 프런트엔드와 외부 API 사이에 위치합니다. 흐름은 다음과 같습니다:

1. 프런트엔드가 Mongrel.io 엔드포인트를 호출합니다 – 요청에 API 키가 포함되지 않습니다.
2. Mongrel.io가 요청을 받아 저장된 자격 증명을 복호화합니다.
3. Mongrel.io가 서버‑사이드에서 자격 증명을 삽입하여 실제 API를 호출합니다.
4. 응답이 프런트엔드로 반환됩니다.

API 키는 AWS KMS를 사용해 저장 시 암호화되며, 요청 시 Lambda 함수 내부에서만 복호화됩니다. 백엔드 코드를 작성하거나 배포할 필요가 없습니다.

단계별 안내

1. API 만들기

Mongrel.io 대시보드에서 먼저 API를 생성합니다. 이는 라우트를 담는 컨테이너이며, 프로젝트와 같은 개념입니다. 이름과 선택적인 설명을 입력하세요.

2. 라우트 만들기

API 안에서 새 라우트를 생성합니다. 요청 경로를 지정하면 프론트엔드가 호출할 URL이 됩니다.
예를 들어 경로를 /weather/forecast 로 설정하면 엔드포인트는 다음과 같이 사용할 수 있습니다:

https://your-subdomain.mongrel.io/weather/forecast

3. HTTP 소스 추가

라우트에 소스를 추가하고 HTTP 유형을 선택합니다. 호출하려는 외부 API의 URL을 입력합니다. 예:

https://api.weather.example/forecast

4. 인증 설정

여기가 핵심입니다. HTTP 소스에서 Authentication 섹션을 열고 외부 API가 요구하는 인증 유형을 선택합니다.

적절한 유형을 선택하고 자격 증명을 입력합니다. 헤더에 API 키를 전송하는 경우 헤더 이름과 키 값을 입력하면 됩니다.

Mongrel.io는 이러한 값을 즉시 암호화합니다. 값은 암호화된 상태로 저장되며, 요청 시 Lambda 함수 내부에서만 복호화됩니다.

5. 라우트 게시

라우트 구성이 완료되면 Publish 버튼을 클릭합니다. Mongrel.io가 설정을 검증하고 엔드포인트를 실시간으로 활성화합니다.

6. 프론트엔드에서 호출하기

이제 프론트엔드에서는 인증 정보를 전혀 포함하지 않고 Mongrel.io 엔드포인트를 호출할 수 있습니다:

const response = await fetch(
  "https://your-subdomain.mongrel.io/weather/forecast?city=Sydney"
);
const data = await response.json();

API 키가 코드, Git 저장소, 혹은 브라우저 네트워크 탭에 나타나지 않습니다.

지원되는 인증 유형

Mongrel.io는 서드파티 API에서 가장 일반적으로 사용되는 패턴을 포괄하는 다섯 가지 인증 방식을 지원합니다:

**Appends a key to the URL query string** (e.g. `?api_key=your-key`)

**Bearer Token**  
Sends a token in the `Authorization: Bearer` header.

**OAuth/OIDC**  
Performs a full client‑credentials flow — exchanges a client ID and secret for an access token, then injects it as a Bearer token.

For OAuth/OIDC, **Mongrel.io** handles the entire token lifecycle: exchanging credentials, caching tokens, and refreshing them when they expire. You only need to provide the token URL, client ID, client secret, and scope.

전후

이전 — 프런트엔드에 노출된 API 키

// Your API key is visible in the browser
const response = await fetch("https://api.weather.example/forecast", {
  headers: {
    "X-API-Key": "sk_live_abc123def456"
  }
});

이후 — Mongrel.io를 통한 호출

// No API key anywhere in your frontend code
const response = await fetch(
  "https://your-subdomain.mongrel.io/weather/forecast"
);

API 키는 프런트엔드 코드, Git 저장소, 혹은 브라우저 네트워크 탭에 절대 나타나지 않습니다.

시작하기

Mongrel.io는 무료로 시작할 수 있습니다. 계정을 만들고, 첫 번째 라우트를 설정하고, 프론트엔드에 API 키를 전달하는 일을 중단하세요.

• app.mongrel.io에 가입하기
• 문서 읽기
• 인증에 대해 더 알아보기