본문 바로가기
728x90

하이드레이션2

81. dompurify와 하이드레이션 owasp top 10 10가지의 최근 3~4년 보안의 핵심적인 부분 https://ko.wikipedia.org/wiki/OWASP 리액트에서 위에꺼는 필요없다 dompurify를 통한 조건부렌더링시 발생 가능한 하이드레이션 이슈 여기에 스타일을 입히면? A: React.js는 실제로 주소가 없다던데, 사실이야? B: 맞아! 어떤 주소로 접속을 해도 상관없이 모든 페이지의 html, css, js를 다운로드 받고 브라우저에서 가짜 주소를 만들지! A: 그럼... 처음 접속할 때 다운로드 받는 파일이 많으니까 느리겠네? B: 정확해! A: 그럼... 어떻게 하면 처음 접속을 빠르게 할 수 있을까? B: next.js를 활용해봐! A: next.js는 서버에서 먼저 프리렌더링 하고, 결과를 다운로드 받아.. 2023. 4. 4.
웹에디터, 다이나믹 임포트, 웹 공격, react-quill 8/10 작성한 내용의 앞 뒤로 등의 태그를 붙여서 데이터베이스에 저장했을 뿐이었다. 이 내용들이 문자열이 아닌, 태그의 기능 그 자체로 인식하게 만들기 위해 dangerouslySetInnerHTML 이라는 속성을 사용해서 해결했다. 여기서 한가지 호기심이 생길 수 있다. 태그처럼 자바스크립트로 해킹 기능을 작성하면...? 이 때, 누군가 글 상세보기를 클릭하면, 작성된 자바스크립트 코드가 실행될 것이고, 해킹(예, 토큰 탈취, 탈취된 토큰으로 유해 게시물 생성 및 중요 게시물 삭제 등)을 당할 수 있다. react-quill 라이브러리에서는 이를 사전에 차단해 준다. (태그를 의미하는 단어인 '' 등을 &lt, &gt와 같이 변경하여 차단) 하지만, react-quill만 믿고 방심 했다가는, 다른 .. 2021. 10. 23.
728x90