하나의 API 키를 숨기기 위해 백엔드를 만들지 마세요

Source: Dev.to

당신은 차세대 AI 래퍼나 세련된 싱글 페이지 애플리케이션(SPA)을 만들고 있습니다. OpenAI 키를 가지고 있고, 프론트엔드는 React/Vue/Svelte로 준비돼 있으며, 이제 배포하려고 합니다.

하지만 잠깐. 🛑

클라이언트‑사이드 코드에 sk-proj-... 를 넣을 수 없습니다. 모두가 알고 있는 사실이죠.

그래서 이제 해야 할 일은:

• Node/Express 서버(또는 Next.js API 라우트)를 띄우기.
• CORS 설정하기.
• 배포하기(Vercel/Heroku/EC2).
• 유지보수하기.

그냥 한 번 API 호출만 하려고 비용을 내야 한다니? 과도한 일처럼 느껴집니다.

“Backend for Frontend”의 문제점

간단한 통합(AI 에이전트, 날씨 앱, 결제 링크 등)에서는 전용 백엔드 서비스를 구축하는 것이 불필요한 마찰을 초래합니다. 실제 제품을 만드는 데보다 IAM 역할과 미들웨어 설정에 더 많은 시간을 소비하게 됩니다.

키를 노출하는 것은 선택지가 아닙니다. 봇은 GitHub과 공개 레포를 즉시 스크랩합니다. $500 크레딧이 순식간에 사라질 수도 있죠. 💸

해결책: 보안 프록시 레이어

프론트엔드 코드는 깔끔하게 유지하면서도 키를 보호할 수 있다면 어떨까요?

그래서 제가 만든 것이 SaltingIO입니다. 프론트엔드와 API 제공자 사이에 안전한 “Salt Layer” 역할을 합니다.

작동 방식

1. 원시 API 키(OpenAI, Anthropic, Stripe 등)를 Salting 대시보드에 붙여넣기만 하면 즉시 암호화됩니다. 🔒
2. Bridge URL을 받습니다. https://api.salting.io/r/your-bridge-id 와 같은 고유 엔드포인트가 제공됩니다.
3. 배포합니다. 프론트엔드의 fetch() 호출에 그 URL을 사용하면 백엔드가 필요 없습니다.

예시: React에서 안전하게 OpenAI 호출하기

이전(보안 취약 ❌)

const response = await fetch('https://api.openai.com/v1/chat/completions', {
  headers: {
    'Authorization': 'Bearer sk-proj-12345...' // EXPOSED!
  }
});

이후(보안 강화 ✅)

const response = await fetch('https://api.salting.io/r/your-bridge-id', {
  method: 'POST',
  body: JSON.stringify({ model: 'gpt-4', messages: [...] })
});

인디 해커에게 중요한 이유

• 속도 – 몇 분 안에 배포, 몇 시간이 아니라.
• 보안 – 키가 우리 암호화 금고를 떠나지 않습니다.
• 제어 – 사용자당 요청 제한 설정 가능(예: “IP당 하루 최대 10회”). Redis 코드를 한 줄도 작성하지 않아도 남용을 방지할 수 있습니다.
• 분석 – 누가 API를 얼마나 사용했는지 정확히 확인 가능.

매 프로젝트마다 람다를 설정하는 데 지쳤기 때문에 만들었습니다. 공개적으로 개발하거나 빠르게 배포한다면 한 번 사용해 보세요.

👉 SaltingIO로 API 키를 안전하게 보호하세요 – Simple API Calls를 위한 백엔드 구축 중단