XSS 공격의 위험성 체험하기

📣 알림 : 이 글은 'HTML블럭' 기능을 활용해 XSS 스크립팅의 위험성을 전달하기 위한 목적으로 작성되었으며,
이 글의 정보들은 독자의 노트북에서만 재생될 뿐 서버로 전달되지 않습니다.

언제부턴가 새로운 기능이 생겼다.

오랜만에 티스토리에 글을 쓰려 했는데 "HTML블럭" 이라는 새로운 기능이 보였다.

 

조금 살펴보니 HTML + CSS + JS를 게시물 내에서 실행할 수 있도록 해주는데, 아마 codepen 등 코드 작성 솔루션을 대체할 수 있도록 만들어준 것으로 추측된다.

 

본래의 목적으로 사용하면 멋진 인터렉션이나 CSS 애니메이션 등의 튜토리얼과 함께 데모를 제공하는 용도로 사용할 수 있다.

• AAPL 181.16 -1.36 (-0.67%)
• TSLA 181.16 -1.36 (-0.67%)
• NVDA 181.16 +1.36 (-0.67%)
• GOOG 181.16 -1.36 (-0.67%)
• META 181.16 +1.36 (-0.67%)
• MSFT 181.16 -1.36 (-0.67%)

• AAPL 181.16 -1.36 (-0.67%)
• TSLA 181.16 -1.36 (-0.67%)
• NVDA 181.16 +1.36 (-0.67%)
• GOOG 181.16 -1.36 (-0.67%)
• META 181.16 +1.36 (-0.67%)
• MSFT 181.16 -1.36 (-0.67%)

한편 특이하게도 <script> 태그와 fetch 함수가 온전히 동작한다는 점이 마음에 걸렸는데, XSS(Cross Site Scripting)이라는  공격 방식을 소개하기 좋은 사례가 될 것 같아 이번 글을 작성해 보았다.

다음 섹션에서는 여러분들의 브라우저 권한을 요청할 수 있습니다.
이는 데모 실행을 위한 용도로만 사용되며, 데모 과정 중 일어나는 어떤 과정도 서버에 저장되지 않습니다.

XSS 공격 사례 예시

1. 개인정보(Ex. 웹캠 비디오) 탈취

XSS 스크립팅은 공격자의 자바스크립트 코드를 사용자(블로그 구독자)의 현재 탭에 심어, 사용자 몰래 정보를 탈취하거나 악성 로직을 실행하는 것을 의미한다.

 

블로그를 읽고 있었는데 갑자기 내 얼굴이 화면에 나타난 모습이다.

 

이 예제에서는 단순히 나의 모습일 화면에 표시할 뿐이지만, webRTC 등으로 공격자의 서버와 연결하면 블로그를 읽는 내내 여러분의 모습을 누군가 촬영할 수도 있는 것이다. 

이런 공격을 막기 위해 브라우저는 외부 인터페이스(Ex. 알림, 웹캠 등)와의 통신을 만들기 전에 반드시 권한을 물어보는데, 웹페이지가 내게 필요한 최소한의 권한만을 요구하고 있는지 정확히 체크해야 한다.

 

웹캠뿐만 아니라, 위치 정보 및 마이크 접근 권한 등을 획득해 탈취할 수도 있다.

2. 페이지 내용 조작

두 번째로는 페이지의 내용을 악의적으로 수정해 사용자에게 잘못된 정보를 제공하거나 삽입하는 것이다.

잠깐 이 글의 스크롤을 제일 위로 끌어올려 보자. 무언가 이상하지 않은가?

나는 관리자가 아닌 방문자임에도 불구하고 수정 및 삭제 버튼이 그대로 노출되고 있다.

이는 실제 버튼이 아닌, 내가 "수정", "삭제" 버튼이 노출되도록 하는 스크립트를 작성하고, 이를 독자의 브라우저로 주입했기 때문이다.

 

당연히 이 링크는 지금은 티스토리 홈으로 연결되어 있지만 악의를 품으면 불법적인 사이트로 랜딩시킬 수도 있고, 플랫폼 제공자가 아닌 공격자가 의도한 함수를 실행하도록 할 수도 있다.

 

만약 호기심에 이 글을 삭제하려 한다면, 공격자의 사악한 메시지가 클립보드에 복사될 것이다.

마치며

요약하자면 XSS 스크립팅을 허용하는 순간, 공격자는 여러분이 보고 있는 페이지의 DOM을 마음껏 헤집을 수 있게 된다.

즉 내가 보고 있는 화면이 정상적인 화면인지 분간할 수 없게 되며, 화면 상의 어떤 정보도 신뢰할 수 없게 된다는 뜻이다.

<div>정말 송금하시겠습니까?</div>
<div id="receiver">받는 사람 : 홍길동</div>
<div id="accountNum">계좌번호 : 123-456-7890</div>

<script>
    // XSS로 주입된 코드
    const receiver = document.querySelector("#receiver");
    const accountNum = document.querySelector("#accountNum");

    receiver.textContent = "받는 사람 : chamming2";
    accountNum.textContent = "계좌번호 : 333-555-8888";
</script>

글을 마치기 전에 간단한 이스터 에그를 하나 소개한다.

이 글의 제목은 처음부터 지금의 제목이었을까?

같이 보면 좋을 글

• https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EA%B0%84_%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8C%85

사이트 간 스크립팅 - 위키백과, 우리 모두의 백과사전

 

• https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EA%B0%84_%EC%9A%94%EC%B2%AD_%EC%9C%84%EC%A1%B0

사이트 간 요청 위조 - 위키백과, 우리 모두의 백과사전