Cross-Site Scriptiong의 약어는 CSS로 되어야 하지만
Cascading Style SheetsCSS가 널리 사용되고 있어서 XSS로 명명되었다고 한다!
XSS를 번역해보면
1. Cross-Site: 사이트간
2. Scriptiong: 스크립팅, 스크립트 실행
즉, 사이트에서 입력된 스크립트가 다른 사이트의 문백에서 실행되는 것을 말한다.
XSS를 유발하는 여러가지 방법이 있는데 그 중 Stored XSS를 알아보자
Stored XSS는 저장형 XSS으로 공격자가 악성 스크립트를 앱의 데이터베이스에 저장하여 사용자가 해당 데이터가 저장된 탭을 조회할 때 서버에 저장된 악성 스크립트가 실행되는 것이다.
대략적인 흐름은 아래와 같다.
1. 공격자가 악성 스크립트가 포함된 정보 저장
2. 사용자가 악성 스크립트가 포함 된 사이트 조회
3. 악성 스크립트 실행
Stored XSS의 주된 케이스는 사이트 게시판이나 댓글, 닉네임 등에 스크립트를 저장하는 것이다.
예를 들면, 아래와 같이 게시판의 내용에 <img src ="x"로 저장했다. << 🫠 서비스의 DB에 해당 악성 스크립트가 저장된다!
"x"로 된 이미지는 없기에 onerror 핸들러가 무조건 호출될 것이고, 해당 게시판 또는 게시판이 포함된 목록을 조회할 때마다 XSS Test라는 알림창이 뜨게 된다!

게시판 목록 조회시 아래 이미지의 알럿이 뜬다!

프론트에서 react-contenteditable 라이브러리를 사용하고 있어 줄 바꿈(<br />)와 <div>, <div />는 허용해 주어야 화면에서 보여 줄 때 입력과 동일하게 보여줄 수 있는 이슈가 있었다.
sanitize-html 라이브러리를 사용해서 특정 태그를 허용하고, 다른 태그들은 살균(?)처리 함으로서 해결하였다!
커뮤니티 기능을 개발하면서 해당 공격을 눈으로 확인하고 예방할 수 있는 기회를 가질 수 있어서 재밌었다 :)