댓글에 포함된 URL에 하이퍼링크 처리하기

댓글을 내용에 일반 텍스트 외에 URL이 포함되어있을경우 하이퍼 링크로 보이도록 만들기

👉 http 혹은 https로 시작하는 urlRegex 정의하기

const urlRegex = /(http|https):/\/\([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)/gi;

👉 comment를 파라미터로 받고, 그곳에 포함되어있는 url에 대해 <a></a> 태그로 치환하기

const parseLink = (comment:string) => {
	const urlRegex = /(http|https):/\/\([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)/gi;
  
  	// 필요하다면 a 태그에 class를 추가해서 css를 적용할수있다.
  	// 예를 들면 text-decoration : underline과 같은...?
  	return comment.replace(urlRegex, "<a href='$1://$2' target='_blank'>$1://$2</a>") 

}

👉 디테일 페이지에 적용하기

• xss attack에 대응하기 위해 Dompurify 라이브러리로 sanitize 한 후 __html에 삽입하기

  <div className="whitespace-pre-line"
       dangerouslySetInnerHTML={{
       __html: parseLinkTextToHTML(DOMPurify.sanitize(comment.text)),
       }}
   />