들어가며

Devlog 하루를 건너뛰었다. 그래도 큰 진전이 없었다. React 환경에서 HTML 태그를 적용하려고 다양한 방법을 고민했다. 라이브러리에 대한 고민이 제일 컸다. 이걸 왜 써야하는지 납득하기 위한 시간들이었다.

문제

React에선 HTML태그가 들어온 문자열을 태그로 취급하지 않고 일반 문자열로 취급한다. 그래서 아무리 문자열에 태그를 적용하려고 해도 도저히 적용이 안된다. 크로스 사이트 보안 위험 때문에 이렇게 구성되어 있다. 이걸 우회하려면 dangerouslySetInnerHTML를 써야되는데 이름부터 절대 쓰고싶지 않다.

Native?

라이브러리를 안쓰고 어떻게든 해결하려고 했다. 문자열을 배열로 split 한 후 map과 태그를 씌워서 처리하려고 고민했다. 문자 단위로 스타일이 적용되는게 다른 프로젝트 환경을 생각하면 그다지 효율적이지 못했다. 단어 단위로 적용하는 것도 불가능하다.

Library!

• Interweave ✅
  DOM 기반으로 안전하게 HTML 태그를 적용해준다. 이런 작업이 있을 것 같았다. 내일은 바로 동작을 확인하고 적용해봐야겠다.
  Whether the HTML content is user submitted, third-party or tooling generated, or manual written, have confidence knowing it will be safely rendered to avoid all vulnerabilities and XSS attack vectors. Never write dangerouslySetInnerHTML again!

• html-react-parser ❌
  이런 라이브러리도 있었다. 기반 기술이 다르다. 둘 다 확인해야겠다.
  Q. Is this XSS safe?
  A. No, this library is not XSS (cross-site scripting) safe. See #94.
  https://github.com/remarkablemark/html-react-parser#is-this-xss-safe