리액트에서 CK에디터 구현하기2 (리액트 html 태그 사용 법 dangerouslySetInnerHTML) [20221106-TIL]

어제는 다름이 아니라 리액트에서 CK에디터 라이브러리를 가져와 적용하는 법을 간단하게 소개했다. 

어제 백엔드 테스트는 마쳤고 이제 그걸 프론트로 가져올때 어떻게 되는지를 알아야하는데 실제로 가져와보았다.

 

CK에디터 텍스트 리액트에 그냥 가져왔을때

작성화면

화면 결과

화면 결과

작성할때에는 위와 같이 보이다가 가져오면 아래와 같다.

리액트는 HTMl태그를 인식하지 않고 텍스트 그자체로 가져오는데 이는 스크립팅 공격을 방지하기 위해서 라고 한다.

 

크로스사이트 스크립팅 공격이란?

크로스 사이트 스크립팅은 웹사이트에 악성 스크립트를 주입하는 행위를 말합니다. 해커는 사람들이 친밀하고 안전하다고 생각하는 웹사이트에 악성 스크립트를 주입하고, 악성 스크립트가 포함된 게시글을 열람한 피해자들의 쿠키는 해커에게 전송됩니다. 이를 통해 해커는 피해자의 브라우저에서 스트립트를 실행해 사용자의 세션을 가로채거나, 웹사이트 변조하거나, 악의적인 컨텐츠 삽입하거나, 피싱 공격 등을 시도할 수 있게 됩니다.

 

영구적 XSS 공격이 가장 많이 발생하는 곳은 게시판이며, 게시판 외에도 사용자가 입력한 값이 데이터베이스에 저장이 되고 저장된 값이 그대로 프론트엔드에 표시되는 곳에서 공격이 발생할 가능성이 높습니다. 일반적으로 XSS 공격은 사용자의 입력 값을 검증하지 않기 때문에 발생한다고 할 수 있습니다.

영구적 XSS가 위험한 이유는 사용자가 링크를 클릭하도록 유인할 필요가 없다는 것입니다. 해커가 할 일은 피해자가 악성 코드가 삽입된 웹사이트에 접속하기만을 기다리는 것뿐입니다.

 

요약

사용자가 게시글에 유의미한 코드를 입력하게 할 수 있고 이를 프론트는 여과 없이 반영하여서 악성코드를 심거나 해를 끼치게 해준다.

 

구현하기

그래도 일단 구현해보자!

 

구현법

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

위와 같이 적용하면된다고 하는데 

 

그래서 나는 컴포넌트 내부에 태그로 변환해준다는 의미로 convert 함수를 만들고 변환된 객체를 프론트에 반영해줬다.

export default function FreeTalkDetail() {

function convertToHtml(element) {
    return <div dangerouslySetInnerHTML={{ __html: element }} />;
  }

const convertedContent = convertToHtml(freeTalk.content);

... 중략

return (
	<>
		<hr />
            태그를 setInnerHTML로 들고 왔을 때
            {convertedContent}
 	</>           
  );
 }

아래 처럼 보인다!

 

다음과제는?

스크립팅 공격 누가봐도 안좋아보이니 이에 대한 해결책이나 다른 방식을 공부해보아야겠다.!