이번 글에서는 캘린더 웹 애플리케이션 "피플(Piece-Plan)" 프로젝트를 배포하기 전에 여러 가지 예외 상황을 테스트해보면서 발견했던 이슈를 소개하고자 한다.
🔥 문제 상황
문제는 바로 회원가입 시 사용자가 닉네임을 입력하는 과정에서 발생했다. 사용자가 닉네임을 입력할 때 <h2>닉네임</h2>과 같은 방식으로 HTML 태그처럼 닉네임을 입력하면 정말 웃프게도 아래의 사진과 같은 결과로 렌더링이 되는 것이었다.
이 문제를 마주했을 때는 짜증이 나기보다도 너무 어이가 없어서 팀원들과 공유하면서 다 함께 깔깔 웃었던 기억이 난다. 빡센 프로젝트 과정 중 잠깐 웃을 수 있는 이슈였다. (아니면 그냥 다들 힘들어서 미쳐 있었던 것일지도..)
🔨 해결 과정
여튼 문제를 해결하기 위해 Sanitization 관련 라이브러리인 DOMPurify를 사용할 수도 있지만, 이 프로젝트에서는 회원가입 시 수행하는 닉네임 유효성 검사 로직을 아래와 같은 방식으로 더욱 강화하여 간단하게 해결했다.
username: {
get valid() {
// 특수문자 포함 여부를 판단
return /[\w]+/g.test(value);
},
},🤔 느낀 점
DOM과 관련하여, 특히 innerHTML 관련해서 공부할 때 HTML5 버전을 지원하지 않는 구형 브라우저에서는 스크립팅 공격 위험이 있는 등 보안에 취약하기 때문에 따로 Sanitization 과정을 거칠 필요가 있다고 한 부분이 기억에 남았는데, 무엇 때문에 중요한지는 경험해본 적이 없었기 때문에 전혀 체감하지 못했었다. 그런데 확실히 실제 사례를 몸소 체험하고 나니 Sanitization의 중요성을 여실히 느낄 수 있었다.
𝙸'𝚖 𝚊 𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 𝚝𝚛𝚢𝚒𝚗𝚐 𝚝𝚘 𝚜𝚝𝚞𝚍𝚢 𝚊𝚕𝚠𝚊𝚢𝚜. 🤔