API 키를 코드에 넣으면 안 되는 이유와 안전하게 쓰는 법

결론부터 말씀드릴게요. 웹페이지 코드에 API 키를 넣으면 그건 숨긴 게 아니라 화면에만 안 보이는 것입니다. 방문자 누구나 몇 번의 클릭으로 읽을 수 있고, 읽어간 사람은 내 결제 수단으로 API를 씁니다. 키는 브라우저로 내려가는 파일에 절대 들어가면 안 되고, 서버 쪽에 남겨둔 채 중계해서 써야 합니다.

이 글에서는 왜 위험한지, 사람들이 실제로 가장 많이 하는 실수 8가지, 그리고 정적 사이트에서도 AI 기능을 안전하게 붙이는 방법까지 순서대로 다룹니다.

01 왜 코드에 넣으면 안 되나요

브라우저로 내려간 파일은 전부 공개된 것입니다

웹사이트가 열리는 과정을 생각해보면 답이 바로 나옵니다. 서버는 HTML·CSS·자바스크립트 파일을 방문자의 컴퓨터로 복사해서 보냅니다. 브라우저는 받은 파일을 자기 컴퓨터에서 실행해 화면을 그립니다.

즉 내 사이트를 여는 순간, 그 사람 컴퓨터 안에 내 코드 사본이 통째로 들어갑니다. 화면에 안 보이는 이유는 숨겨져서가 아니라 그냥 그리지 않았을 뿐입니다.

그래서 브라우저에서 도는 코드에는 비밀을 담을 자리가 원리적으로 없습니다. 난독화도 소용없습니다. 실행되려면 결국 원래 값으로 돌아와야 하고, 그 값은 개발자도구에서 그대로 보입니다.

"제 사이트는 아무도 안 보는데요"

사람이 안 봐도 기계가 봅니다. 공개된 저장소와 웹페이지를 자동으로 훑으면서 키 형태의 문자열을 수집하는 프로그램이 상시 돌아갑니다. 앤트로픽 키는 sk-ant-로 시작하는 정해진 형태라 기계가 찾기 아주 쉽습니다.

그래서 발견되는 데 걸리는 시간은 방문자 수와 상관이 없습니다. 배포하고 몇 분에서 몇 시간 만에 잡히는 경우가 흔합니다.

발견되면 무슨 일이 생기나요

• 요금이 내 결제 수단으로 청구됩니다. 남이 쓴 만큼 내가 냅니다. 상한을 걸어두지 않았다면 알아차릴 때까지 계속 늘어납니다
• 서비스가 갑자기 멈춥니다. 한도를 넘기거나 키가 정지되면 내 사이트의 기능부터 죽습니다
• 내 이름으로 이상한 사용이 기록됩니다. 누가 무엇에 썼는지는 로그에 남지만 이미 벌어진 뒤입니다

한 가지 다행인 점은 있습니다. 깃허브는 공개 저장소를 검사해 알려진 형태의 키를 찾아내고, 앤트로픽을 포함한 제휴 서비스에 통보합니다. 앤트로픽은 통보받은 키를 자동으로 비활성화하고 메일로 알려줍니다.

02 자주 하는 실수 8가지

수업에서 실제로 반복해서 나오는 순서대로 정리했습니다. 앞의 세 개가 특히 많습니다.

03 그럼 어디에 넣어야 하나요

상황에 따라 답이 셋으로 갈립니다. 내 사이트가 어느 경우인지부터 판단하세요.

상황 A — 내 컴퓨터에서만 돌리는 코드

파이썬 스크립트, 자동화 도구, 클로드 코드로 만든 로컬 프로그램. 배포하지 않는다면 .env 파일이면 충분합니다.

# .env 파일 (프로젝트 폴더 안)
ANTHROPIC_API_KEY=sk-ant-여기에실제키

# .gitignore 파일 — 반드시 같이 만드세요
.env
.env.local

파이썬에서는 이렇게 읽습니다.

from dotenv import load_dotenv
import os

load_dotenv()
api_key = os.getenv("ANTHROPIC_API_KEY")

