네이버만 안되는 API?
이미지 검색 API를 사용하기 위해 3대장(구글, 네이버, 다음)의 API를 구현하여 비교 해보고 싶었습니다.
그런데 구글과 다음은 잘 되었지만 네이버만 유독 안되는거에요.
뭔가 설정항목이 더 있나 봐도 못찾아서 샘플을 찾아보니 같은 기능을 서버언어로만 예시가 나와있었습니다.
뭐지 이거 설마하고 알아보니 네이버의 CORS 정책에 의한 클라이언트 단의 검색은 안되는 것이였습니다.
즉 서버단에서 API를 호출해야 작동하는것이죠.
백엔드 개발자야 그런 이슈에 익숙할지 모르겠지만 프런트엔드 개발자 입장에서는 API활용을 서버 없이 대부분 다루다보니 처음 겪는 상황입니다.
문제를 파악하고 결국은 서버단 API호출로 해결했지만 이런 설정을 쓰는 이유가 궁금해 정리해 보았습니다.
CORS (Cross-Origin Resource Sharing) 정책
웹 브라우저에서는 보안상의 이유로 다른 도메인으로부터의 API 요청을 차단하는데, 이를 Same-Origin Policy라고 합니다. 이것은 클라이언트에서 직접 API를 호출할 때 문제가 될 수 있습니다.
네이버는 이런 CORS정책을 쓰는 것은 여러 가지 보안 및 관리상의 이유 때문입니다.
- API 키 보호
네이버 이미지검색 API를 클라이언트 측에서 실행하면 API 키가 노출될 수 있습니다. API 키는 웹 애플리케이션의 보안을 위해 비밀로 유지해야 하므로, 클라이언트 측에서 직접 API를 호출하면 API 키가 공개될 위험이 있습니다. 백엔드에서 API를 호출하면 API 키를 안전하게 보호할 수 있습니다. - 보안
클라이언트 측에서 API를 호출하면 API 응답이 노출될 수 있습니다. 중요한 정보가 API 응답에 포함되어 있을 경우 이는 보안 문제로 이어질 수 있습니다. 백엔드에서 API를 호출하면 중요한 정보를 안전하게 처리하고 클라이언트에 필요한 부분만 전달할 수 있습니다. - 사용자 경험
API 호출 및 응답 처리는 백엔드에서 비동기적으로 이루어지므로, 사용자는 더 빠르게 웹페이지를 로드하고 상호 작용할 수 있습니다. 클라이언트에서 API를 호출하면 추가적인 네트워크 지연이 발생할 수 있습니다. - 데이터 정제 및 가공
API 응답 데이터를 필요한 형식으로 가공하거나 정제할 필요가 있을 때, 이를 백엔드에서 처리할 수 있습니다. 이러한 작업을 백엔드에서 수행하면 클라이언트에서의 복잡성을 줄일 수 있습니다. - 프록시 역할
백엔드에서 API 호출을 담당하면, 클라이언트와 외부 API 사이에서 프록시 역할을 하여 보안 및 성능을 최적화할 수 있습니다. 필요한 경우 응답을 캐싱하거나 데이터를 압축하여 네트워크 부하를 줄일 수 있습니다.
이러한 이유들로 인해 네이버 이미지검색 API와 같은 외부 서비스를 사용할 때는 주로 백엔드에서 API 호출 및 응답 처리를 담당하고, 클라이언트는 백엔드로부터 필요한 정보를 안전하게 받아오는 것이 일반적인 접근 방식입니다.
CORS 정책으로 인한 문제해결 방안
서버 측 수정
API를 호스팅하는 서버 측에서 CORS 헤더를 설정하여 특정 도메인에서의 요청을 허용할 수 있습니다. 이를 통해 특정 도메인에서의 요청만 허용하고 다른 도메인에서의 요청을 차단할 수 있습니다.예를 들어, Express.js와 같은 Node.js 기반의 서버에서 CORS 미들웨어를 사용하여 다음과 같이 설정할 수 있습니다.
const express = require('express');
const cors = require('cors');
const app = express();
// 모든 도메인에서의 요청을 허용
app.use(cors());
// 또는 특정 도메인에서의 요청만 허용
// app.use(cors({ origin: 'https://example.com' }));
// API 엔드포인트 및 라우팅 설정
// ...
app.listen(3000, () => {
console.log('서버가 포트 3000에서 실행 중입니다.');
});
JSONP(JSON with Padding) 사용
JSONP는 서버에서 JSON 데이터를 반환하는 대신, JSON 데이터를 JavaScript 함수 호출로 감싸 응답합니다. 이를 통해 브라우저에서 동일 출처 정책을 우회할 수 있습니다. 하지만 JSONP는 보안 측면에서 취약할 수 있으므로 신중하게 사용해야 합니다.
프록시 서버 사용
동일 출처 정책에 영향을 받지 않는 서버에서 API 요청을 받고 클라이언트 측으로 전달하는 프록시 서버를 구축할 수 있습니다. 클라이언트는 프록시 서버에 요청을 보내고, 프록시 서버가 실제 API 서버에 요청을 보내 응답을 클라이언트에게 전달합니다.
CORS 브라우저 확장 프로그램 사용
개발 중에만 사용하는 임시적인 해결책으로, CORS 정책을 브라우저에서 일시적으로 우회할 수 있는 확장 프로그램을 사용할 수 있습니다. 이는 보안 측면에서는 추천되지 않는 방법이므로 실제 운영 환경에서는 사용하지 않아야 합니다.
이러한 방법들 중에서 서버 측 수정과 프록시 서버 사용은 보안적으로 더 안전하며, 장기적으로 안정적인 솔루션을 제공할 수 있습니다.
결론
네이버 API를 클라이언트에서 사용할 때 발생할 수 있는 다양한 문제들을 이해하고, 적절한 해결책을 찾는 것이 중요합니다.
올바른 권한 설정, 프록시 서버의 활용, API 버전 확인 등을 통해 이러한 문제들을 극복할 수 있습니다.
저는 네이버가 제시하고 있는 샘플 기준에 따라 PHP에서 실행되는 형태로 문제를 해결했습니다.
자주 묻는 질문 (FAQs)
Q1. 네이버 API를 클라이언트에서 사용하려면 어떤 권한이 필요한가요?
네이버 개발자 포털에서 프로젝트를 등록하고 필요한 API 권한을 설정해야 합니다.
Q2. 클라이언트에서 API를 호출하면 브라우저에서 CORS 에러가 발생합니다. 어떻게 해결할 수 있을까요?
백엔드에 프록시 서버를 설정하여 API 요청을 백엔드에서 처리하도록 하세요.
Q3. API의 버전 호환성을 어떻게 확인할 수 있나요?
네이버 API의 공식 문서에서 각 버전의 호환성 정보를 확인할 수 있습니다.
Q4. 클라이언트에서 API 요청 시 발생하는 에러를 해결하는 데 어떤 툴이 유용할까요?
API 요청과 응답을 디버깅하기 위해 Postman과 같은 API 테스트 도구를 사용할 수 있습니다.
Q5. 네이버 API 사용 관련하여 더 궁금한 점이 있을 때 어떻게 도움을 받을 수 있을까요?
네이버의 개발자 지원 팀에 문의하여 도움을 받을 수 있습니다.