0607

three.js

드디어 배포했습니다
약 한달간의 프로젝트
https://gentendo.vercel.app/

아직 버그가 좀좀따리 있는 것 같은데..
threejs 너무 어려워욤
하지만 재미따!

전체화면(f11 상태)에서 보면
model 위에 삽입한 html canvas의 height 크기가
리사이징 되는 문제가 발생했는데
그냥 css에서 관리해주면 끝나는 문제였다.

RealWorld

포스팅은 한 번에 올릴 예정
오늘은 앞선 프로젝트 배포 이슈로 article 페이지만 읽어봤다.
읽는데 dangerouslySetInnerHTML이라는 속성이 사용돼서 이건 뭐지? 하고 보니까

React는 HTML 문자열을 직접 렌더링하지 않고, 기본적으로 **문자 그대로** 출력한다. 이는 XSS 공격을 방지하기 위한 기본 설계이다. 그래서 DOMPurify를 쓰고 html을 inner set 하는게 권장된다고 한다.

DOMPurify란,
말 그대로 DOM은 Document Object Model이고
Purify는 정화한다는 뜻을 갖고있으니
HTML DOM에서 위험한 요소들을 제거해서 깨끗하게 만든다는 의미다.

근데 왜 html 자체를 넣으면 안되느냐? 라면
React는 기본적으로 XSS 공격을 방지하기 위해
텍스트를 자동으로 이스케이프 처리해준다.
<script>를 넣으면 <script>로 바꿔버리는 식으로.

근데 마크다운을 HTML로 변환해서 렌더링할 때는 진짜 HTML이 필요하기에
React의 보호막을 뚫고 HTML을 직접 삽입하는 게 dangerouslySetInnerHTML이다.

XSS란, 악의적인 사용자가 웹사이트에 자바스크립트 코드를 몰래 심어놓는 공격이다.
예를 들어 아래와 같은 코드를

<script>alert('해킹당했어요!')</script>

댓글이나 게시글에 넣으면, 다른 사용자가 그 페이지를 볼 때 스크립트가 실행돼버린다.
물론 진짜 해커가 저런 문구를 넣진 않겠죸
그래서 무섭게 쿠키 탈취나, 세션 하이재킹 같은 진짜 공격을 가능하게 만드는거다.

그래서 DOMPurify로 <script>, <iframe>, onclick 같은 위험한 것들을 알아서 걸러내고,
안전한 HTML만 남겨둔 후 마크다운을 렌더링 하는게 권장된다고 한다.

DOMPurify를 적절히 사용하면 보안상 상당히 안전하지만,
설정 오류나 업데이트 누락, 신뢰할 수 없는 서드파티 콘텐츠 등으로 인해
완전한 안전을 장담하긴 어렵다고 한다.
react-markdown 같은 라이브러리를 사용하면
라이브러리가 알아서 안전하게 마크다운을 React 컴포넌트로 변환해준다.

라이브러리가 싫다면 MDX를 사용해서
마크다운 안에서 직접 React 컴포넌트를 쓰는 방법도 있다.

근데 항상 궁금한게 있었다.
iframe은 왜 위험한걸까?

1. 피싱 사이트 삽입
   피싱 사이트를 내 멋대로 넣을 수도 있고
2. 클릭재킹 (ClickJacking)
   투명한 iframe을 버튼 같은 곳 위에 올려놓고 사용자를 속일 수 있기
   땜에 위험하다고 한다.

맺음말

사이트 내가 만들어놓고 내가 좋아서 계속 보고잇다
어이없음