HTML 이스케이프

HTML 이스케이프

 

HTML 태그가 그대로 화면에 나타나는 현상은 "HTML 이스케이프" 또는 "HTML 인코딩"이라고 합니다. 이는 브라우저가 HTML 태그를 일반 텍스트로 처리하여 태그를 해석하지 않고 그대로 표시하는 것입니다.

dangerouslySetInnerHTML을 사용하면 HTML을 직접 삽입할 수 있어 유연한 콘텐츠 렌더링이 가능하지만, 보안 취약점이 발생할 수 있습니다. 주된 문제점은 XSS(Cross-Site Scripting) 공격입니다.

문제점

1. XSS 공격:
   • 사용자 입력을 신뢰하지 않고 그대로 렌더링하면 악의적인 스크립트가 실행될 수 있습니다. 이는 사용자의 쿠키, 세션 토큰 등을 탈취하거나 악성 코드 실행에 이용될 수 있습니다.
2. 데이터 신뢰성:
   • 외부에서 가져온 데이터를 신뢰할 수 없기 때문에 데이터가 예상치 못한 HTML로 변형될 수 있습니다.
3. 유지보수 어려움:
   • 프로젝트가 커질수록 관리하기 어렵고, 보안 문제가 발생했을 때 추적하기 어렵습니다.

대안

1. 데이터를 클린(청소)하기:
   • 사용자가 입력한 데이터를 삽입하기 전에 이를 클린(clean)하여 안전한 HTML만 남기고 나머지를 제거합니다.
   • 라이브러리 사용: DOMPurify, sanitize-html 등.
2. React 컴포넌트 사용:
   • 가능하면 dangerouslySetInnerHTML를 피하고, React 컴포넌트를 사용하여 안전하게 데이터를 렌더링합니다.

1. DOMPurify와 타입 정의 파일을 설치합니다.

yarn add dompurify
yarn add -D @types/dompurify

2. components/SafeComponent.tsx 파일 생성

import DOMPurify from 'dompurify';
import React from 'react';

interface SafeComponentProps {
  title: string;
}

const SafeComponent: React.FC<SafeComponentProps> = ({ title }) => {
  const cleanHTML = DOMPurify.sanitize(title);

  return <h3 className="font-bold" dangerouslySetInnerHTML={{ __html: cleanHTML }} />;
};

export default SafeComponent;

3. pages/index.tsx

import React from 'react';
import SafeComponent from '../components/SafeComponent';

const Home: React.FC = () => {
  const title = "<script>alert('xss')</script><strong>Safe Title</strong>";

  return (
    <div>
      <SafeComponent title={title} />
    </div>
  );
};

export default Home;

설명

1. components/SafeComponent.tsx:
   • DOMPurify를 사용하여 입력된 HTML 문자열을 클린(clean)합니다.
   • dangerouslySetInnerHTML를 사용하여 클린된 HTML을 안전하게 렌더링합니다.
2. pages/index.tsx:
   • SafeComponent를 사용하여 HTML 문자열을 렌더링합니다.
   • 입력된 HTML 문자열이 DOMPurify를 통해 클린되기 때문에 XSS 공격을 방지할 수 있습니다.

 

 

throw new Error는 자바스크립트에서 오류를 발생시키는 방법 중 하나입니다. 이 메소드를 사용하면 프로그램의 흐름을 중단시키고, 지정된 오류 메시지를 포함한 새로운 Error 객체를 생성합니다.

throw new Error의 역할:

• 오류 발생: throw new Error를 호출하면 코드 실행이 중단되고, 가장 가까운 try...catch 블록으로 제어가 이동합니다.
• 에러 메시지: new Error 객체를 생성할 때 메시지를 전달할 수 있습니다. 이 메시지는 디버깅 및 로그 분석 시 유용하게 사용될 수 있습니다.

try {
  // 일부 코드 실행
  throw new Error('Something went wrong');
  // 이 줄은 실행되지 않음
} catch (error) {
  console.error(error.message);  // 'Something went wrong' 출력
}

장점:

1. 클린 코드: console.log 대신 오류를 발생시키면 프로덕션 코드가 더 깔끔해집니다.
2. 에러 핸들링: 특정 오류에 대해 예외를 발생시키고, 이를 catch 블록에서 처리할 수 있습니다.
3. 디버깅 용이: 오류 메시지를 통해 어떤 오류가 발생했는지 쉽게 알 수 있습니다.

console.log 대신 throw new Error의 사용:

• 개발 브랜치: console.log는 개발 중에는 유용하지만, 프로덕션 코드에는 남기지 않는 것이 좋습니다.
• 프로덕션 코드: throw new Error는 오류를 명확히 처리하고, 애플리케이션이 예기치 않게 동작하지 않도록 도와줍니다. 예외 발생 시 알맞게 처리할 수 있는 구조를 마련하는 것이 좋습니다.

요약

• console.log는 개발 중에 유용하지만, 프로덕션 코드에서는 과도한 로그 출력이나 민감한 정보 노출의 위험이 있어 사용을 최소화해야 합니다.
• throw new Error는 예외 상황을 명확히 처리하고, 상위 코드에서 이를 적절히 핸들링할 수 있게 도와주는 방법으로, 프로덕션 코드에서도 사용하기 적합합니다.