안전한 웨 애플리케이션을 위한 자바스크립트 보안

Size: px

Start display at page:

Download "안전한 웨 애플리케이션을 위한 자바스크립트 보안"

철기 남
5 years ago
Views:

1 119 안전한웹애플리케이션을위한 Y.E 리앙지음 / 박미정옮김 자바스크립트보안

2 119 안전한웹애플리케이션을위한 Y.E 리앙지음 / 박미정옮김 자바스크립트보안 이도서는 JavaScript Security(PACKT publishing) 의번역서입니다

3 표지사진김민국이책의표지는김민국님이보내주신풍경사진을담았습니다. 리얼타임은독자의시선을담은풍경사진을책표지로보여주고자합니다. 사진보내기 안전한웹애플리케이션을위한자바스크립트보안 초판발행 2015 년 11 월 30 일 지은이 Y.E 리앙 / 옮긴이박미정 / 펴낸이김태헌펴낸곳한빛미디어 ( 주 ) / 주소서울시마포구양화로 7길 83 한빛미디어 ( 주 ) IT출판부전화 / 팩스 등록 1999년 6월 24일제 호 ISBN / 정가 9,900원 총괄배용석 / 책임편집김창수 / 기획 편집정지연 / 교정이미연디자인표지 / 내지여동일마케팅박상용, 송경석 / 영업김형진, 김진불, 조유미 이책에대한의견이나오탈자및잘못된내용에대한수정정보는한빛미디어 ( 주 ) 의홈페이지나아래이메일로알려주십시오. 한빛미디어홈페이지 / 이메일 ask@hanbit.co.kr Published by HANBIT Media, Inc. Printed in Korea Copyright c Packt Publishing First published in the English language under the title Javascript Security ( ). This translation is published and sold by permission of Packt Publishing, which owns or controls all rights to publish and sell the same. 이책의저작권은 Packt Publishing과한빛미디어 ( 주 ) 에있습니다. 저작권법에의해보호를받는저작물이므로무단복제및무단전재를금합니다. 지금하지않으면할수없는일이있습니다. 책으로펴내고싶은아이디어나원고를메일 (ebookwriter@hanbit.co.kr) 로보내주세요. 한빛미디어 ( 주 ) 는여러분의소중한경험과지식을기다리고있습니다.

4 저자 역자소개 Y.E Liang 지은이 _ Y.E 리앙 Y.E 리앙은연구원이며저자, 웹개발자, 사업기획가다. 그는특히엔지니어링분야에서프론트엔드, 백엔드를모두개발한경험이있고, 자바스크립트 /CSS/HTML을이용한사용자경험 (UX) 및소셜네트워크분석을수행하였으며, 여러책과연구논문을저술하였다. 옮긴이 _ 박미정 컴퓨터공학을전공하고소프트웨어의보안약점도출에대한석사과정을마쳤다. LG CNS에서개발자로공공시스템프로젝트에참여하며회사생활을시작하였고, 그후한국비트코인거래소 (Korbit) 에서서버개발자로근무하였다. 현재는엔지니어로서의미래를고민하고설계하는일에관심이많다.

5 역자서문 자바스크립트는동적인웹페이지를위해주로사용되기시작하였다. 하지만이제는 Node.js처럼서버사이드에서도사용되는, 넓은영역을다룰수있는언어가되었다. 자바스크립트만으로클라이언트와서버모두를구현하면서점점강력해지는자바스크립트에강한인상을받은기억을지울수가없다. 이책에서는자바스크립트를사용하면서생길수있는보안약점또는취약점들의기본에대해설명한다. 이미널리알려진크로스사이트스크립팅, 크로스사이트요청위조와같은취약점들의개념설명과완벽한이해를위한실습과정이포함되어있다. 즉, 이미보안분야에서일하는전문가보다는보안에관심이있거나이제막입문하려는초보자들에게좋은입문서가될것같다. 부족한번역이지만, 자바스크립트와보안에관심있는분들에게작은도움이되었으면좋겠다.

