인증 정보는 어떻게 관리해야 할까요?

이전 글에서 인증 정보가 왜 필요한지 알아보았습니다!

특히 JWT에서는 인증 정보 탈취를 막기 위해 고군분투한 과정도 같이 살펴보았어요.

하지만 그 이전에 ‘근본적인 공격’이 어떻게 이루어지는지, 이에 대한 방어 방법에 대해서는 설명드리지 못했어요. 이번 글을 통해 함께 알아보도록 합시다!

XSS를 통한 인증 정보 탈취 사례

2015년 모 커뮤니티 사이트에서 사용자들의 개인정보가 대량으로 유출된 적이 있어요.

해당 공격은 사이트의 취약점을 통해 이루어졌습니다. 글을 작성할 때 임의의 스크립트를 내장해 두면, 글을 조회할 때 해당 스크립트가 동작되는 형식이었어요. 이러한 공격 방식을 **XSS(Cross Site Scripting)**라고 합니다.

image.png

XSS 공격 예시

사용자가 업로드한 게시글을 보기 위해 아래와 같은 코드를 작성했다고 가정할게요.

...
<div id="content"></div>
...

<script>
  ...
  const userInput = await fetch(`/posts/${postId}`);
  document.getElementById("content").innerHTML = userInput;
  ...
</script>

특정 contentId에 입력된 값을 가져오고, 이를 content라는 id를 지닌 div에 그대로 넣는 코드를 작성했습니다.

해당 코드는 굉장한 위험성을 지니고 있습니다. 바로, 사용자가 html형태의 글을 작성했다면 해당 스크립트가 동작할 수 있다는 뜻이죠.

"<script>
  alert('XSS 공격!');
</script>"

사용자가 위와 같은 스크립트 형태의 글을 작성한 경우, 해당 글을 클릭한 사용자는 XSS 공격!이라는 얼럿 창을 강제로 보게 됩니다.

 을 통해 21번 글을 조회만 했을 뿐인데, 스크립트가 동작하는 것을 볼 수 있습니다..!

/posts/21 을 통해 21번 글을 조회만 했을 뿐인데, 스크립트가 동작하는 것을 볼 수 있습니다..!

스크립트는 메모리, 세션 스토리지, 로컬 스토리지에 모두 접근이 가능합니다. 쿠키 또한 HttpOnly를 설정하지 않았다면 역시나 접근이 가능해져요.

이를 통해 사용자의 인증 정보를 수집하고, 해당 인증 정보를 통해 사이트를 마음껏 이용 가능하다면..?

굉장히 큰 보안 이슈가 발생하게 될 거에요.