Open API 호출하는 작업을 하다보면
HTTP 헤더에 API 키를 포함하는 방법과 URL 쿼리 파라미터에 API 키를 포함하는 방법을 사용하는데 그 차이를 정확히 파악하고자 정리해보려 합니다.

URL 쿼리 파라미터에 API 키 포함

fetch('https://api.example.com/data?api_key=${process.env.REACT_APP_API_KEY}');

• API 호출이 간단하고 직관적이며, 브라우저에서 직접 URL을 입력하여 API를 호출할 때 유용함.

• 대부분 API가 URL 쿼리 파라미터를 지원하므로 호환성 문제가 적음.

• URL에 API키가 포함되어 있어 브라우저 개발자 도구나 서버 로그에서 쉽게 노출되므로 보안이 취약함

• URL의 길이에 제한이 있어, 긴 API키를 포함할 경우 문제가 발생할 수 있음

HTTP 헤더에 API 키 포함

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${process.env.REACT_APP_API_KEY}`,
  },
});

• 보안적인 측면에서 API 키를 URL에 노출되지 않기 때문에 보안에 유리함.
• API 요청의 인증 정보를 명확하게 구분할 수 있어 서버 측에서 인증 로직을 구현하기 용이함.
• 일부 API는 헤더를 통한 인증을 지원하지 않을 수 있으므로 확인 필요

---

HTTP 인증 방식

• Basic Auth
  • 가장 간단한 형태의 HTTP 인증 방식으로, 클라이언트가 서버에 요청을 보낼 때 HTTP 헤더에 사용자의 아이디와 비밀번호를 Base64로 인코딩해서 전송하는 방식 → Base64 인코딩은 암호화가 아니기 때문에 네트워크에서 쉽게 읽힐 수 있음
    
  • 요청할 때마다 아이디와 비밀번호를 전송해야하므로 보안에 매우 예민하거나 민감한 애플리케이션에서는 적합하지 않으므로 보안이 강화된 환경에서만 사용해야 함
  • 간단한 애플리케이션 에서 사용하는 것이 적합
• Bearer Token
  • OAuth와 같은 인증 서버를 사용하여 엑세스 토큰을 이용해 인증하는 방식
  • 토큰 기반 인증 방식이므로 요청할 때마다 아이디와 비밀번호를 전송할 필요 없음
  • 서버에서만 해석하고 검증할 수 있어 보안성 높아 데이터나 기능을 보호하는데 적합
  • 보안이 중요한 애플리케이션에서 사용하는 것이 적합