NodeJS 기반의 프론트엔드와 백엔드 분리에 대한 생각과 실천 (4) 보안 문제에 대한 솔루션

머리말

프론트엔드와 백엔드 분리 개발 모델에서 개발 역할과 기능 측면에서 가장 눈에 띄는 변화 중 하나는 과거에는 브라우저 환경에서 개발만 담당하던 프론트엔드 학생들이 필요하다는 것입니다. 서버 수준에 손을 대고 서버 측 코드를 작성합니다. 우리가 직면한 근본적인 질문은 웹 보안을 어떻게 보장할 것인가 하는 것입니다.

이 글에서는 프론트엔드와 백엔드 분리 모드 아키텍처를 바탕으로 웹 개발 시 프론트엔드에서 발생하는 보안 문제에 대한 해결 방법과 대책 및 예방 조치를 제안합니다.

XSS(교차 사이트 스크립팅 공격) 방어

문제 및 해결 방법

크로스 사이트 스크립팅 공격(XSS, Cross-site scripting)은 웹사이트를 공격하는 가장 일반적이고 기본적인 방법이다. 공격자는 공격적인 코드가 포함된 데이터를 웹 페이지에 게시할 수 있으며, 뷰어가 웹 페이지를 볼 때 뷰어 사용자의 신원과 권한을 사용하여 특정 스크립트가 실행됩니다. XSS는 쉽게 사용자 데이터를 수정하고, 사용자 정보를 훔치고, CSRF 공격과 같은 다른 유형의 공격을 일으킬 수 있습니다.

XSS 공격을 방지하는 기본 방법은 HTML 페이지로 출력되는 모든 데이터가 HTML(HTML 이스케이프)로 이스케이프되도록 하는 것입니다. 예를 들어 다음 템플릿 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

이 코드의 $description은 템플릿 변수입니다(다른 템플릿에 정의된 변수의 구문은 다릅니다. 여기서는 예시일 뿐입니다). 사용자가 제출한 데이터이면 공격자는 "JavaScript"가 포함된 코드 조각을 입력할 수 있습니다. "이므로 위 템플릿 문의 결과는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

<텍스트 영역 이름="설명">

<script>alert('hello')'</script>

위 코드는 브라우저에 렌더링되면 JavaScript 코드를 실행하고 화면에 hello를 경고합니다. 물론 이 코드는 무해하지만 공격자가 자바스크립트를 만들어 사용자 정보를 수정하거나 쿠키 데이터를 훔칠 수 있습니다.

해결책은 매우 간단합니다. 즉, $description 값을 html로 이스케이프하는 것입니다. 이스케이프된 출력 코드는 다음과 같습니다

코드 복사 코드는 다음과 같습니다.

<텍스트 영역 이름="설명">

<script>alert("hello!")</script>

위의 이스케이프된 HTML 코드는 무해합니다.

미드웨이의 솔루션

페이지의 모든 사용자 출력 데이터를 이스케이프

데이터를 이스케이프하는 여러 가지 상황과 방법이 있습니다.

1. 템플릿 내부에 제공된 메커니즘을 사용하여 탈출합니다

Midway는 내부적으로 KISSY xtemplate을 템플릿 언어로 사용합니다.

xtemplate 구현에서는 두 개의 대괄호({{val}})를 사용하여 템플릿 데이터를 문법적으로 구문 분석합니다. 기본적으로 데이터는 HTML 이스케이프되므로 개발자는 다음과 같이 템플릿을 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

xtemplate에서 출력 데이터가 이스케이프되는 것을 원하지 않으면 세 개의 대괄호({{{val}}})를 사용해야 합니다.

2. Midway에서 이스케이프 함수를 명시적으로 호출합니다

개발자는 Node.js 프로그램이나 템플릿에서 Midway가 제공하는 HTML 이스케이프 메서드를 직접 호출하여 다음과 같이 데이터를 명시적으로 이스케이프할 수 있습니다.

방법 1: Node.js 프로그램의 HTML 이스케이프 데이터

코드 복사 코드는 다음과 같습니다.

var Security= require('midway-security');

