[스터디] Nextjs Rewrite가 CORS 에러를 해결할 수 있는 이유

 

안녕하세요. 기깔나는 사람들에서 FrontEnd를 맡고있는 제시ca입니다.

 

백엔드에서 취급하는 데이터를 안전하게 보호하기 위해, 보안취약점 개선작업이 필요한 경우가 있습니다.

💡 [ HTTP 메서드 보안 관련 ]
https://owasp.org/www-project-web-security-testing-guide/latest/4-Web_Application_Security_Testing/02-Configuration_and_Deployment_Management_Testing/06-Test_HTTP_Methods

보안취약점 툴을 이용하거나, 점검을 받게 되어 불필요한 메서드 제한이라는 항목에서 OPTIONS 메서드를 제한했을 때, 프론트에서는 CORS 에러가 발생할 수 있습니다. 

 

그 이유는 Restful API를 사용함에 Content-Type이 application/json으로 설정된 것이 규격사항이면, 브라우저에서 본 요청을 하기 전에 Preflight 요청을 위해 OPTIONS 메서드를 사용하기 때문에 OPTIONS 메서드를 사용할 수 없으면 405 에러를 발생시킵니다. 
관련된 내용은 여기서 확인해주세요.

 

어떻게 하면, 이 CORS 에러를 해결 할 수 있을까요?

이전에 다뤘던 CORS의 simple request 나 Credentialed request로 규격을 변경해서 해결할 수 있습니다. 이 사항들은 요청하는 서버에서 뿐만이 아닌 응답하는 서버에서도 설정 작업이 필요합니다.

클라이언트 서버에서의 수정만으로 해결이 가능한 방법은 어떤것이 있을까요?

Nextjs에서 주로 사용되는 방법은 Rewrite 의 사용입니다.

 

---

Rewrite

Rewrite는 사용하고자하는 타 출처를 가려주는 역할을 합니다.
(공식 사이트 : Rewrites act as a URL proxy and mask the destination path)

 

이 기능은 보안 측면에서도 좋습니다. OPEN API를 사용할 때 필요한 KEY값이나 기타 민감한 정보를 담은 파라미터들을 굳이 노출시키지 않아도 사용이 가능하기 때문입니다.
Nextjs의 Redirect와 기능이 비슷하지만 다른점은 URL 변경사항을 표시하지 않는 것입니다.

 

사용 법은 공식사이트 예제를 확인해보시면 됩니다.

https://github.com/vercel/next.js/tree/canary/examples/rewrites

GitHub - vercel/next.js: The React Framework

 

위의 예제 파일 내용입니다.

 

next.config 파일 내용 중 rewirte 메서드 내의 source 부분 url 형식은 /docs/뒤에 아무 문자를 붙여도 

destination에 설정한 http://example.com/docs/ 뒷부분에 그대로 동일하게 맵핑이 됩니다.

 

설정한 source url(노출되는 url)로 링크를 걸게 되면 아래와 같이 실제 주소가 나오지 않으면서, 

동일한 결과물이 출력되는 것을 볼 수 있습니다.

---

Rewrite에서 Proxy 동작, webpack, 기타 Proxy 설정들이 어떻게 CORS 이슈를 피할 수 있을까요?

프록시 설정은 클라이언트와 서버 사이에 자체 서버를 삽입합니다. 

이 자체 서버는 클라이언트에서 요청을 받고 다른 출처의 서버 API에서 데이터를 가져온 다음 헤더(Access-Control-Allow-Origin)를 사용하여 권한을 부여하고 응답으로 다시 클라이언트로 전달합니다.

자체 서버는 출처가 동일하기 때문에, 브라우저의 요청에서는 CORS 요청을 발생하지 않습니다.

브라우저가 아닌 서버에서 서버로의 다른 출처 요청은 CORS를 발생시키지 않기 때문에, 에러가 발생하지 않게 되는 것입니다.

실제로 요청했을 때, 브라우저의 개발자도구에서 네트워크 부분을 확인해보면, proxy설정 이전의 preflight 요청까지 2번의 요청이 발생했던 것이 설정 후에는 1번으로 완료되는 것을 볼  수 있습니다.

 

프론트엔드 프로젝트에서의 수정으로만 에러 해결이 될 수 있으므로 간단해보이지만, 보안 측면에서는 정책을 회피하는 것이기 때문에 좋지 않은 방법일 수 있습니다. 여러 상황을 고려해서 적절한 방법으로 에러를 해결하는 것이 필요합니다.

---

참고자료

🔗 - https://nextjs.org/docs/api-reference/next.config.js/rewrites

🔗 - https://github.com/vercel/next.js/tree/canary/examples/rewrites