웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

브라우저 쿠키 사이즈 에러 400 이슈 해결하기

Last Modified : 2021-01-26 / Created : 2021-01-26
4,886
View Count

웹브라우저를 사용하는 경우 쿠키 사이즈 관련 에러(Cookie size large)가 발생할 수 있습니다. 이 경우 어떻게 해결할 수 있는지 알아봅니다.



# 쿠키 사이즈 에러 해결하기


브라우저의 쿠키 에러는 브라우저 창에 에러 메시지로 확인이 가능합니다. 보시는 것처럼 400 에러가 발생하고 나타나는 메시지는 '페이지가 작동하지 않습니다.'입니다. 그렇다면 언제 그리고 왜 이런 에러가 발생할까요? 바로 쿠키 사이즈가 너무 큰 경우가 여기에 해당합니다.

사용자의 쿠키(Cookie) 정보는 브라우저에 저장되며 웹사이트에 요청 보낼 경우 헤더에 담겨 전송됩니다. 이때 제한된 크기를 가지고 있는데 결국 통신에 사용된 Header의 크기... 즉 포함된 Cookie 사이즈가 너무 커서 발생하게 됩니다. (전송 가능한 cookie의 최대 크기는 브라우저 마다 다르며 일반적으로 4096byte를 초과할 경우 에러가 나타납니다.)

스크린샷) 쿠키 사이즈가 큰 경우 발생하는 브라우저 에러


! 쿠키 이슈 재생성 방법


쿠키 이슈는 처음에는 발생하지 않으나 주로 사용하면서 발생하는 경우가 많습니다. 즉 계속해서 쿠키가 쌓이면서 결국 에러가 나타나는 것이죠.

@ 해결 방안은?
가장 빠른 해결방법은 바로 사용자(User)단에서 쿠키를 완전히 삭제하고 사용하는 방법입니다. 즉 브라우저의 설정으로 이동하여 브라우저의 캐시 및 쿠키 비우기를 사용하는 것이죠. 이 방법은 기존의 모든 쿠키를 제거하기 때문에 가장 쉽게 사용할 수 있습니다.

하지만 근본적인 원인 파악도 필요합니다. 즉 이런 쿠키 문제가 특정 사이트에서 반복되는 경우라면 해당 웹사이트에 과도한 쿠키 사용이 되고 있지 않은가를 살펴보고 불필요한 쿠키 정보는 삭제하거나 변경해야 할 필요가 있습니다. 최근에는 로컬 저장소로 Cookie 사용보다는 localStorage, sessionStorage 등을 사용하기 때문에 캐쉬나 기타 저장소의 사용 목적이 이와 같은 다른 저장소 API로 변경하는 것이 좋겠습니다.

개발 측면에서 해결 가능한 방법 및 자세한 내용은 아래에 따로 명시하였습니다.


# 추가정보. AWS Cognito 관련 쿠키 이슈


만약 인증 관련 서비스로 AWS가 제공하는 Cognito를 사용하는 경우 쿠키 문제가 발생하는 경우가 많습니다. 그 이유 중 하나로 Cognito의 쿠키 사이즈가 꽤 크기 때문입니다. 그런데 기존의 쿠키 정보를 가진 상태에서 다른 사용자로 로그인 하려고 하면 제한된 쿠키 사이즈를 넘게되어 문제가 나타나게 됩니다.

이 이슈는 관련 글들을 쉽게 찾을 수 있는데 의외로 명확한 해결방법은 찾기 어렵습니다.


@ Cognito 쿠키 이슈를 해결하기 위한 방안
몇 가지 해결방법이 있는데 첫 번째 방법은 커스텀 토큰을 생성하여 사용하는 방법입니다.
이 방법은 AWS의 권장 방법입니다.(AWS Support 참조) 즉, 간략하게 설명하면 람다 등을 사용하여 간단한 사용자 인증 토큰을 커스텀하게 만들어 사용하는 것입니다.

기존의 Cognito 토큰은 꽤 많은 정보를 담고 있는데 단순 인증 목적이 아니라면 필요하지 않겠죠... 그러므로 필요하지 않은 내용을 줄여 새로운 토큰 인증을 만들어 사용하는 것이 방법입니다. 다만 토큰 서비스를 새롭게 구현해야 하므로 시간과 노력이 꽤 필요합니다.

다른 방법으로는 가장 쉽게 접근할 수 있는 방법입니다. 즉 로그인 시도시 기존의 모든 쿠키 정보를 삭제한 후에 로그인 프로세스가 진행되도록 하는 방법입니다. 개인적으로 이 방법이 간단하고 쉬운 현실적인 타협이 아닐까 생각됩니다.

중요한 부분은 실제 로그인 버튼을 클릭하기 이 전에 정보를 삭제하면 안 되므로 반드시 클릭한 이 후에 기존 쿠키를 삭제하는 과정이 필요합니다. 즉 로그인 시도가 이루어지기 전에 불필요한 쿠키 정보를 삭제하는 과정을 추가하는 과정으로 해결하는 것입니다.


여기까지 쿠키 사이즈 관련 이슈와 간략한 Cognito 쿠키 문제에 대하여 알아보았습니다.

Previous

웹사이트에 카카오 공유하기 버튼 연동 및 개발 방법 알아보기

Previous

[CORS] Cross Origin Resource Sharing 이해하기, 에러 및 처리 방법