innerHTML을 활용한 DOM조작과 XSS스크립팅 공격

[codingjamee]

XSS 스크립팅 공격

악의를 가지고 있는 사용자가 접근하여
악성 스크립트를 삽입하여 의도하지 않은 명령을 실행하거나 세션등을 탈취하는 공격
출처 :https://4rgos.tistory.com/1

발생할 수 있는 피해

1. 쿠키 및 세션정보 탈취

2. 악성 프로그램 다운 유도

3. 의도하지 않은 페이지 노출

XSS 스크립팅 공격이 일어날 수 있는 상황

innerHTML로 사용자의 입력을 직접 받아서 DOM을 조작할 때 Text Editor를 활용하여 사용자의 입력을 HTML태그로 받는 경우 사용자입력을 직접 href에 적용하는 경우

XSS 스크립팅 공격 방지 방법

1. DOMPurify.sanitize활용
2. 정규표현식을 사용하여 특수문자를 입력받지 못하도록 처리 또는 입력값을 치환 (replaceAll등) -> 단점 : 모든 입력을 완벽히 검증하기 힘들고 실수 가능성이 있음
3. HttpOnly 및 Secure 쿠키 플래그 -> 완전히 방지하지는 못함
4. React, Vue등은 기본적으로 XSS방지기능이 내장되어 있음

React에서의 XSS방지 방법에 대해

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 모든 항목은 렌더링 되기 전에 문자열로 변환됩니다. 이런 특성으로 인해 XSS (cross-site-scripting) 공격을 방지할 수 있습니다.
출처: https://velog.io/@wksmstkfka12/XSS%EC%99%80-React%EC%97%90%EC%84%9C-XSS%EB%A5%BC-%EB%B0%A9%EC%A7%80%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

<는 <, >는 > 로 이스케이프해서 렌더링해주기 때문에 XSS, 스크립트 삽입을 통한 공격을 막을 수 있다

그러나 사용자로부터 직접 입력 받은 HTML태그를 입력시 dangerouslySetInnerHTML를 사용한다.
이는 이름에서 나와있듯, 사용자의 입력을 직접 HTML태그에 입력하는 것이 위험한 것을 알 수 있다.

-> 방지 방법 :DOMPurify.sanitize

사용자 입력을 직접 href사용할 시에 안전하게 사용하는 방법

 function SafeLink({ url, children }) {
  const safeUrl = /^https?:\/\//.test(url) ? url : '#';
  return <a href={safeUrl}>{children}</a>;
}

[JisuPark-dev]

지우: 검색구현 하면서 입력받을 때, 크로사이트 스크립팅 문제가 있었던 적이 있었다. encode uri, decode uri라는 것을 추천받았었다.