跳到正文
DEV Community· Tobias Hoffmann·· 2 小時前AI 評分68

如何在兩分鐘內檢查 OpenAI、Claude 或 Gemini API 金鑰是否在瀏覽器中曝光

API Anahtarınız Tarayıcıda mı Açığa Çıktı? OpenAI, Claude veya Gemini Anahtarınızı 2 Dakikada Kontrol Edin

AI 導讀

OpenAI、Claude 或 Gemini API 金鑰可透過檢查瀏覽器網絡請求、已載入腳本及環境變數前綴,在兩分鐘內排查是否曝光。若金鑰已曝光,指南建議先建立新金鑰並部署至伺服器端,再撤銷舊金鑰,並以具身份驗證及用戶速率限制的伺服器路由取代瀏覽器直連。文中亦示範以 Apidog CLI 測試未登入請求是否回傳 401、回應有否洩漏金鑰字串,以及超出速率限制時是否回傳 429。

正文

API Anahtarınız Tarayıcıda mı Açığa Çıktı? OpenAI, Claude veya Gemini Anahtarınızı 2 Dakikada Kontrol Edin

Web uygulamanız OpenAI, Claude veya Gemini'yi doğrudan tarayıcıdan çağırıyorsa, API anahtarınız tarayıcıda açığa çıkar ve DevTools'u açan herkes onu kopyalayabilir. Bunu 2 dakikada doğrulayabilirsiniz: Ağ sekmesini açın, bir AI isteği gönderin ve sağlayıcıya giden bir Authorization, x-api-key veya x-goog-api-key başlığı olup olmadığına bakın. Anahtarınızı orada görürseniz, bugün değiştirin ve çağrıyı bir sunucu rotasının arkasına taşıyın.

Bugün Apidog'u deneyin

Aşağıda: kontrol, düzeltme sırası ve kodlama aracınızın düzeltilen rotayı nasıl test edebileceği.

Tarayıcıda açığa çıkan bir API anahtarı neden sorundur

Tarayıcıda açığa çıkan bir API anahtarı, ön uç kodunuzun veya ağ trafiğinizin içinde taşınan ve her ziyaretçinin okuyabileceği bir sırdır. Tarayıcı anahtarı gönderirse, kullanıcı onu kopyalayabilir ve sağlayıcıyı sizin faturanıza çağırabilir.

Google'ın Gemini API anahtarı kılavuzu, "API anahtarlarını doğrudan web veya mobil uygulamalarda sabit kodlamayın" der çünkü "İstemci tarafı koduna derlenen anahtarlar kullanıcılar tarafından çıkarılabilir" ve "gerçek API çağrılarını yapmak için bir arka uç proxy sunucusu çalıştırın" talimatını verir. OpenAI'ın API anahtarı güvenliği kılavuzu da aynı kuralı verir: istekleri, anahtarı istemciye dağıtmak yerine kendi arka ucunuz üzerinden yönlendirin.

openai-node README, "gizli API kimlik bilgilerinizi ifşa etmemek için" tarayıcı desteğinin varsayılan olarak devre dışı olduğunu ve etkinleştirmek için dangerouslyAllowBrowser: true ayarlamanız gerektiğini söyler. Anthropic'in TypeScript SDK'sı da aynı seçenek adını kullanır ve API'si yalnızca istek anthropic-dangerous-direct-browser-access: true başlığını taşıdığında tarayıcı (CORS) çağrılarını kabul eder; Simon Willison bunu belgelemiştir.

Bu model, AI uygulama oluşturucuları ve kodlama ajanlarıyla hızlı bir şekilde oluşturulan uygulamalarda yaygındır: en kısa çalışma yolu, anahtarın VITE_ veya NEXT_PUBLIC_ değişkeninde olduğu bir React bileşeninden fetch yapmaktır. Çalınan anahtarlar daha sonra toplu çıkarım için yeniden satılır; çalınan AI API anahtarları ve LLMjacking hakkındaki yazımızda ele alındığı gibi ve bunu faturanızda fark edersiniz.

API anahtarınızın açığa çıkıp çıkmadığını nasıl kontrol edersiniz (2 dakika)

Three-step infographic of the 2-minute key exposure check: 1 Network tab with a POST request highlighted, 2 search the JavaScript bundle for sk- and AIza, 3 check env vars prefixed NEXT_PUBLIC_ or VITE_

