자바스크립트 숫자 정밀도로 인한 버그

뷰 템플릿(View template)과 자바스크립트(Javascript, JS)를 함께 쓰다보니..

회사일을 하다가 발견한 이슈다. 보안상 어떤 처리를 하다가 발생했는 지 말할 수는 없지만… 요즘 숫자로 이루어진 키값을 다루고 있었는데, 숫자값이 틀어지는 이슈가 발생했다. 사실 이전까지 깊게 프론트엔드를 해본적이 없어서, 처음보는 버그에 당황하였는데, 여러 테스트를 해본 결과 JS의 숫자 정밀도로 인한 문제였다. (정확히는 JS가 아닌 내 잘못이었다.) 코드를 확인해본 결과 (뷰 템플릿은 thymeleaf 기준) <a href="#" onclick="clickJelly(10206458857935880)">click!</> <!-- th:onclick="'clickJelly(' + ${ numberString } + ');'" --> 위와 같이 구현되어 있었고 아래와 같이 따옴표(Quotation mark)로 감싸서 해결해줬다. <a href="#" onclick="clickJelly('10206458857935880')">click!</> <!-- th:onclick="'clickJelly(**\'' + ${ numberString } + '\'**);'" --> 어떤느낌인지 공유하기 위해 jsfiddle로도 만들어 두었다. js fiddle 보러가기 + Number.MAX_SAFE_INTEGER를 통해 브라우저에서 안전한(?) 정수 최댓값을 구할 수 있다.