네트워크창에서 API Key를 감추고 싶습니다.

안녕하세요 튜터님,

일전에 마커 클러스터링에 관해 질문했던 수강생입니다.

먼저 튜터님의 강의로 제 사이드 프로젝트가 잘 마무리 됬다는 것을 알려드리고 싶어
아래 도메인도 공유 드리고 싶습니다.

https://www.by-zip.com/

튜터님이 가르쳐 주신 내용을 적극 활용했으니 피드백도 주시면 더욱 감사드리겠습니다 !

https://forms.gle/rKAjAws43XLUAJsA9

(사실 8,9,10 까지 피드백 주시면 스타벅스 기프티콘도 1장씩 드리고 있습니다ㅋㅋ)

아무튼... 본론으로 들어가서 ..

현재 저의 문제 상황은

네트워크 창에서 아래 이미지와 같이 키값이 노출된다는 문제 입니다.

저희는 실제 서비스를 목표로 하고 있어서

키값이 노출되는건 반갑지 않은 상황이라서요 ..

그래서 제가 시도했던 방법은

next.config.js 에서 rewrite() 를 적용해보는 것이였습니다.

위 그림과 같이 시도해보았으나. API 인증에 실패했습니다.

encode url component 로 시도해 보았지만 결과는 실패였습니다..
어떻게하면 좋을지 답을 찾기가 힘들어 문의드립니다..

좋은 강의 만들어주시어 감사드립니다.

헉 벌써 Next.js로 사이드 프로젝트를 하셨다니...! 잘 들어주셔서 감사합니다.

작성해주신 상황만으로 정확히 어떤 상황인지는 모르겠지만, API를 호출할 때 parameter로 넘어가는 key값을 노출하고 싶지 않다는 질문으로 해석하고 답변드리겠습니다.

key값을 감추기위해서는 API Routes를 사용해야합니다. 제가 사이드 프로젝트를 할 때 사용한 방식을 아래에 설명해보겠습니다.

1. 말씀하신대로 rewrites를 사용하여 config를 수정해줍니다.

async rewrites() {
    return [
      {
        destination: 'https://naveropenapi.apigw.ntruss.com/:path*',
        source: '/test/:path*',
      },
    ];
  },

이 때, 뒤에 나오는 경로가 복잡하기 때문에 wildcard(*)를 사용했습니다. (공식 문서: https://nextjs.org/docs/api-reference/next.config.js/rewrites#wildcard-path-matching)

2. API Routes 안에 key를 숨깁니다.(불필요한 부분은 '...' 처리하였습니다.)
(경로: pages/api/map-direction)

export default async function handler(req, res) {
  ...
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_URL}/test/map-direction/v1/...`,     {
        headers: {
          'X-NCP-APIGW-API-KEY-ID': process.env.NEXT_NCP_CLIENT_ID,
          'X-NCP-APIGW-API-KEY': process.env.NEXT_NCP_CLIENT_SECRET,
        },
      },
    );
  ...
  res.status(200).json({ ... });
}

ncp secret key값을 API Routes안에 넣음으로써 사용자에게 key값을 보여주지 않게됩니다.

3. 이렇게 생성한 API를 클라이언트 코드에서 호출하면 됩니다.
(경로: pages/index)

const response = await fetch(`/api/map-direction...`);

아마 비슷한 과정을 거치셨을 것 같은데, rewrites의 source와 destination이 잘못 되어있을 확률이 높습니다.
1번의 wildcard(*)을 넣어 보거나 다른 문자열로 다시 시도해보시면 좋을 것 같습니다.
그래도 안되면 다시 질문 부탁드립니다. 감사합니다 :)

인프런 커뮤니티 질문&답변