6 이책을읽기전에 보안문제의원인은서버뿐만아니라클라이언트의취약점에도있다. 이책에서는보 안취약점에대한기본지식과이를진단하고예방하는방법을다룬다. 이책에서다루는내용 1장자바스크립트와웹에서는웹에서자바스크립트의역할을설명한다. 오늘날자바스크립트는웹페이지에동적기능을제공하는것외에도더많은기능을수행한다. 자바스크립트는현재클라이언트단에서뿐만아니라서버단에서도사용된다. 자바스크립트는웹에서의다양한경험을만들어주는사실상의표준이다. 2장안전한 Ajax RESTful API에서는 RESTful API와함께자바스크립트를사용하는방법을다룬다. 기본적인 GET, POST 호출을생성하는방법과악의적인요청을생성하는방법을설명한다. 3장크로스사이트스크립팅에서는크로스사이트스크립팅이무엇인지, 이문제가어떻게발생하는지설명하고, 이러한위험을최소화하는방법을배운다. 4장크로스사이트요청위조에서는크로스사이트요청위조가무엇인지, 이문제가어떻게발생하는지설명하고, 이러한위험을최소화하는방법을배운다. 5장클라이언트에서잘못된신뢰에서는다양한형태로일어나는보안문제에대해논의한다. 일반적으로클라이언트에서잘못된신뢰는공격자에의한악의적인행동으로개발자의자바스크립트코드가의도한대로동작하지않을때발생한다. 6장자바스크립트피싱에서는자바스크립트가악의적인목적을달성하기위해사용될수있는다른방법을살펴본다. 자바스크립트피싱은일반적으로온라인신원도용과개인정보침해와관련있다.

7 이책을위해필요한것들이책을살펴보려면다음과같은준비가필요하다. 구글크롬같은일반적인브라우저가설치된컴퓨터와안정적인인터넷연결 Python 2.7.x, Python Tornado( Tornado-cors ( Py-Mongo ( api.mongodb.org/python/current/) 를포함한 Python 관련라이브러리 MongoDB 버전 2.x ( Node.js 버전 x 또는그이상 ( 이책의대상독자이책은자바스크립트에대한기본지식이있으며, 웹 API를이용하기위한 jquery 등의자바스크립트사용이익숙한독자를대상으로한다. Python 스크립트경험은도움이되지만, 필수요구사항은아니다. 가장중요한것은자바스크립트보안의기본지식을알고싶어하는것이다. 예제코드다운로드 이책의예제코드는다음에서다운로드할수있다.

8 차례 chapter 1 자바스크립트와웹 자바스크립트와 HTML/CSS 요소 클라이언트를넘어선자바스크립트 자바스크립트보안이슈 요약 020 chapter 2 안전한 Ajax RESTful API RESTful API 서버구축 유사한공격에대한기본적인방어 요약 040 chapter 3 크로스사이트스크립팅 XSS란 XSS 예제 XSS에대한방어 요약 055 chapter 4 크로스사이트요청위조 CSRF란 CSRF의다른예제 보호의다른형태 요약 066

9 chapter 5 클라이언트에서잘못된신뢰 신뢰가잘못된경우 요약 078 chapter 6 자바스크립트피싱 자바스크립트피싱이란 자바스크립트피싱예제 자바스크립트피싱방어 요약 089

10 chapter 1 자바스크립트와웹 1 장에서는웹에서수행할수있는기본적인자바스크립트의개요를설명하고, 자 바스크립트보안문제를기본적인예제를가지고다루어보겠다. 이번장에서다룰내용은다음과같다. 자바스크립트와 HTML/CSS 의관계 자바스크립트라이브러리인 jquery 의기본적인사용예 자바스크립트보안의고급개념 1.1 자바스크립트와 HTML/CSS 요소 자바스크립트는웹페이지에동적인기능을제공한다. HTML 요소의위치변경부터 Ajax 수행까지불과몇년전보다자바스크립트로할수있는것들이많아졌다. 다음은자바스크립트로수행할수있는기본적인것들이다. 애니메이션 콘텐츠추가 단일페이지 single-page 애플리케이션생성 Google Analytics, Facebook과같은소셜플러그인등의서드파티자바스크립트위젯사용가장중요한것은 jquery, ReactJS와같은자바스크립트라이브러리및 AngularJS 같은프레임워크의출현과함께이러한모든것을적용하기가절대 1 자바스크립트와웹 - 009

11 쉽지않다는점이다. 그래서이책에서다루는자바스크립트예제는 jquery 를사 용한다 jquery 효과 보안관련주제로넘어가기전에이번절에서는기본적인애니메이션효과를살펴본다. 코드를테스트하려면텍스트에디터와브라우저가필요하다. 간단한 hide/ show 효과로시작해보자. NOTE 여기서는 ( 그리고이책의나머지부분에서 ) Ajax, 애니메이션과같은기능을위해 jquery를사용한다. 중요한점은자바스크립트와관련된개념에집중하는것이다. Hide 와 Show hide 와 show 액션은 jquery 의 hide ( ) 와 show ( ) 함수를사용해서수행한다. 다음코드를보자. <html> <head> <style> #item { display: block; height:100px; width:100px; border:1px solid black; background-color: yellow } </style> <script src =" js"></script> <script> $(document).ready(function() { $("#hide").click(function(){ 010 -

12 }); $("#item").hide(); $("#show").click(function(){ $("#item").show(); }); }); </script> </head> <body> <button id ="show">show Me</button> <button id ="hide">hide Me</button> <div id="item">i am item</div> </body> </html> 앞의코드를복사한후 hide_show.html 파일에붙여넣고브라우저에서열어보자. 다음과같은화면이보이는데, [Show Me] 와 [Hide Me] 버튼을클릭하면노란상자가보였다사라진다. 그림 1-1 간단한 show/hide 액션 같은기능을 toggle ( ) 함수로도구현할수있다. Toggle toggle ( ) 함수는요소를보이고숨기는기능을한다. 앞에서작성한코드를복사하여새로운파일 (toggle.html) 을생성한다. 그리고 $ (document).ready ( ) 안의코드를다음의코드로교체하자. 1 자바스크립트와웹 - 011

