XSS 방어 코드 적용 후 입퇴장 메세지 랜더링 오류 해결하기

👉 오류 상태

• 일반 메세지는 문제없이 <>가 <와 >로 변환된 후 화면에는 랜더링 과정을 통해 <>로 표현됨
• 입퇴장 메세지는 <>가 <와 >그대로 출력됨
  
  
  
  

👉 접근 방법 1

• 백엔드 로직에서 ChatMessageType이 ENTER나 LEAVE인 경우 XSS 방어 코드를 적용하지 않게 if문을 추가
• ⇒ 구현은 되었지만 DB를 확인해보니 저장 형태는 같은데 보이는 화면이 다르다는 것에 의문을 갖게 됨
  
  
  
  

👉 접근 방법 2

• 기존 코드

  if (message.type == "ENTER" || message.type == "LEAVE"){
      newItem.classList.add("center");
      newItem.textContent = `${message.content}`;
  }

  • 프론트 로직을 확인해보니 일반 메세지를 입력할 때는 InnerHTML로 말풍선을 생성했으나, 입장 메세지는 newItem.textContent = ${message.content}로 textContent 속성에 직접 할당
  • textContent는 HTML 태그나 HTML entity 같은 걸 해석하지 않고 그대로 문자열로 출력
• 변경 코드

  if (message.type == "ENTER" || message.type == "LEAVE"){
      newItem.classList.add("center");
      newItem.innerHTML = `${message.content}`;
  }

  • HTML entity를 해석해서 출력하려면 InnerHTML을 사용해야 함
    • innerHTML을 사용할 경우 XSS 공격의 위험이 있으므로 항상 주의해야 함
      
      
      
      

👉 HTML entity

• 정의
  • 웹 페이지에서 특정 문자나 문자 조합을 안전하게 표현하기 위해 사용되는 문자열 코드
  • HTML에서는 몇몇 문자들이 특별한 의미를 가지므로, 이러한 문자들을 글자 그대로 표현하고 싶을 때는 HTML 엔티티를 사용
• 예시
  • < : <
  • > : >
  • & : &
  • " : "
  • ' : '
  •   : 띄어쓰기
    
    
    
    

👉 결론

• 백엔드 로직을 다시 수정하여 입퇴장 메세지에도 XSS 방어 코드가 적용되도록
  • ⇒ 접근 방법 1 미적용
• 프론트엔드의 입퇴장 메세지 부분에 InnerHTML을 적용하니 정상적으로 랜더링되어 출력됨