Bu kontrolleri localhost'ta değil, üretim ortamında çalıştırın.

  1. Ağ sekmesini izleyin (45 saniye). Sitenizi açın, F12'ye basın (Mac'te Cmd+Option+I), Ağ sekmesini seçin ve bir sohbet mesajı göndermek gibi bir AI özelliğini tetikleyin. openai, anthropic veya googleapis ile filtreleyin. Herhangi bir istek doğrudan api.openai.com, api.anthropic.com veya generativelanguage.googleapis.com adresine gidiyorsa, üzerine tıklayın ve Başlıklar'ı açın. [REDACTED CREDENTIAL],x-api-key,x-goog-api-keyveya bir?key=` sorgu parametresinde bir anahtar varsa, bu açığa çıktığı anlamına gelir.
  2. Paketi arayın (45 saniye). DevTools'ta, yüklenen tüm betiklerde arama yapmak için Cmd+Option+F (Windows'ta Ctrl+Shift+F) tuşlarına basın. sk-, sk-ant-, AIza ve dangerouslyAllowBrowser için arama yapın. Tarayıcıya sunulan bir .js dosyasındaki herhangi bir eşleşme, henüz hiçbir istek gönderilmemiş olsa bile bir sızıntıdır.
  3. Ortam değişkeni öneklerinizi kontrol edin (30 saniye). .env dosyanızı ve barındırma kontrol panelinizi açın. Derleme araçları bazı değişkenleri tasarım gereği istemci paketine kopyalar: Vite'da VITE_* (bkz. Vite ortam belgeleri), Next.js'de NEXT_PUBLIC_*, Create React App'te REACT_APP_* ve Expo'da EXPO_PUBLIC_*. Bu öneklerden herhangi birinin arkasındaki bir sağlayıcı anahtarı, nasıl adlandırıldığından bağımsız olarak herkese açıktır.

Derleme çıktınızın terminal taraması için:

`bash

from your project root after a production build

grep -rnoE "sk-(proj-|ant-)?[A-Za-z0-9_-]{20,}|AIza[0-9A-Za-z_-]{35}" dist/ build/ .next/static/ 2>/dev/null
grep -rn "dangerouslyAllowBrowser" dist/ build/ .next/static/ 2>/dev/null
`

Boş çıktı bir geçiştir. Google, 28 Mayıs 2026'dan beri oluşturulan yeni AI Studio anahtarlarının, formatı AIza'dan farklı olabilecek "kimlik doğrulama anahtarları" olduğunu söylüyor, bu nedenle pakette generativelanguage.googleapis.com için de arama yapın. Yalnızca tarayıcı kendi alan adınızla (örneğin /api/chat) konuşuyorsa ve hiçbir yerde sağlayıcı ana bilgisayar adı veya anahtar görünmüyorsa geçersiniz.

Anahtarınız açığa çıktığında ne yapmalısınız: düzeltme sırası

Önce döndürmek bugünkü açığı kapatır; mimari değişiklik onu kalıcı olarak kapatır.

Adım Ne yaparsınız Bu sıra neden Süre
1. Anahtarı döndürün Sağlayıcı konsolunda yeni bir anahtar oluşturun, ardından sızan anahtarı iptal edin Eski anahtar zaten kopyalanmış olabilir; iptal etmek kullanımını durduran tek şeydir 5 dk
2. Çağrıyı sunucu tarafına taşıyın Sağlayıcı çağrısını anahtarı tutan bir sunucu rotasına veya edge fonksiyonuna koyun Yeni anahtarın aynı şekilde sızmasını engeller 30 - 60 dk
3. Kimlik doğrulama ve kullanıcı başına hız sınırları ekleyin Rotada bir oturum gerektirin ve kullanıcı başına istekleri sınırlayın Bu olmadan, proxy'niz herkes için ücretsiz bir AI uç noktası haline gelir 30 dk
4. Sağlayıcı harcama limitleri belirleyin Her sağlayıcının faturalandırma ayarlarında bütçeler veya harcama limitleri belirleyin Başka bir şey sızarsa en kötü durum faturasını sınırlar 10 dk
5. CI'da tarayın Çıktı paketinde bir anahtar deseni görünürse derlemeyi başarısız kılın Bir sonraki ajan tarafından yazılan özelliğin düzeltmeyi bozmasını engeller 15 dk

