
React에서 DOMPurify로 XSS 공격 방어하기

·
Frontend/Development
React를 사용하다 보면 간단한 HTML 태그, 예를 들어나 같은 링크를 포함한 텍스트를 직접 렌더링해야 하는 상황이 생깁니다.const text = '궁금하시다면 매뉴얼을 참고해 주세요.';return ; // 이렇게 하면 텍스트 내부의 `` 태그가 실제 링크로 렌더링됩니다. dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격(XSS: Cross Site Scripting)에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 ..