순서가 중요합니다. .gitignore를 먼저 만들고 .env를 만드세요. 반대로 하면 첫 커밋에 .env가 딸려 올라갑니다.

상황 B — 서버가 있는 웹사이트

넥스트, 버셀, 넷리파이 함수 등 서버에서 실행되는 코드가 있다면 그쪽에 키를 두면 됩니다. 호스팅 대시보드의 환경변수 설정에 넣고, 서버 코드에서 꺼내 씁니다.

단 접두사를 조심하세요. NEXT_PUBLIC_이나 VITE_가 붙은 변수는 브라우저로 내보내지는 값입니다. 이름 그대로 public입니다. 비밀 값에는 접두사를 붙이지 않습니다.

상황 C — 깃허브 페이지 같은 정적 사이트

여기가 진짜 문제입니다. 정적 호스팅에는 서버에서 실행되는 코드가 아예 없습니다. 그러니까 키를 둘 자리 자체가 없습니다.

해결책은 하나입니다. 키를 대신 들고 있어줄 아주 작은 서버를 하나 두는 것. 이걸 중계 서버 또는 프록시라고 부릅니다. 클라우드플레어 워커가 이 용도로 가장 쉽고, 소규모라면 무료로 충분합니다.

04 클라우드플레어 워커로 감추기

1. 워커 만들기

클라우드플레어 대시보드 › Workers & Pages › Create에서 새 워커를 만듭니다. 이름은 ai-proxy처럼 알아보기 쉽게 짓습니다.

2. 키를 시크릿으로 넣기

워커 설정 › Variables and Secrets에서 Secret 타입으로 추가합니다. 이름은 ANTHROPIC_API_KEY.

여기서 일반 변수가 아니라 시크릿으로 넣는 게 핵심입니다. 시크릿은 암호화되어 저장되고, 저장한 뒤에는 대시보드에서도 값을 다시 볼 수 없습니다. 코드 안에는 키가 한 글자도 등장하지 않습니다.

터미널을 선호한다면 이 명령 하나입니다.

npx wrangler secret put ANTHROPIC_API_KEY

3. 중계 코드 작성

아래 코드를 그대로 쓰시고 ALLOWED의 주소만 본인 도메인으로 바꾸세요.

export default {
  async fetch(request, env) {
    const ALLOWED = "https://focusaiedu.com";

    // 브라우저의 사전 확인 요청 처리
    if (request.method === "OPTIONS") {
      return new Response(null, { headers: cors(ALLOWED) });
    }
    if (request.method !== "POST") {
      return json({ error: "POST만 허용" }, 405, ALLOWED);
    }

    // 1. 내 사이트에서 온 요청인지 확인
    const origin = request.headers.get("Origin");
    if (origin !== ALLOWED) {
      return json({ error: "허용되지 않은 출처" }, 403, ALLOWED);
    }

    // 2. 사용자 입력은 길이만 받고, 나머지는 서버가 정한다
    const body = await request.json().catch(() => null);
    const text = (body?.text || "").slice(0, 2000);
    if (!text) return json({ error: "text 필요" }, 400, ALLOWED);

    // 3. 키는 시크릿에서 꺼내 쓴다. 코드에 값이 없다
    const res = await fetch("https://api.anthropic.com/v1/messages", {
      method: "POST",
      headers: {
        "content-type": "application/json",
        "x-api-key": env.ANTHROPIC_API_KEY,
        "anthropic-version": "2023-06-01",
      },
      body: JSON.stringify({
        model: "claude-sonnet-4-5",
        max_tokens: 500,
        system: "너는 한국어로 답하는 도우미다.",
        messages: [{ role: "user", content: text }],
      }),
    });

    if (!res.ok) return json({ error: "요청 실패" }, 502, ALLOWED);

    // 4. 필요한 것만 돌려준다
    const data = await res.json();
    const reply = data.content?.map(b => b.text || "").join("") || "";
    return json({ reply }, 200, ALLOWED);
  },
};