Eski anahtarı iptal etmeden önce yeni anahtarı sunucu tarafına dağıtın, aksi takdirde AI özelliğiniz çalışmaz. API anahtarı döndürme en iyi uygulamaları kılavuzumuz sıfır kesintili döndürmeyi kapsar. 4. adımda, OpenAI'ın anahtar güvenliği rehberi, yalnızca uyarıların trafiği durdurmadığı için sıkı uygulamalı harcama limitleri önerir; bir Google Cloud faturalandırma bütçesi sizi uyarır ancak kullanımı tek başına durdurmaz.

OpenAI, Claude ve Gemini çağrılarını bir sunucu rotasının arkasına nasıl taşırsınız

Diagram comparing an unsafe setup, where the browser holds the API key and calls the AI provider directly while DevTools copies the key, with a safe setup where the browser calls your server route, which holds the key and applies auth, rate limits and a spend cap before calling the provider

Bir arka uç proxy rotası, kullanıcının istemini alan, API anahtarını sunucuda ekleyen, sağlayıcıyı çağıran ve yalnızca yanıtı döndüren küçük bir sunucu uç noktasıdır. Tarayıcı anahtarı asla görmez. İşte OpenAI için minimal bir Next.js rotası; Claude ve Gemini aynı yapıyı izler:

`ts
// app/api/chat/route.ts (runs on the server only)
import OpenAI from "openai";
import { getSession } from "@/lib/auth"; // your auth helper
import { checkRateLimit } from "@/lib/limits"; // your per-user limiter

const client = new OpenAI({ [REDACTED CREDENTIAL] }); // no NEXT_PUBLIC_ prefix

export async function POST(req: Request) {
const session = await getSession(req);
if (!session) return new Response("Unauthorized", { status: 401 });

if (!(await checkRateLimit(session.userId, 20))) { // 20 requests per minute
return new Response("Too many requests", { status: 429 });
}

const { message } = await req.json();
if (typeof message !== "string" || message.length > 4000) {
return new Response("Bad request", { status: 400 });
}

const response = await client.responses.create({
model: process.env.OPENAI_MODEL!, // pin the model server-side
input: message,
});

return Response.json({ reply: response.output_text }); // return the answer, nothing else
}
`

Onu güvenli kılan, sadece gizli değil:

  • Model sunucuda yaşar. Modeli tarayıcı seçerse, saldırgan en pahalı olanı seçer.
  • Girdi sınırlandırılmıştır. Hesabınız üzerinden büyük istemler yok.
  • Yalnızca yanıt geri döner. Ham sağlayıcı yanıtını veya hata nesnesini asla döndürmeyin.
  • Herkese açık önek yok. OPENAI_API_KEY sunucu tarafında kalır; NEXT_PUBLIC_OPENAI_API_KEY her ziyaretçiye gönderilir.

Claude ve Gemini için, SDK'larını ANTHROPIC_API_KEY veya GEMINI_API_KEY ile kullanın. Google'ın web sitesi ve IP kısıtlamaları yardımcı olur, ancak curl'ü olan herkes herhangi bir Referer başlığı gönderebilir, bu yüzden onları ikinci bir katman olarak değerlendirin. Tarayıcı çağrıları için tek adil durum, her kullanıcının kendi anahtarını yapıştırdığı kendi anahtarını getir aracıdır.

Kodlama ajanınızın proxy rotasını Apidog CLI ile test etmesine izin verin

Anahtarı taşımak işin yarısıdır; diğer yarısı, ajanınızın yazdığı bir sonraki özellikten sonra taşındığını kanıtlamaktır. Rotayı oluşturan ajanın Apidog CLI ile test etmesine izin verin. Bir kez kurun:

bash
npm install -g apidog-cli@latest
apidog login --with-token <YOUR_TOKEN>
npx -y skills add https://apidog.com # pick your agent when prompted

Ardından Claude Code, Codex, Cursor veya kullandığınız ajana bir istem verin:

`text
Create Apidog test cases in project for POST /api/chat on our staging
environment that assert:

  1. a request without a session cookie returns 401,
  2. a valid request returns 200 and the body does not contain "sk-", "sk-ant-", "AIza" or "api_key",
  3. the 21st request inside 60 seconds from the same user returns 429. Run them and summarize any failures. `

