🔑 클라이언트 코드에 민감한 API 키 직접 노출: 보안 침해와 서비스 남용의 지름길

Why Wrong?

How to Fix?

// src/config.js (민감한 API 키를 직접 포함)
export const GOOGLE_MAPS_API_KEY = "AIzaSy_YOUR_SUPER_SECRET_GOOGLE_MAPS_KEY_XYZ123";
export const STRIPE_SECRET_KEY = "sk_test_YOUR_STRIPE_SECRET_KEY_ABC456"; // 절대 공개되면 안 되는 비밀 키!

// src/App.js
import { GOOGLE_MAPS_API_KEY, STRIPE_SECRET_KEY } from './config';

function App() {
  // 클라이언트에서 민감한 키를 직접 사용하는 코드 (매우 위험)
  // Google Maps API Key를 사용하여 지도 로드
  // Stripe 결제 연동 (서버 측에서 처리해야 할 secret key를 클라이언트에서 사용)
  console.log("Google Maps API Key:", GOOGLE_MAPS_API_KEY);
  console.log("Stripe Secret Key:", STRIPE_SECRET_KEY); // 이 키는 절대 클라이언트에 있으면 안 됩니다!

  return (
    <div>
      <p>Your map or payment integration here</p>
    </div>
  );
}

// 방법 1: 환경 변수를 통한 빌드 시 주입 (공개 키에 한함, Vite.js 예시)
// 1. .env 파일 (프로젝트 루트 디렉토리)
//    VITE_APP_GOOGLE_MAPS_API_KEY="AIzaSy_YOUR_GOOGLE_MAPS_PUBLIC_KEY_XYZ123"
//    (참고: VITE_ 접두사는 Vite가 클라이언트 번들에 노출할 환경 변수를 식별하는 방법입니다)

// 2. src/App.js
function App() {
  // 공개용 API 키 (예: 지도 API, 클라이언트 전용 분석 툴 키 등)
  // 해당 서비스에서 제공하는 도메인/IP 제한 등 보안 조치 필수!
  const googleMapsApiKey = import.meta.env.VITE_APP_GOOGLE_MAPS_API_KEY;

  console.log("Google Maps API Key (Public):");

  return (
    <div>
      <p>Using environment variables for public keys.</p>
    </div>
  );
}

// 방법 2: 백엔드 프록시 서버를 통한 안전한 관리 (권장, 민감한 비밀 키에 필수)
// 1. 프론트엔드 코드: src/api.js
async function processPayment(paymentDetails) {
  // 클라이언트는 민감한 Stripe Secret Key를 직접 사용하지 않고,
  // 백엔드 프록시 서버의 엔드포인트로 결제 요청을 보냅니다.
  const response = await fetch('/api/process-payment', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(paymentDetails),
  });
  if (!response.ok) {
    throw new Error('Payment failed');
  }
  return response.json();
}

// 2. 백엔드 (Node.js + Express 예시)
// server.js
// require('dotenv').config(); // .env 파일에서 환경 변수 로드
// const express = require('express');
// const app = express();
// const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY); // 서버에서 환경 변수로 안전하게 관리

// app.use(express.json());

// app.post('/api/process-payment', async (req, res) => {
//   const { amount, tokenId } = req.body;
//   try {
//     const charge = await stripe.charges.create({
//       amount,
//       currency: 'usd',
//       source: tokenId,
//       description: 'Example Charge',
//     });
//     res.json({ success: true, charge });
//   } catch (error) {
//     console.error('Stripe error:', error);
//     res.status(500).json({ message: 'Payment processing failed', error: error.message });
//   }
// });

// app.listen(3000, () => console.log('Proxy server listening on port 3000'));

You Might Also Like