//서버의 데이터, 예: {html:'',other:""}

data.html =Security.escapeHtml(data.html);

xtpl = xtpl.render(데이터);

방법 2: 템플릿의 HTML 데이터를 HTML 이스케이프

코드 복사 코드는 다음과 같습니다.

참고: 템플릿 내에서 데이터가 이스케이프되지 않는 경우에만 Security.escapeHtml을 사용하여 이스케이프하세요. 그렇지 않으면 이중 이스케이프가 템플릿과 프로그램 내부에 중첩되어 예기치 않은 출력이 발생합니다.

권장사항: xtemplate을 사용하는 경우 템플릿에 내장된 {{}}를 직접 사용하여 이스케이프하는 것이 좋습니다. 다른 템플릿을 사용하는 경우 Security.escapeHtml을 사용하여 이스케이프하는 것이 좋습니다.

페이지에서 사용자가 출력한 서식 있는 텍스트 필터링

“사실 저는 서식 있는 텍스트를 출력하고 싶은데요. 예를 들어 일부 게시판과 포럼에서는 사용자에게 간단한 글꼴 크기, 색상, 배경 및 기타 기능을 제공하는데 이러한 서식 있는 텍스트를 어떻게 처리해야 할까요?”라고 생각할 수도 있습니다. XSS를 방지하려면? "

1. Midway에서 제공하는 richText 기능을 활용하세요

Midway는 서식 있는 텍스트를 필터링하고 XSS, 피싱, 쿠키 도용과 같은 취약점을 방지하는 데 특별히 사용되는 richText 메서드를 제공합니다.

게시판이 있으며 템플릿 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

{{{메시지}}}

메시지는 사용자 입력 데이터이므로 메시지 게시판의 내용에는 풍부한 텍스트 정보가 포함되어 있으므로 여기 xtemplate에서는 중괄호 3개가 사용되며 기본적으로 HTML 이스케이프가 수행되지 않으므로 사용자가 입력하는 데이터는 다음과 같습니다. 다음과 같습니다:

코드 복사 코드는 다음과 같습니다.

http://eval.com/eval.js"> style="color:red;font-size:20px;위치:고정 ;">메시지를 남깁니다

위의 리치 텍스트 데이터가 페이지에 직접 출력되면 필연적으로 eval.com 사이트의 js가 현재 페이지에 주입되어 XSS 공격이 발생하게 됩니다. 이 취약점을 방지하려면 템플릿이나 프로그램에서 Security.richText 메서드를 호출하여 사용자가 입력한 서식 있는 텍스트를 처리하기만 하면 됩니다.

호출 방법은 escapeHtml과 유사하며, 다음과 같은 두 가지 방법이 있습니다

방법 1: Node.js 프로그램에서 직접 호출

코드 복사 코드는 다음과 같습니다.

message =Security.richText(message);

var html = xtpl.render(메시지)

방법 2: 템플릿에서

호출

코드 복사 코드는 다음과 같습니다.

Security.richText({{{메시지}}})

Security의 richText 메소드를 호출한 후 최종 출력은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

메시지를 남깁니다

우선 XSS 공격을 일으킬 수 있는 스크립트 태그가 직접 필터링됨과 동시에 스타일 태그의 CSS 속성 position:fixed도 필터링되는 것을 볼 수 있습니다. 마침내 무해한 HTML 리치 텍스트를 출력합니다

XSS 공격의 다른 가능한 경로에 대해 알아보세요

페이지 템플릿에서 발생할 수 있는 XSS 공격 외에도 웹 애플리케이션이 위험에 노출될 수 있는 여러 다른 방법이 있습니다.

1. 오류페이지 취약점

페이지를 찾을 수 없는 경우 시스템은 404 찾을 수 없음 오류를 보고할 수 있습니다. 예: http://localhost/page/not/found

404 찾을 수 없음
페이지 /page/not/found가 종료되지 않습니다
분명히 공격자는 이 페이지를 사용하여 http://localhost/

NodeJS 기반의 프론트엔드와 백엔드 분리에 대한 생각과 실천 (4) 보안 문제에 대한 솔루션_node.js