[Web] XSS(Cross-Site Scripting) 공격이란?

XSS(크로스 사이트 스크립팅)는 웹 페이지에 악성 스크립트를 주입하여 사용자에게 실행되도록 하는 공격입니다. 이로 인해 공격자는 사용자의 세션을 탈취하거나, 브라우저에서 악성 동작을 수행할 수 있습니다. 특히, 사용자가 로그인한 상태라면 공격자는 세션 쿠키를 이용해 사용자 계정에 접근하거나, 민감한 정보를 탈취할 수 있습니다.

종류

XSS 공격은 삽입된 스크립트의 실행 방식에 따라 Stored XSS, Reflected XSS, DOM-based XSS로 나뉩니다

Stored XSS (저장형 XSS)

Stored XSS는 악성 스크립트가 서버에 저장되어 다른 사용자들이 해당 스크립트를 실행하게 하는 방식입니다. 예를 들어, 사용자가 입력한 악성 댓글이나 게시글이 데이터베이스에 저장된 후, 다른 사용자들이 해당 페이지를 열 때 스크립트가 실행됩니다.

<script>alert('Your session is hijacked!');</script>

Reflected XSS (반사형 XSS)

Reflected XSS는 악성 스크립트를 포함한 URL을 통해 즉시 실행되는 방식입니다. 사용자가 조작된 URL을 클릭할 때 스크립트가 실행되며, 주로 이메일 링크나 URL 공유를 통해 이루어집니다.

https://example.com/search?q=<script>alert('Hacked!');</script>

DOM-based XSS

DOM-based XSS는 클라이언트 측에서 DOM(Document Object Model) 조작으로 인해 발생하는 공격입니다. 서버와의 통신 없이 자바스크립트 코드에서 DOM을 조작할 때 발생합니다.

XSS 공격의 위험성

• 세션 탈취: 쿠키에 저장된 세션 ID를 탈취하여 공격자가 사용자 계정에 접근할 수 있습니다.
• 피싱 공격: 악성 스크립트를 통해 가짜 로그인 페이지로 리다이렉트하여 사용자 계정 정보를 탈취할 수 있습니다.
• 브라우저 악성 동작 수행: 예를 들어, 사용자가 의도하지 않은 광고를 클릭하게 만들거나, 악성 사이트로 유도할 수 있습니다.
• 데이터 변조: 사용자의 입력 데이터를 공격자가 마음대로 변조하여 표시할 수 있습니다.

방어 방법

사용자 입력 검증 및 필터링

입력 데이터는 반드시 검증하고 필터링해야 합니다. 특히, HTML 태그와 스크립트를 필터링하여 XSS 공격의 가능성을 줄입니다.

• 서버 측 필터링: 사용자 입력이 서버로 전달되기 전에 스크립트 태그와 자바스크립트 이벤트를 제거합니다.
• 라이브러리 사용: XSS 필터링을 위한 라이브러리(예: DOMPurify)를 사용해 악성 코드를 자동으로 제거할 수 있습니다.

// DOMPurify 사용 예시
import DOMPurify from 'dompurify';

const sanitizedInput = DOMPurify.sanitize(userInput);

출력 시 HTML 이스케이프 처리

입력 데이터를 HTML로 렌더링할 때는 반드시 이스케이프(escape) 처리를 하여, 스크립트가 HTML로 해석되지 않도록 합니다.

• &는 &로 변환
• <는 <로 변환
• >는 >로 변환

function escapeHTML(str) {
  return str.replace(/&/g, "&")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
}

HTML 이스케이프 처리를 통해 악성 스크립트가 실제로는 텍스트로만 표시되게 되어, XSS 공격을 방지할 수 있습니다.

Content Security Policy(CSP) 설정

CSP(Content Security Policy)는 브라우저가 특정 스크립트 소스에서만 자바스크립트를 실행하도록 제한하는 보안 기능입니다. 이 설정을 통해 외부 스크립트나 인라인 스크립트가 실행되지 않도록 방지할 수 있습니다.

HttpOnly 쿠키 사용

HttpOnly 쿠키는 자바스크립트에서 쿠키에 접근할 수 없도록 설정하는 옵션입니다. 이를 통해 쿠키에 저장된 세션 ID나 민감한 정보가 XSS 공격을 통해 탈취되지 않도록 보호할 수 있습니다.

프레임워크의 XSS 보호 기능 사용

React, Angular, Vue와 같은 프론트엔드 프레임워크는 기본적으로 XSS 방지 기능을 제공합니다. 예를 들어, React에서는 JSX가 HTML 이스케이프 처리를 자동으로 수행하여 안전한 출력을 제공합니다.

// React에서 안전한 출력 예시
function UserComment({ comment }) {
  return <div>{comment}</div>;
}