프론트엔드 보안 강화 : XSS (교차 스크립트 공격) 방지

안녕하세요. App-Biz에서 Atlassian Add-on 개발을 하고있는 Frontend Developer 노은지입니다.
현대 웹 애플리케이션은 점점 더 복잡해지고 있으며, 보안 위협도 그에 따라 증가하고 있습니다. 사용자 데이터 보호 및 애플리케이션의 무결성을 유지하기 위해서는 프론트엔드 보안이 필수적입니다.

이 포스트에서는 프론트엔드에서 보안을 강화하기 위한 몇 가지 주요 방법 중 XSS(교차 스크립트 공격) 방지에 대하여 살펴보겠습니다.

XSS (교차 스크립트 공격) 방지

어플리케이션의 다국어 처리를 위한 메시지에 줄바꿈을 처리하기 위해 <br/> 태그를 사용했습니다. 하지만 HTML을 직접 사용하면서 여러 가지 문제가 발생할 수 있다는 점을 깨달았습니다.

가장 큰 문제는 보안입니다. 사용자로부터 입력받은 데이터에 HTML 태그가 포함되어 있을 경우, 교차 스크립트 공격(XSS)의 위험이 커질 수 있습니다. 악의적인 사용자가 <script> 태그를 삽입하여 웹 페이지에서 임의의 스크립트를 실행할 수 있는 가능성이 존재합니다. 이러한 공격은 사용자 정보를 탈취하거나, 웹사이트의 기능을 방해하는 등 심각한 결과를 초래할 수 있습니다.

이러한 문제를 해결하기 위해, React에서는 dangerouslySetInnerHTML을 사용할 수 있지만, 이 경우에도 항상 HTML을 정제하여 보안을 강화해야 합니다. 대신, 사용자 입력을 안전하게 처리할 수 있는 라이브러리인 DOMPurify를 활용하는 방법을 고려할 수 있습니다.

DOMPurify

DOMPurify는 웹 애플리케이션에서 사용자 입력을 안전하게 처리하기 위한 라이브러리로, 주로 XSS(교차 스크립트 공격)로부터 보호하기 위해 사용됩니다.

이 라이브러리는 HTML, SVG 및 MathML을 정제하여 악성 스크립트가 포함되지 않도록 보장합니다. DOMPurify의 주요 기능과 특징은 다음과 같습니다:

주요 기능

1. XSS 방어: DOMPurify는 사용자가 입력한 HTML 코드에서 악성 스크립트, 이벤트 핸들러, 또는 기타 위험한 요소를 제거합니다. 이를 통해 웹 페이지에서 스크립트가 실행되는 것을 방지할 수 있습니다.
2. 브라우저 호환성: DOMPurify는 대부분의 현대 브라우저에서 잘 작동하며, 다양한 플랫폼과 환경에서 사용할 수 있습니다.
3. 간편한 사용법: 라이브러리를 사용하기 위해 복잡한 설정이 필요하지 않으며, 간단한 API로 손쉽게 통합할 수 있습니다. HTML 문자열을 정제하기 위한 단 한 줄의 코드로 사용할 수 있습니다.
4. 신뢰성 있는 정제: DOMPurify는 검증된 보안 알고리즘을 사용하여 정제 과정을 수행하며, 보안 커뮤니티에서 널리 사용되고 있습니다. GitHub에서도 활발하게 유지 관리되고 있습니다.
5. 옵션 설정: DOMPurify는 다양한 설정 옵션을 제공하여 사용자가 필요에 따라 정제 프로세스를 세부 조정할 수 있습니다. 예를 들어, 특정 HTML 태그나 속성을 허용하거나 차단할 수 있습니다.

사용 예시

DOMPurify를 사용하는 기본적인 예시는 다음과 같습니다

// DOMPurify, i18next 라이브러리 로드
import DOMPurify from 'dompurify';
import { t } from 'i18next';

// 다국어 처리를 위한 메시지
"I18N_MESSAGE_KEY01": "To manage your profile settings, go to the 'Profile' section in the main menu.<br/>Here, you can update your personal information, change your password, and configure your privacy settings.<br/>Make sure to save your changes before exiting."

/**
 * 다국어 메시지를 안전하게 렌더링할 수 있는 함수
 * @param {string} html - 안전하지 않은 HTML 메시지
 * @returns {Object} - 안전한 HTML 메시지
 */
const sanitizeHtml = (html: string) => {
    return { __html: DOMPurify.sanitize(html) };
};


// 정제된 HTML이 사용부에서 삽입 된 모습

return (
  <ContentDescription dangerouslySetInnerHTML={sanitizeHtml(t('I18N_MESSAGE_KEY01'))} />
);

위의 예시에서 DOMPurify의 sanitizeHtml 메서드를 통해 악성 스크립트가 제거됩니다. 최종적으로 정제된 HTML이 안전하게 웹 페이지에 삽입됩니다.

사용 예시의 메시지 키를 만약 dangerouslySetInnerHTML를 사용하지 않고, 그대로 렌더링 하면 다음과 같이 보입니다.

반면 dangerouslySetInnerHTML를 사용하고, sanitizeHtml 함수를 통하여 악성 스크립트를 정제 한 뒤 화면에서의 모습은 다음과 같습니다.

결론

프론트엔드 보안은 애플리케이션의 신뢰성과 안전성을 높이는 데 필수적입니다.

위에서 언급한 방법들을 적용하여 보안을 강화하면, 사용자 데이터를 보호하고 공격으로부터 애플리케이션을 방어하는 데 큰 도움이 될 것입니다. 항상 보안에 대한 인식을 높이고, 최신 보안 동향을 따라가는 것이 중요합니다.

이 블로그 포스트가 프론트엔드 보안을 강화하는 데 유용한 정보가 되기를 바랍니다!

<프론트엔드 관련 포스트 더 보기>

📌State, 슬기롭게 관리하기 (1)
📌State, 슬기롭게 관리하기 (2)