function cors(origin) {
  return {
    "Access-Control-Allow-Origin": origin,
    "Access-Control-Allow-Methods": "POST, OPTIONS",
    "Access-Control-Allow-Headers": "content-type",
  };
}
function json(obj, status, origin) {
  return new Response(JSON.stringify(obj), {
    status,
    headers: { "content-type": "application/json", ...cors(origin) },
  });
}

4. 프런트엔드에서 부르기

이제 웹페이지 쪽 코드에는 키가 없습니다. 워커 주소만 있습니다.

const res = await fetch("https://ai-proxy.내계정.workers.dev", {
  method: "POST",
  headers: { "content-type": "application/json" },
  body: JSON.stringify({ text: 사용자입력 }),
});
const { reply } = await res.json();

이 코드가 막고 있는 것들

단순 중계만 하면 워커 주소를 알아낸 사람이 무한정 쓸 수 있습니다. 위 코드에는 네 가지 제한이 들어 있습니다.

• 출처 확인 — 내 도메인에서 온 요청만 처리합니다. 남의 사이트에 붙여 쓰는 걸 막습니다
• 모델과 시스템 프롬프트 고정 — 사용자가 바꿀 수 없게 워커 안에 박아둡니다. 내 서비스를 범용 챗봇으로 쓰지 못하게 하는 장치입니다
• 입력 길이 제한 — 긴 글을 밀어 넣어 비용을 키우는 걸 막습니다
• max_tokens 상한 — 응답 길이에 천장을 둡니다

완벽한 차단은 아닙니다. 출처 정보는 위조할 수 있어서 마음먹은 사람은 우회합니다. 하지만 키 자체가 유출되는 것과는 피해 규모가 완전히 다릅니다. 키가 새면 무제한이지만, 워커가 남용되면 제한된 범위 안에서만 소모되고 워커 주소를 바꾸면 즉시 끊깁니다.

본격적으로 운영한다면 IP당 호출 횟수 제한과 결제 상한을 추가로 걸어두세요.

05 이미 노출됐다면

순서가 중요합니다. 코드 고치기부터 하면 그 사이에 계속 쓰입니다.

1. 키부터 폐기합니다. 콘솔의 API keys 페이지에서 해당 키를 삭제하세요. 폐기된 키는 어디에 남아 있든 무용지물이 됩니다
2. 새 키를 발급해서 워커 시크릿이나 .env 등 안전한 자리에만 넣습니다
3. 코드를 고칩니다. 이제 키가 코드에서 완전히 사라져야 합니다
4. 사용 내역과 로그를 확인해 낯선 호출이 있었는지 봅니다
5. 결제 상한을 점검합니다. 다음에 또 새더라도 손실이 한 선에서 멈춥니다

한눈에 보는 판단표

표가 잘리면 좌우로 밀어서 보세요

판단 기준은 하나입니다. 이 값이 방문자의 브라우저까지 내려가는가. 내려간다면 위험, 서버에서 멈춘다면 안전입니다.

정리

• 브라우저로 내려가는 파일에 든 값은 전부 공개된 것. 난독화도 소용없음
• 사람이 안 봐도 자동 수집 프로그램이 먼저 찾음. 방문자 수와 무관
• .gitignore를 .env보다 먼저 만들기
• VITE_ · NEXT_PUBLIC_ 접두사는 브라우저로 내보내라는 뜻. 비밀 값에 금지
• 지우고 다시 커밋해도 이력에 남음. 이력 정리보다 폐기가 먼저
• 정적 사이트에서 AI를 붙이려면 클라우드플레어 워커 같은 중계 서버가 답
• 중계 서버에는 출처 확인·프롬프트 고정·길이 제한·결제 상한을 함께 걸기

수업에서 이 부분을 항상 따로 떼어 다루는 이유가 있습니다. 만드는 건 클로드가 대신 해주지만, 그 결과물이 안전한지 판단하는 건 만든 사람만 할 수 있기 때문입니다. 기준은 딱 하나만 기억하면 됩니다. 이 값이 브라우저까지 내려가는가.

자주 묻는 질문