13 $("#toggle_button").click(function(){ }); $("#item").toggle(); 버튼 ID 나 item 내용은마음대로변경해도된다. 필자는다음과같이코드를수 정하였다. <html> <head> <style> #item { display: block; height:100px; width:100px; border:1px solid black; background-color: yellow } </style> <script src =" js"></script> <script> $(document).ready(function() { $("#toggle_button").click(function(){ $("#item").toggle(); }); }) </script> </head> <body> <button id ="toggle_button">toggle Button</button> <div id ="item">toggle Toggle Toggle</div> </body> </html> 이파일을브라우저에서열면다음화면이나타난다

그림 1-2 간단한 toggle 액션 [Toggle Button] 을클릭하면예상한대로노란상자가없어졌다가다시보인다. 애니메이션 jquery는애니메이션을수행하는간단한함수 animate ( ) 를제공한다. 앞의예제 (toggle.html) 를복사하여 animation.html 파일을생성하고, 다음코드의강조된부분처럼 animation.html 파일을변경하자.

14 그림 1-2 간단한 toggle 액션 [Toggle Button] 을클릭하면예상한대로노란상자가없어졌다가다시보인다. 애니메이션 jquery는애니메이션을수행하는간단한함수 animate ( ) 를제공한다. 앞의예제 (toggle.html) 를복사하여 animation.html 파일을생성하고, 다음코드의강조된부분처럼 animation.html 파일을변경하자. <html> <head> <style> #item { display: block; position: relative; left:0px; height:100px; width:100px; border:1px solid black; background-color: yellow } </style> <script src =" js"></script> <script> $(document).ready(function() { $("#animate_button").click(function(){ $("#item").animate({ opacity: 0.5, 1 자바스크립트와웹 - 013

#item의 display 속성을 block으로, position: relative로변경하였다. 현재버튼 ID는 animate_button이다.

15 left: "+= 50", }, 1000); }); }) </script> </head> <body> <button id ="animate_button">animate Button</button> <div id ="item">animate me</div> </body> </html> #item의 display 속성을 block으로, position: relative로변경하였다. 현재버튼 ID는 animate_button이다. 버튼을클릭하면 animate() 함수가 item 에대해작동하는것을주목하자. 다음은 [Animate Button] 을클릭했을때확인할수있는화면이다. 그림 1-3 애니메이션 애니메이션은다음과같이보인다. 그림 1-4 버튼의액션연결상태 014 -

안전한 웨 애플리케이션을 위한 자바스크립트 보안

안전한 웨 애플리케이션을 위한 자바스크립트 보안 119 Y.E 리앙 지음 / 박미정 옮김 안전한 웹 애플리케이션을 위한 자바스크립트 보안 119 안전한 웹 애플리케이션을 위한 Y.E 리앙 지음 / 박미정 옮김 자바스크립트 보안 이 도서는 JavaScript Security(PACKT publishing)의 번역서입니다 표지 사진 김민국 이 책의 표지는 김민국님이 보내 주신 풍경사진을 담았습니다. 리얼타임은