Ajan şemayı okur, yükünü doğrular, test senaryolarını yazar ve çalıştırır:

bash
apidog test-case category --project <id>
apidog cli-schema get test-case-create
apidog cli-schema validate test-case-create --file case.json
apidog test-case create --project <id> --file case.json
apidog run --test-case <caseId> --project <id> -e <envId> -r cli,json

İkinci doğrulama en önemlisidir: bir sağlayıcı hata nesnesi veya hata ayıklama alanı anahtarınızı istemciye geri yansıtmaya başladığı anda başarısız olur. Aynı apidog run ... -r junit adımını işlem hattınıza koyun, böylece her dağıtım bunu yeniden kontrol eder; Apidog CLI CI/CD kılavuzumuz kurulumu gösterir ve Claude Code'da Apidog CLI ajan tarafını kapsar. Apidog'un Ücretsiz planı 4 kullanıcıya kadar kapsar, böylece küçük bir ekip bunu ücretli bir koltuk olmadan çalıştırabilir.

Aynı sorunun depo tarafı için, tarayıcıya gönderilmek yerine Git'e işlenen anahtarlar, gizli anahtar tarayıcısı ile API anahtarı sızıntısı kontrolü yazımıza bakın. Ajanlarınız müşteri verilerini işleyen araçları çağırıyorsa, AI ajanlarını veri sızıntıları için test etme bir sonraki katmanı kapsar.

Anahtarı açıkta tutan yaygın hatalar

  • Anahtarı Base64 ile kodlamak veya bölmek. Tarayıcı göndermek için onu yeniden oluşturmalıdır, bu yüzden DevTools gerçek değeri gösterir.
  • localStorage veya bir çereze taşımak. Hala istemcide.
  • Kimlik doğrulama olmadan proxy kullanmak. Herkese açık bir /api/chat, faturanızda açık bir AI uç noktasıdır.
  • Eski anahtarı "her ihtimale karşı" saklamak. Bir gün boyunca herkese açık olan bir anahtar kopyalanır.
  • Mobil uygulamayı unutmak. Google'ın kılavuzu "web veya mobil uygulamalar"ı bir nedenden dolayı birlikte adlandırır.

SSS

OpenAI API anahtarımın tarayıcıda açığa çıkıp çıkmadığını nasıl anlarım? DevTools Ağ sekmesi açıkken bir AI özelliğini tetikleyin. api.openai.com adresine Authorization: Bearer [REDACTED]-... başlığıyla yapılan bir istek, açığa çıktığı anlamına gelir. Ayrıca yüklenen betiklerde sk- ve dangerouslyAllowBrowser için arama yapın.

Bir API anahtarını NEXT_PUBLIC_ veya VITE_ ortam değişkenine koymak güvenli mi? Hayır. Bu önekler değerleri istemci paketine kopyalamak için vardır. Bunların altında saklanan herhangi bir sağlayıcı anahtarı her ziyaretçiye gönderilir. Öneksiz, yalnızca sunucuya özel bir değişken kullanın ve onu bir sunucu rotası içinde okuyun.

Bir Gemini API anahtarını web sitemle sınırlamak onu tarayıcıda güvenli yapar mı? Yardımcı olur, ancak tarayıcı dışındaki bir betik herhangi bir Referer başlığı gönderebilir. Google'ın kendi kılavuzu istemci uygulamaları için bir arka uç proxy'si önerir.

Anahtarımın açığa çıktığını buldum. Önce ne yapmalıyım? Yeni bir anahtar oluşturun, sunucu tarafına dağıtın, ardından eskisini iptal edin. Ardından, çağrıyı kullanıcı başına hız sınırları olan kimlik doğrulamalı bir rotanın arkasına taşıyın ve sağlayıcı harcama limitlerini ayarlayın.

Kodlama ajanım bunu benim için düzeltebilir ve test edebilir mi? Evet. Sağlayıcı çağrısını bir sunucu rotasına taşımasını isteyin, ardından Apidog CLI kullanarak oturum olmadan 401, yanıtlarda anahtar deseni olmaması ve hız sınırınızı aşınca 429 olduğunu doğrulayan testler oluşturup çalıştırın.

來源:DEV Community · dev.to