안전한 웹 응용 프로그램을 만드는 데 도움이 되는 중요한 팁

글로벌 디지털 전환의 유입은 인프라 시설에 압력을 가하고 있다.이와 함께 위협 행동은 공격 기술을 계속 개선하고 있다.구멍이 발견되면 공격한다.
이것이 바로 많은 팀들이 보안을 왼쪽으로 옮기고, 심지어는 개발 방법을 DevOps에서 DevSecOps로 발전시키는 이유이다.
개발자들은 여전히 일부 우려를 가지고 있는데, 대부분이 발표 시간에 집중되어 있다.그러나 안전을 위해 빠른 발표를 희생해서는 안 됩니다.이것은 반드시 이것이 아니면 저것의 문제가 아니다.
본 논문에서는 React 응용 프로그램을 신속하게 보호할 수 있는 네 가지 방법을 이해할 수 있습니다.이것은 간단한 안전 실천이므로 당신의 업무 절차를 중단해서는 안 된다.

반응 개요

React는 일반적으로 하나의 프레임워크로 오해받는다. 이것은 사용자 인터페이스나 UI 구성 요소를 구축하는 데 사용되며, 페이스북과 개인 개발자와 회사로 구성된 지역 사회 유지보수에 사용된다.React는 단일 페이지 애플리케이션(SPA)이나 모바일 애플리케이션을 개발하는 기반이 될 수 있습니다.
React 응용 프로그램은 React 구성 요소를 사용하여 독립적이고 다시 사용할 수 있는 코드 비트를 통해 구축됩니다.JavaScript 함수와 유사하지만 독립적으로 작동하며 render () 함수로 HTML을 반환합니다.
React는 두 가지 어셈블리 유형, 즉 클래스 및 기능 어셈블리로 구성됩니다.

클래스 구성 요소: React에서 확장해야 합니다.어셈블리를 구성하고 React 요소를 반환하는 렌더링 함수를 생성합니다.

Functional Component: 일반 JavaScript 함수로 props를 매개 변수로 받아들이고 React 요소를 되돌려줍니다.

React 애플리케이션을 보호하는 4가지 방법

React에서 실행되는 애플리케이션을 보호하는 방법에 대한 모범 사례를 살펴보십시오.이러한 모범 사례는 사이트 간 스크립트(XSS)와 사이트 간 위조 요청(CSRF) 등의 공격을 방지하는 데 도움을 줄 것입니다. 이것은 저조한 자동 공격일 수도 있지만 advanced persistent threat의 일부분일 수도 있고 더욱 광범위한 공격 활동의 첫걸음이 될 수도 있습니다.

1. 사이트 간 스크립트 방지(XSS)

크로스 사이트 스크립트(XSS) 공격은 코드 주입이고 가장 흔히 볼 수 있는 XSS 공격 유형 중 하나는 DOM 기반 공격이다.공격자의 목표는 악성코드를 사이트의 DOM 요소에 주입하여 사용자가 웹 페이지에 로그인할 때 악성공격, 예를 들어 사용자 데이터를 훔치는 것을 실행하는 것이다.

이러한 상황을 방지하기 위해서 개발자는 몇 가지 곳에서 신뢰를 받지 못하는 입력을 정리해야 한다.

HTML(바인딩 내부 HTML)

스타일(CSS)

속성(고정값)

리소스(참조문서)

가장 좋은 것은 사용자 화면에 데이터를 표시하기 전에 데이터를 소독하는 것이다.그것은 프로그램의 어떠한 보안 결함도 이용하지 않도록 원시 데이터를 정리할 것이다.
외부 사용자가 제공한 신뢰할 수 없는 값을 신뢰할 수 있는 값으로 바꾸기를 원합니다. DOMPurify library
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 라이브러리를 개선하고 복구하는 가장 좋은 방법은pull 요청을 통해 지역 사회와 변경 사항을 공유하는 것입니다.이것은 다른 개발자가 변경 사항을 보고 다음 버전에 추가하는 것을 고려할 수 있도록 합니다.

3. 위험한 API 끝 방지

React의 관건적인 장점은 개발자가 브라우저의DOM을 수동으로 편집하지 않고 구성 요소를 보여주는 것이다. 그러나 이것은 개발자가DOM 요소에 직접 접근할 필요가 없다는 것을 의미하지 않는다.
이러한 상황에서 React는 우리에게 탈출구를 제공했다. 예를 들어findDOMNode와createRef이다.
이스케이프 해치는 네이티브 DOM 요소와 API를 반환하므로 React를 사용하지 않고도 응용 프로그램이 XSS 취약점에 쉽게 취약할 수 있습니다.
악의적인 에이전트의 사용을 방지하기 위해 다음과 같은 몇 가지 방법으로 애플리케이션을 보호할 수 있습니다.

텍스트 출력이 아닌 HTML 코드 출력을 방지합니다

.

DomPurizer

로 데이터 정리

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

4. HTTP 레벨 취약성

사이트 간에 CSRF(위조 요청):

CSRF는 어플리케이션에서 신뢰하는 사용자가 무단 악성 명령을 보내는 공격입니다.예를 들어 사용자가 사용자의 사이트에 있는 계정을 삭제하려고 한다면.그들의 계정을 삭제하려면, 그들은 당신의 사이트에 로그인해야 합니다.
삭제 요청의 인증을 검증하기 위해 세션은 쿠키를 통해 브라우저에 저장됩니다.그러나, 이것은 당신의 사이트에 CSRF 빈틈을 남길 것입니다.브라우저에 쿠키가 존재하는 경우 서버에 삭제 요청을 보내야 합니다.
이러한 상황을 완화시키는 흔한 방법은 응용 서버로 하여금 쿠키에 포함된 무작위 인증 영패를 발송하게 하는 것이다.
클라이언트가 쿠키를 읽고 모든 후속 요청에 같은 영패를 가진 사용자 정의 요청 헤더를 추가합니다.신분 검증 영패가 없는 공격자의 요청을 거부하는 것이 가능하다.

사이트 전체 스크립트(XSSI):
XSSI는 공격자의 웹사이트가 애플리케이션의 JSON API로부터 데이터를 읽을 수 있도록 하는 공격이다.기존 브라우저의 빈틈을 사용합니다. 이 빈틈은 자바스크립트 대상 구조 함수를 다시 쓸 수 있도록 합니다.
그런 다음 스크립트 태그를 사용하여 API URL을 제공할 수 있으며 이는 프로그램에 다른 사람의 코드가 포함되어 있음을 의미합니다.코드의 내용을 제어할 수 없고, 위탁 관리 코드의 서버 보안도 제어할 수 없습니다.
서버는 모든 JSON 응답을 실행할 수 없게 함으로써 이러한 공격을 줄일 수 있습니다.예를 들어, 이것은 그것들 앞에 문자열 ']}' 을 붙이고 데이터를 분석하기 전에 코드를 사용하여 삭제할 수 있다.공격자는 스크립트가 항상 전체 스크립트를 포함하기 때문에 이 동작을 수행할 수 없습니다.

안전 반응

안전성은 관건적인 문제로 안전 전문가가 해결해야 할 뿐만 아니라 개발자도 해결해야 한다.보안 코드를 작성하는 간단한 실천은 빈틈과 오류가 이용되는 것을 방지하는 데 도움이 된다.
'완벽하다'는 것은 없지만 항상 패치가 있어야 하고 패치가 발표되어야 하는 등은 있지만 불필요한 위험을 피하기 위해 안전한 코드 심리를 취할 수 있다.