Vue 응용 프로그램의 보안에 유용한 팁 > 시티즌 인사이트

본문 바로가기

시티즌 커뮤니티

시티즌 인사이트

IT&개발 정보 Vue 응용 프로그램의 보안에 유용한 팁

페이지 정보

작성자 GrapeCity 작성일 22-01-03 10:59 조회 267회 댓글 0건

본문

전 세계적인 디지털 변환의 유입은 인프라에 압력을 가하고 있습니다. 그러는 동안 위협 행위자들은 계속해서 공격 기법을 개선하고 있습니다. 취약한 부분이 있으면 해당 취약점이 악용될 것입니다. 때문에 많은 팀에서는 개발 방법론을 DevOps에서 DevSecOps로 발전시키는 데까지 나아가면서 보안을 급진적으로 혁신하고 있습니다.


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


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



Vue 프레임워크 개요


Vue는 웹 사용자 인터페이스를 구축하기 위한 진보적인 프레임워크입니다. 이것은 React 및 Angular와 같은 프레임워크와 통합되는 채택 가능한 비단조형 프레임워크입니다. Vue는 보기 레이어에만 집중하면서 SPA(싱글 페이지 응용 프로그램)를 빠르게 구축할 수 있습니다.


이제는 Vue 3으로 작성되며 TypeScript에서 전체 지원됩니다. 응용 프로그램의 성장에 따라 추가 도구를 포함하고 런타임 오류 가능성을 방지하는 문제에 대해 걱정할 필요가 없습니다.



Vue 응용 프로그램을 보호하는 4가지 방법


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


보안



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

XSS(교차 사이트 스크립팅) 공격은 일종의 코드 삽입으로, XSS 공격의 가장 일반적인 유형은 DOM 기반 공격입니다. 공격자는 사용자가 웹 페이지를 로드할 때 악의적 공격(예: 사용자 데이터 훔치기)을 수행하는 악의적인 코드를 웹 사이트의 DOM 요소에 삽입하는 것이 목표입니다. 이 문제를 방지하기 위해 개발자는 여러 위치에서 신뢰할 수 없는 입력을 삭제해야 합니다.

  1. HTML(내부 HTML 바인딩)

  2. 스타일(CSS)

  3. 특성(바인딩 값)

  4. 리소스(참조 파일)


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


외부 사용자가 제공한 신뢰할 수 없는 데이터를 신뢰할 수 있는 값으로 항상 변환하고자 할 것입니다. NPM에서 사용할 수 있는 vue-sanitize 라이브러리를 사용하면 서버에서 사용자 입력값을 쉽게 허용 목록에 추가하고 삭제할 수 있습니다.


이 작업은 HTML을 삭제하고 더티 HTML 문자열을 사용하여 XSS 공격을 방지합니다. 그런 다음 위험한 HTML로 간주되는 것을 모두 제거하면서 허용 목록에 추가한 HTML 태그를 허용합니다.

import VueSanitize from "vue-sanitize";
Vue.use(VueSanitize);


태그와 옵션을 허용 목록에 추가하는 방법은 아주 간단합니다(아래 참조).

defaultOptions = {
  allowedTags: ['a', 'b'],
  allowedAttributes: {
      'a': ['href']
  }
}
Vue.use(VueSanitize, defaultOptions);


그러면 VueSanitize는 사용자가 전달한 값을 사용하여 HTML을 삭제하므로, 허용 목록에 추가한 항목을 보호하고 코드 삽입 및 XSS 공격을 예방할 수 있습니다.



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


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


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


또한 Vue 응용 프로그램에서 사용 중인 NPM 패키지를 최신 상태로 유지해야 합니다. 이 작업을 통해 해결된 보안 문제나 향상된 기능을 응용 프로그램에 포함할 수 있습니다.



3. 위험한 Vue API 끝점 피하기


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


ref 등을 DOM 요소에 액세스하기 위해 사용하는 방법은 매우 간단합니다(아래 참조).

<template>
  <div id="account">
      <user-component ref="user" />
  </div>
<template>
​
<script>
import UserComponent from "/components/UserComponent";
​
export default {
  name: "user-component",
  components: {
      UserComponent
  },
  mounted() {
      this.$refs.user.$refs.userName.focus();
  }
};
</script>


이제는 사용자 컴포넌트의 DOM 요소와 API에 대한 참조가 가능하며, 이를 위해 Vue를 실행하는 대신 DOM 요소를 직접 조작하기 위해 응용 프로그램을 사용할 수 있습니다. 그러나 이 방법은 응용 프로그램을 XSS 취약성에 노출시킬 수도 있습니다. 악의적인 행위자가 이러한 점을 악용하지 못하도록 응용 프로그램 보호를 위해 수행할 수 있는 몇 가지 단계가 있습니다.


  1. 텍스트 출력 대신 HTML 코드 직접 출력 피하기

  2. VueSanitize 라이브러리를 사용하여 데이터 무결 처리

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



4. HTTP 수준 취약성


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


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


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


이러한 위협을 완화할 수 있는 일반적인 방법은 응용 프로그램 서버에서 무작위 인증 토큰을 쿠키에 포함해 전송하도록 하는 것입니다. 클라이언트는 쿠키를 읽고 모든 후속 요청에 동일한 토큰과 함께 사용자 정의 요청 헤더를 추가합니다. 이렇게 하면 인증 토큰을 소유하지 않는 공격자의 요청을 거부할 수 있습니다.



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

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


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


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



Vue 보안


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


“완벽한 것”은 없기 때문에 항상 더 많은 수정 사항, 릴리스할 패치, 대응해야 할 긴급한 문제가 있게 되지만 안전한 코드 사고방식을 채택하면 불필요한 위험을 피하는 데 도움이 될 수 있습니다.



GrpaeCity와 함께 개발해보세요.


프레임워크에 무관한 웹 컴포넌트를 찾고 계십니까? GrapeCity는 JavaScript UI 컴포넌트Vue, Angular, React 등에 대한 심층적인 지원을 제공하는 강력한 Excel 스타일 JavaScript 스프레드시트 컴포넌트로 구성된 완벽한 집합을 제공합니다.


GrapeCity는 현대적 JavaScript 프레임워크의 컴포넌트를 확장하는 데 전념하고 있습니다. GapeCity JavaScript 라이브러리에서 자세히 알아보세요.


  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.