! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

안전한 React 웹 응용 프로그램을 만드는 데 유용한 중요한 팁 > 인사이트

본문 바로가기

MESCIUS 커뮤니티

인사이트 - IT&개발 정보

IT&개발 정보 안전한 React 웹 응용 프로그램을 만드는 데 유용한 중요한 팁

페이지 정보

작성자 GrapeCity 작성일 2021-12-15 10:32 조회 2,988회 댓글 0건

본문

전 세계적인 디지털 트랜스포메이션의 유입은 인프라에 압력을 가하고 있습니다. 그러는 동안 위협 행위자들은 계속해서 공격 기법을 개선하고 있습니다. 취약한 부분을 발견하면 이들에게 악용될 것입니다.

때문에 많은 팀에서는 개발 방법론을 DevOps에서 DevSecOps로 발전시키는 데까지 나아가면서 보안을 급진적으로 혁신하고 있습니다.

개발자에게는 여전히 걱정거리가 남아 있는데, 대부분은 릴리스 시간에 집중되어 있습니다. 그러나 보안을 위해 빠른 릴리스를 포기하면 안 됩니다. 둘 중 하나를 선택해야 할 필요는 없습니다.

이 문서에서는 React 응용 프로그램을 신속하게 보호하기 위해 활용할 수 있는 4가지 방법에 관해 알아봅니다. 이러한 방법은 워크플로우를 중단하면 안 되는 간단한 보안 사례입니다.


React 개요

일반적으로 프레임워크로 오해 받는 React는 사용자 인터페이스 또는 UI 컴포넌트를 빌드하기 위한 오픈 소스 프론트엔드 JavaScript 라이브러리로, Facebook과 개별 개발자 및 기업으로 구성된 커뮤니티에서 유지 관리합니다. React는 SPA(단일 페이지 응용 프로그램) 또는 모바일 응용 프로그램 개발 시 기본 토대로 사용할 수 있습니다.

React 응용 프로그램은 독립적이고 재사용 가능한 코드인 React 컴포넌트를 사용하여 빌드됩니다. JavaScript 함수와 유사한 목적을 제공하지만 단독으로 작동하고 render() 함수를 통해 HTML을 반환합니다.

React는 클래스 컴포넌트와 함수형 컴포넌트의 두 가지 컴포넌트 유형을 기반으로 빌드됩니다.

  1. 클래스 컴포넌트: React.Component에서 확장하고 React 요소를 반환하는 렌더 함수를 생성해야 합니다.

  2. 함수형 컴포넌트: 속성을 인수로 받고 React 요소를 반환하는 일반 JavaScript 함수입니다.


React 응용 프로그램을 보호하기 위한 4가지 방법

다음 모범 사례를 살펴보면서 React에서 실행 중인 응용 프로그램을 보호하는 방법을 알아보세요. 이러한 모범 사례는 미미한 자동화 공격일 수 있지만 보다 광범위한 공격 캠페인의 첫 단계로 사용되는 지능형 지속 공격의 일부일 수도 있는 XSS(교차 사이트 스크립팅) 및 CSRF(교차 사이트 요청 위조)와 같은 공격을 방지하도록 도울 수 있습니다.

1. XSS(교차 사이트 스크립팅) 방지

XSS(교차 사이트 스크립팅) 공격은 일종의 코드 주입으로, XSS 공격의 가장 일반적인 유형은 DOM 기반 공격입니다. 공격자는 사용자가 웹 페이지를 로드할 때 악성 공격(예: 사용자 데이터 훔치기)을 수행하는 악의적인 코드를 웹 사이트의 DOM 요소에 주입하는 것이 목표입니다.

React

이 문제를 방지하기 위해 개발자는 여러 위치에서 신뢰할 수 없는 입력을 삭제해야 합니다.

  1. HTML(내부 HTML 바인딩)

  2. 스타일(CSS)

  3. 특성(바인딩 값)

  4. 리소스(참조 파일)

사용자 화면에 데이터가 표시되기 전에 데이터를 무효화하는 것이 가장 좋습니다. 그러면 원래 데이터가 정리되어 응용 프로그램의 보안 취약점이 악용되지 않도록 방지됩니다.

외부 사용자가 제공한 신뢰할 수 없는 데이터를 신뢰할 수 있는 값으로 항상 변환하려는 경우 DOMPurify 라이브러리를 사용하여 변환할 수 있습니다.

DOMPurify는 HTML을 무효화하고 더티 HTML로 가득 찬 문자열을 사용하여 XSS 공격을 방지합니다. 그런 다음 위험한 HTML로 간주된 항목을 모두 제거하여 XSS 공격을 방지합니다.

import DOMPurify from "dompurify";
const dirtyCode = `I'm some code <img src="..." onload="alert('Here to inject some code');" />`;
​
const App = () => (
  <div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(dirtyCode)}} />
);


DOMPurify는 우리가 전달한 값을 사용하여 모든 스크립트 HTML 요소 및 콘텐츠를 제거하여 코드 주입과 XSS 공격을 방지합니다.


2. React 라이브러리 사용자 정의 피하기

