Next.JS에서 pageProps 보안 이슈.

Next.JS를 사용하신 분들은 아시겠지만, Next.JS에서는 일반 React처럼 하나의 html파일과 부수적인 js파일을 주고, 그 안에서 모든것을 해결하지 않습니다.

 

일반적인 React 사용에서는 사용자 브라우저가 클라이언트 서버에 접속하여 해당 서버에서 브라우저단에서 필요한 html과 js, public 파일 등을 받아오게됩니다.

 

그리고 해당 js파일이 동작하면서 개발자가 지정해놓은 시점 즉, 정보가 필요할 때, api 정보를 제공하는 서버 주소로 요청을 보내 필요한 JSON, 이미지 등의 파일을 요청해 가져오게됩니다.

 

하지만 Next.JS는 좀 다릅니다.

 

Next.JS에서는 리액트처럼 클라이언트 서버에서 한 번 html, js 파일받고 '땡~'이 아니라 지속적으로 사용자 브라우저와 인터랙션을 합니다. 즉 기존 JSP, Thymeleaf처럼 사용자 뷰가 완전히 서버에 종속된 구조 비슷하게 작동을 한다는 것입니다.

 

그러므로 react-router-dom이 쓰이지 않으며 사용자가 요청한 url은 실제로 Next.JS 파일이 배포된 클라이언트 서버에 요청이 가서 해당 url에 맞는 html, js 파일을 가져오게됩니다.

 

그렇다면 Next.JS는 JSP같은 SSR 프레임워크와 무엇이 다른가 묻는다면 Next.JS는 개발자에게 api 정보를 받아오는 시점을 선택할 수 있게해준다는 것입니다. (물론 Next.JS가 배포된 서버는 api 서버와 분리되어있다는것도 차이점이긴합니다.)

 

첫 번째 옵션은 Next.JS서버에서 html을 받은 후, 일반 React의 사용처럼 컴포넌트 Mount 시에 ajax를 요청하는 것이 있습니다.

 

제 프로젝트의 예시입니다. 개발자 도구의 네트워크 탭에서 응답으로 받은 JSON객체 꾸러미들을 확인할 수 있습니다.

 

두 번째는 html을 받기 직전 Next.JS 서버에서 미리 ajax요청을 하여 JSON 객체등의 데이터를 받은 후, 해당 데이터를 html에 선 바인딩하고 후 클라이언트로 전송하는 방법입니다.

 

Next.JS는 일반 리액트나 JSP처럼 사용자 브라우저와 api 서버가 직접 데이터를 주고받는것이 아니라 중간 계층을 하나 더 두고있는것으로 생각하여, 응답으로 받은 정보들이 노출되지않을 것이라고 생각했지만, pageProps라는 이름의 key로 api 서버에서 받아온 모든 JSON 꾸러미들이 브라우저에 그대로 노출되었습니다.

 

하지만 getServerSideProps 함수 내에서 ajax로 정보를 받아와 브라우저에게 노출시키고싶지않은 민감한 정보들을 사전에 삭제할 수 있습니다.

또한 정보를 가져오는데 문제가 있거나 원하지않은 정보를 가져오게 되었을 때, 사진처럼 getServerSideProps 내에서 알맞은 객체를 return 함으로써 직접 원하는 주소로 라우팅이 가능합니다.