생각을 해보게 된 이유

API를 활용한 과제에서 쿼리스트링 파리미터로 apikey를 전달해줘야 되는데 env파일만 활용하면 중요한 값이 노출되는 상황을 방지할 수 있는지 확인해보고 싶었고, 이와 관련한 실험을 하게 되었습니다.

.env 파일을 이용하면 노출이 안되지 않을까?

실험을 해보기 전까지는 일반적으로 .env파일을 통해 중요 값을 노출시키지 않는다고 이해하고 있었기 때문에 고민을 하지 않고 .env파일만 작성해서 활용했었지만, 실험 후에는 생각이 바뀌게 되었습니다.

.env 파일로 노출되면 안되는 값에 대해 저장하였으며,

const fetchMovieData = async () => {
  const moviesResponse = await fetch(
    `https://www.omdbapi.com/?apikey=${process.env.apikey}&s=avengers`
  ).then((res) => res.json());
  console.log(moviesResponse);
};

fetchMovieData();

js파일에서는 omdbapi를 호출하는 간단한 코드를 작성해보았습니다.

env파일을 통해 중요 값이 노출되지 않는다고 생각한다면 "노출되어도 process.env.apikey로 노출이 되지 않을까?" 라는 예상을 할 수 있을 것 같습니다.

그러나, 실제로 개발서버를 통해 확인해보면...

apikey=... 으로 해당 값이 그대로 노출되는 것을 확인할 수 있습니다.

이를 통해서 저는 IDE 상의 코드 작성한 곳에서는 process.env.apikey로 보이기 때문에 노출되는 것을 피할 수 있지만, 실제 필요한 상황에서는 해당 데이터(값)를 이용하기 때문에 발생할 수 있는 현상이라고 생각하게 되었습니다.

물론, 쿼리 파라미터외에도 request header에 어떤 값이 있다면 네트워크 탭을 통해 확인이 가능해서 이와 관련한 고민도 필요하다고 생각합니다.
(그래서 API 플랫폼에서 허용하도록 설정한 주소외에 모든 요청은 응답하지 않는 것과 CORS, JWT과 같은 방법이 등장했다고 생각합니다.)

최대한 중요값을 보호할 수 있는 방법이 있을까?

그럼에도 불구하고 .env은 여전히 중요 값을 보호하기 위해서는 활용해야 되는 파일이라고 생각합니다. 다만, 추가적인 방법을 통해 이를 보호할 수 있는 방법이 무엇이 있을까요?

제 나름대로 생각한 방법은 서버를 이용하는 것입니다.

  • 서버를 통해 통신하면 적어도 프론트엔드 측에서 먼저 확인되는 주소는 서버와의 요청을 위해 필요한 주소이다.
  • 서버는 내부 비즈니스 로직에서 중요값을 활용해 외부 API와 통신하거나 다른 방법으로 응답할 데이터를 생성하고 전송해준다.
  • 서버가 노출된다면 중요값을 보호할 수는 없겠으나, 적어도 프론트엔드 측에서 주소로 드러나는 일은 막을 수 있다

vercel serverless function을 이용해서 제가 구현한 서버에서 사용하는 movies 데이터 요청 rest api 주소 형식은 /api/v1/movies?searchKeyword=avengers&year=2022&page=1 과 같으며, 서버는 해당 쿼리 파라미터를 실제 사용할 파라미터로 변환해서 omdbAPI서버로 요청, 그 결과를 응답하는 구조입니다.

실제로 작성해서 개발서버로 확인한 결과는 아래와 같습니다.

과정은 아래와 같습니다.
1. (화면에서는 잘려서 보이지 않지만) avengers 라는 키워드를 입력하고 검색을 진행
2. server에서는 자체 로직에서 process.env.apikey라는 환경변수 값을 이용해서 omdbAPI와 통신을 하고 { status, payload, message } 형식으로 응답을 내려줌

즉, 서버로 요청하는 restAPI 주소에서 민감한 정보는 가급적 받지 않도록 설계하였고, 이를 통해 얻게된 결과입니다.

이를 통해 저는

env파일을 통해 IDE상에서의 노출은 피할수 있지만, 실제 값을 이용하는 상황에서 노출될 수 있다. 이를 보완하기 위한 방법은 여러가지가 있지만 서버를 활용하는 방법도 있을 수 있다.

라는 결론을 내리게 되었습니다.

마무리 지으며

.env파일을 보완하기 위한 다양한 방법들이 있는 것 같지만, 그 중에서 필요한 경우 직접 서버를 개발해서 사용해볼 수 있는 방법도 있을 것 같아 시도해보았고 과정을 공유하고 싶은 마음에서 글을 작성하게 되었습니다.

제가 생각한 방법이 틀릴 수도 있기 때문에, 이와 관련한 의견이 있으실경우 의견 남겨주시면 감사할 것 같습니다.

vercel serverless function을 활용해서 개발할 때는 이상이 없었으나, (깃헙 연동등의 방법을 통해) 배포하면 에러가 발생하는 상황을 해결하는 과정도 있었지만 그것은 이후 기회가 된다면 글을 작성해보도록 하겠습니다.

profile
$ npm run dev:ryan

0개의 댓글