필요에 따라 React 라이브러리를 사용자 정의하고 싶은 마음이 들 수 있지만 그렇게 하면 현재 사용 중인 React 버전에 의존하게 됩니다. 그렇게 되면 이후 React 버전으로 업그레이드하는 것이 쉽지 않아 중요한 보안 수정 사항 및 기능이 누락될 수 있습니다.

React 라이브러리를 개선 및 수정하는 가장 좋은 방법은 끌어오기 요청을 통해 커뮤니티와 변경 사항을 공유하는 것입니다. 이렇게 하면 다른 개발자가 여러분의 변경 사항을 살펴보고 다음 React 버전에 해당 변경 사항을 추가할지 고려할 수 있습니다.


3. 위험한 React API 엔드포인트(Endpoint) 피하기

React의 주요 이점은 개발자가 컴포넌트를 렌더링하기 위해 브라우저의 DOM을 수동으로 편집할 필요가 없다는 점이지만 그렇다고 해서 개발자가 DOM의 요소에 직접 액세스해야 하는 경우가 없는 것은 아닙니다.

이러한 경우 React에서는 findDOMNodecreateRef 등과 같은 escape hatch를 제공합니다.

escape hatch는 기본 DOM 요소와 해당 API를 반환하므로 응용 프로그램에서는 React를 거치지 않고 직접 요소를 조작할 수 있어 응용 프로그램이 XSS 취약성에 노출됩니다.

악의적인 행위자가 이러한 점을 악용하지 못하도록 방지하기 위해 수행할 수 있는 몇 가지 단계가 있습니다.

  • 텍스트 출력 대신 HTML 코드 출력 피하기

  • DOMPurifier를 사용하여 데이터 무효화

  • 적절한 API를 사용하여 안전하게 HTML 노드 생성


4. HTTP 수준 취약성

CSRF(교차 사이트 요청 위조):

CSRF는 응용 프로그램에서 신뢰하는 사용자가 권한이 없는 악의적 명령을 보내는 공격입니다. 이러한 공격의 예로 사용자가 웹 사이트에서 자신의 계정 삭제를 원하는 경우를 들 수 있습니다. 사용자는 계정을 삭제하기 위해 웹 사이트에 로그인해야 합니다.

삭제 요청 인증에 대한 유효성을 검사하기 위해 세션이 브라우저에 쿠키를 통해 저장됩니다. 그러나 이렇게 하면 사이트에 CSRF 취약성이 남습니다. 사이트에서는 브라우저에 존재하는 쿠키를 사용하여 서버에 삭제 요청을 보내야 합니다.

이러한 취약성을 완화할 수 있는 일반적인 방법은 응용 프로그램 서버에서 무작위 인증 토큰을 쿠키에 포함해 전송하도록 하는 것입니다.

클라이언트는 쿠키를 읽고 모든 후속 요청에 동일한 토큰과 함께 사용자 정의 요청 헤더를 추가합니다. 이렇게 하면 인증 토큰을 소유하지 않는 공격자의 요청을 거부할 수 있습니다.


XSSI(교차 사이트 스크립트 포함):

XSSI는 공격자의 웹 사이트가 응용 프로그램의 JSON API에서 데이터를 읽도록 허용하는 공격입니다. 이 공격은 기본 JavaScript 객체 생성자를 재정의할 수 있는 오래된 브라우저의 취약성을 악용합니다.

그런 다음 script 태그를 사용하여 API URL을 제공합니다. 즉, 프로그램에 다른 누군가의 코드를 포함하게 됩니다. 그러면 해당 코드에 포함되는 내용과 해당 코드가 호스트되는 서버의 보안을 전혀 제어할 수 없습니다.

모든 JSON 응답을 실행 불가능하도록 만들면 서버에서 이러한 공격을 완화할 수 있습니다. 예를 들어, JSON 응답에 문자열 ")]}',\n"으로 접두사를 붙인 다음 코드를 사용하여 데이터를 구문 분석하기 전에 제거하면 공격을 완화할 수 있습니다. 스크립트 포함은 항상 전체 스크립트이기 때문에 공격자는 이렇게 할 수 없습니다.


React 보안

보안은 보안 전문가뿐만 아니라 개발자도 해결해야 하는 중요한 문제입니다. 안전한 코드 작성을 위한 간단한 방침을 따르면 버그 및 오류의 악용을 방지할 수 있습니다.

“완벽한 것”은 없기 때문에 항상 수정하고, 패치를 릴리스하는 등 지속적인 개선과 함께 안전한 코드를 작성하겠다는 마음가짐을 가지고 불필요한 위험을 피해야 합니다.

프레임워크와 무관한 웹 컴포넌트를 찾고 계신다면, 아래의 제품들에 대해 알아보시기 바랍니다.

  • Wijmo - JavaScript 기반 UI 컴포넌트
  • SpreadJS - JavaScript 기반 Excel 스프레드시트 컴포넌트

GrapeCity는 Angualr, React, Vue와 같은 최신 JavaScript 프레임워크에서 컴포넌트를 확장하고자 최선을 다하고 있습니다.

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.