[지식루프 IT공부] innerHTML이 위험한 이유

innerHTML를 사용하면 왜 위험할까요?

 

사용자로부터 입력값을 받아서 그 값을 innerHTML로 처리하면, 입력값에 악의적인 코드가 포함되어 있을 경우 사이트의 내부 코드나 동작이 바뀌거나 손상될 수 있기 때문입니다. 좀 더 구체적으로 풀어서 설명해볼게요.

---

상황 설명

1. 사용자 입력값: 예를 들어, 웹사이트에 댓글 기능이 있다고 가정해봅시다. 사용자가 댓글 입력란에 텍스트를 작성하고 제출하면, 서버를 거쳐 클라이언트(브라우저)에 그 내용이 표시됩니다.
   
   
2. innerHTML 사용: 그 댓글을 화면에 띄우기 위해 <div id="comment"></div> 같은 요소에 innerHTML로 삽입한다고 해보면:
   
   const userInput = document.getElementById("user-comment").value; *// 사용자 입력값* document.getElementById("comment").innerHTML = userInput; *// 입력값을 화면에 표시*
   
   
3. 악의적인 입력: 만약 사용자가 아래와 같은 값을 입력했다고 가정해보세요:접기자동 줄바꿈복사
   • innerHTML로 삽입되면 브라우저가 이걸 HTML로 해석해서 <script> 태그를 실행합니다.
   • 결과: 경고창이 뜨고, 더 심하면 <script> 안에 쿠키를 훔치거나 페이지를 조작하는 코드가 실행될 수 있습니다.
4. <script>alert('너 해킹당했어!');</script>

---

왜 위험한가?

• 코드 실행: innerHTML은 입력값을 HTML로 파싱하니까, <script>, <img onerror="악성코드()"> 같은 태그가 실행됩니다.
• 페이지 조작: 공격자가 삽입한 코드로 인해 사이트의 구조나 동작이 바뀔 수 있습니다. 예를 들어, 로그인 폼을 가짜로 바꿔 비밀번호를 훔칠 수도 있죠.
• 사용자 피해: 다른 방문자가 해당 페이지를 볼 때 공격 코드가 실행되면서 개인 정보가 유출될 수 있습니다.

---

비교: textContent라면?

• 같은 상황에서 textContent를 사용하면:
  • 결과: <script>alert('너 해킹당했어!');</script>가 그대로 텍스트로 표시되고 실행되지 않습니다.
  • 이유: textContent는 HTML 파싱을 안 하니까 안전해요.
• document.getElementById("comment").textContent = userInput;
  
  
  
  [참고] 파싱 (parsing)

• 단어 뜻: "parse"는 영어로 "구문 분석하다" 또는 "해석하다"라는 의미입니다.
• 컴퓨터에서: 문자열(코드나 데이터)을 읽고, 그 안에 담긴 구조나 규칙을 찾아서 프로그램이 이해하거나 실행할 수 있게 만드는 과정을 말함
  
  
  

---

결론

네, 사용자로부터 받은 입력값을 검증 없이 innerHTML로 처리하면 내부 코드가 바뀌거나 악성 코드가 실행될 위험이 있습니다. 그래서:

• 안전한 대안: textContent를 쓰거나, DOM 메서드(createElement 등)를 사용하세요.
• 필수 조치: innerHTML을 써야 한다면 입력값을 철저히 검증하고 위험한 태그를 제거하세요(예: Sanitization).