들어가며

저번부터 고민하던 내용인 라이브러리를 통한 HTML 문자열에 태그를 적용하는 방식을 사용했다. Interweave 라는 라이브러리인데 사용법이 세상 간단하고 XSS 취약점도 걸리지 않는다. 간단한 사용법과 이슈에 대해서 정리하려고 한다.

Interweave 사용법

정~말 쉽다. 정리할 껀덕지도 없다. Interweave 컴포넌트에 content 속성에 원하는 HTML 태그로 구성된 텍스트를 입력하면 된다. DOM 기반으로 만들어져서 XSS취약점에 강하다.

import Interweave from 'interweave';
...
let highlightedTestCase = '';
...
highlightedTestCase += data.testCase.substring(startIndex, lastIndex);
highlightedTestCase += "<span class='found'>" + matchArray[0] + '</span>';

return (
<div>
  <Interweave content={highlightedTestCase} />
</div>
)

정규표현식 무한루프

어떤 에러인가?

• 코드 구성 중 특정 정규표현식에서 exec를 무한히 실행하게 만드는 경우 예외처리를 못했음
• 예를들어, 입력된 정규표현식이 .*일 경우, 1번 검색한 후 다음 결과가 가장 마지막 인덱스를 가리킴
  그 상태에서 다시 while문으로 돌아와 exec를 수행
  *문자는 검색 결과가 없어도 결과값에 포함
  무한루프가 만들어짐

while ((matchArray = myRegex.exec(testCase)) !== null) {
      console.log('test');
      lastIndex = matchArray.index;
      highlightedTestCase += data.testCase.substring(startIndex, lastIndex);
      highlightedTestCase += "<span class='found'>" + matchArray[0] + '</span>';
      startIndex = myRegex.lastIndex;
      // result = matchArray[0];
    }
    highlightedTestCase += data.testCase.substring(startIndex, data.testCase.length);
    // return result;
  };

에러 메시지

에러 해결 방법

• testcase의 길이를 확인
• 가장 마지막 인덱스일 경우, 특정 문자로 끝나는 정규표현식에 예외처리 *, ?