119 Y.E 리앙 지음 / 박미정 옮김 안전한 웹 애플리케이션을 위한 자바스크립트 보안
119 안전한 웹 애플리케이션을 위한 Y.E 리앙 지음 / 박미정 옮김 자바스크립트 보안 이 도서는 JavaScript Security(PACKT publishing)의 번역서입니다
표지 사진 김민국 이 책의 표지는 김민국님이 보내 주신 풍경사진을 담았습니다. 리얼타임은 독자의 시선을 담은 풍경사진을 책 표지로 보여주고자 합니다. 사진 보내기 ebookwriter@hanbit.co.kr 안전한 웹 애플리케이션을 위한 자바스크립트 보안 초판발행 2015년 11월 30일 지은이 Y.E 리앙 / 옮긴이 박미정 / 펴낸이 김태헌 펴낸곳 한빛미디어(주) / 주소 서울시 마포구 양화로 7길 83 한빛미디어(주) IT출판부 전화 02-325-5544 / 팩스 02-336-7124 등록 1999년 6월 24일 제10-1779호 ISBN 978-89-6848-792-7 15000 / 정가 9,900원 총괄 배용석 / 책임편집 김창수 / 기획 편집 정지연 / 교정 이미연 디자인 표지/내지 여동일 마케팅 박상용, 송경석 / 영업 김형진, 김진불, 조유미 이 책에 대한 의견이나 오탈자 및 잘못된 내용에 대한 수정 정보는 한빛미디어(주)의 홈페이지나 아래 이메일로 알려주십시오. 한빛미디어 홈페이지 www.hanbit.co.kr / 이메일 ask@hanbit.co.kr Published by HANBIT Media, Inc. Printed in Korea Copyright c Packt Publishing 2014. First published in the English language under the title Javascript Security (9781783988006). 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)로 보내주세요. 한빛미디어(주)는 여러분의 소중한 경험과 지식을 기다리고 있습니다.
저자 소개 Y.E Liang 지은이_ Y.E 리앙 Y.E 리앙은 연구원이며 저자, 웹 개발자, 사업 기획가다. 그는 특히 엔지니어링 분야 에서 프론트엔드, 백엔드를 모두 개발한 경험이 있고, 자바스크립트/CSS/HTML을 이용한 사용자 경험(UX) 및 소셜 네트워크 분석을 수행하였으며, 여러 책과 연구 논문 을 저술하였다. 역자 소개 지은이_ 박미정 컴퓨터 공학을 전공하고 소프트웨어의 보안 약점 도출에 대한 석사과정을 마쳤다. LG CNS에서 개발자로 공공시스템 프로젝트에 참여하며 회사생활을 시작하였고, 그 후 한국비트코인거래소(Korbit)에서 서버 개발자로 근무하였다. 현재는 엔지니어로서 의 미래를 고민하고 설계하는 일에 관심이 많다.
역자 서문 자바스크립트는 동적인 웹 페이지를 위해 주로 사용되기 시작하였다. 하지만 이제는 Node.js처럼 서버 사이드에서도 사용되는, 넓은 영역을 다룰 수 있는 언어가 되었다. 자바스크립트만으로 클라이언트와 서버 모두를 구현하면서 점점 강력해지는 자바스 크립트에 강한 인상을 받은 기억을 지울 수가 없다. 이 책에서는 자바스크립트를 사용하면서 생길 수 있는 보안 약점 또는 취약점들의 기 본에 대해 설명한다. 이미 널리 알려진 크로스 사이트 스크립팅, 크로스 사이트 요청 위조와 같은 취약점들의 개념 설명과 완벽한 이해를 위한 실습 과정이 포함되어 있다. 즉, 이미 보안 분야에서 일하는 전문가보다는 보안에 관심이 있거나 이제 막 입문하려 는 초보자들에게 좋은 입문서가 될 것 같다. 부족한 번역이지만, 자바스크립트와 보안에 관심 있는 분들에게 작은 도움이 되었으 면 좋겠다.
이 책을 읽기 전에 보안 문제의 원인은 서버뿐만 아니라 클라이언트의 취약점에도 있다. 이 책에서는 보 안 취약점에 대한 기본 지식과 이를 진단하고 예방하는 방법을 다룬다. 이 책에서 다루는 내용 1장 자바스크립트와 웹에서는 웹에서 자바스크립트의 역할을 설명한다. 오늘날 자바 스크립트는 웹 페이지에 동적 기능을 제공하는 것 외에도 더 많은 기능을 수행한다. 자 바스크립트는 현재 클라이언트단에서뿐만 아니라 서버단에서도 사용된다. 자바스크 립트는 웹에서의 다양한 경험을 만들어주는 사실상의 표준이다. 2장 안전한 Ajax RESTful API에서는 RESTful API와 함께 자바스크립트를 사용 하는 방법을 다룬다. 기본적인 GET, POST 호출을 생성하는 방법과 악의적인 요청을 생성하는 방법을 설명한다. 3장 크로스 사이트 스크립팅에서는 크로스 사이트 스크립팅이 무엇인지, 이 문제가 어 떻게 발생하는지 설명하고, 이러한 위험을 최소화하는 방법을 배운다. 4장 크로스 사이트 요청 위조에서는 크로스 사이트 요청 위조가 무엇인지, 이 문제가 어떻게 발생하는지 설명하고, 이러한 위험을 최소화하는 방법을 배운다. 5장 클라이언트에서 잘못된 신뢰에서는 다양한 형태로 일어나는 보안 문제에 대해 논 의한다. 일반적으로 클라이언트에서 잘못된 신뢰는 공격자에 의한 악의적인 행동으로 개발자의 자바스크립트 코드가 의도한 대로 동작하지 않을 때 발생한다. 6장 자바스크립트 피싱에서는 자바스크립트가 악의적인 목적을 달성하기 위해 사용될 수 있는 다른 방법을 살펴본다. 자바스크립트 피싱은 일반적으로 온라인 신원 도용과 개인정보침해와 관련 있다.
이 책을 위해 필요한 것들 이 책을 살펴보려면 다음과 같은 준비가 필요하다. 구글 크롬 같은 일반적인 브라우저가 설치된 컴퓨터와 안정적인 인터넷 연결 Python 2.7.x, Python Tornado(http://www.tornadoweb.org/en/stable/), Tornado-cors (https://github.com/globocom/tornado-cors), Py-Mongo (http:// api.mongodb.org/python/current/)를 포함한 Python 관련 라이브러리 MongoDB 버전 2.x (http://www.mongodb.org/) Node.js 버전 0.10.2x 또는 그 이상(http://nodejs.org/) 이 책의 대상 독자 이 책은 자바스크립트에 대한 기본 지식이 있으며, 웹 API를 이용하기 위한 jquery 등의 자바스크립트 사용이 익숙한 독자를 대상으로 한다. Python 스크립트 경험은 도움이 되지만, 필수 요구사항은 아니다. 가장 중요한 것은 자바스크립트 보안의 기본 지식을 알고 싶어하는 것이다. 예제 코드 다운로드 이 책의 예제 코드는 다음에서 다운로드할 수 있다. https://www.hanbit.co.kr/exam/2792
한빛 리얼타임 한빛 리얼타임은 IT 개발자를 위한 전자책입니다. 요즘 IT 업계에는 하루가 멀다 하고 수많은 기술이 나타나고 사라져 갑니다. 인 터넷을 아무리 뒤져도 조금이나마 정리된 정보를 찾기도 쉽지 않습니다. 또한, 잘 정리되어 책으로 나오기까지는 오랜 시간이 걸립니다. 어떻게 하면 조금이라 도 더 유용한 정보를 빠르게 얻을 수 있을까요? 어떻게 하면 남보다 조금 더 빨 리 경험하고 습득한 지식을 공유하고 발전시켜 나갈 수 있을까요? 세상에는 수 많은 종이책이 있습니다. 그리고 그 종이책을 그대로 옮긴 전자책도 많습니다. 전자책에는 전자책에 적합한 콘텐츠와 전자책의 특성을 살린 형식이 있다고 생 각합니다. 한빛이 지금 생각하고 추구하는, 개발자를 위한 리얼타임 전자책은 이렇습니다. 1 2 ebook First - 빠르게 변화하는 IT 기술에 대해 핵심적인 정보를 신속하게 제공합니다 500페이지 가까운 분량의 잘 정리된 도서(종이책)가 아니라, 핵심적인 내용을 빠르게 전달하기 위해 조금은 거칠지만 100페이지 내외의 전자책 전용으로 개발한 서비스입 니다. 독자에게는 새로운 정보를 빨리 얻을 기회가 되고, 자신이 먼저 경험한 지식과 정보를 책으로 펴내고 싶지만 너무 바빠서 엄두를 못 내는 선배, 전문가, 고수 분에게 는 좀 더 쉽게 집필할 수 있는 기회가 될 수 있으리라 생각합니다. 또한, 새로운 정보 와 지식을 빠르게 전달하기 위해 O'Reilly의 전자책 번역 서비스도 하고 있습니다. 무료로 업데이트되는 전자책 전용 서비스입니다 종이책으로는 기술의 변화 속도를 따라잡기가 쉽지 않습니다. 책이 일정 분량 이상으 로 집필되고 정리되어 나오는 동안 기술은 이미 변해 있습니다. 전자책으로 출간된 이 후에도 버전 업을 통해 중요한 기술적 변화가 있거나 저자(역자)와 독자가 소통하면서 보완하여 발전된 노하우가 정리되면 구매하신 분께 무료로 업데이트해 드립니다.
3 4 독자의 편의를 위해 DRM-Free로 제공합니다 구매한 전자책을 다양한 IT 기기에서 자유롭게 활용할 수 있도록 DRM-Free PDF 포맷으로 제공합니다. 이는 독자 여러분과 한빛이 생각하고 추구하는 전자책을 만들 어 나가기 위해 독자 여러분이 언제 어디서 어떤 기기를 사용하더라도 편리하게 전자 책을 볼 수 있도록 하기 위함입니다. 전자책 환경을 고려한 최적의 형태와 디자인에 담고자 노력했습니다 종이책을 그대로 옮겨 놓아 가독성이 떨어지고 읽기 어려운 전자책이 아니라, 전자책 의 환경에 가능한 한 최적화하여 쾌적한 경험을 드리고자 합니다. 링크 등의 기능을 적극적으로 이용할 수 있음은 물론이고 글자 크기나 행간, 여백 등을 전자책에 가장 최적화된 형태로 새롭게 디자인하였습니다. 앞으로도 독자 여러분의 충고에 귀 기울이며 지속해서 발전시켜 나가겠습니다. 지금 보시는 전자책에 소유 권한을 표시한 문구가 없거나 타인의 소유권한을 표시한 문구가 있다면 위법하게 사용하고 있을 가능성이 큽니다. 이 경우 저작권법에 따라 불이익을 받으실 수 있습니다. 다양한 기기에 사용할 수 있습니다. 또한, 한빛미디어 사이트에서 구매하신 후에는 횟수와 관계없이 다운로드 할 수 있습니다. 한빛미디어 전자책은 인쇄, 검색, 복사하여 붙이기가 가능합니다. 전자책은 오탈자 교정이나 내용의 수정 보완이 이뤄지면 업데이트 관련 공지를 이메일로 알려 드리며, 구매하 신 전자책의 수정본은 무료로 내려받으실 수 있습니다. 이런 특별한 권한은 한빛미디어 사이트에서 구매하신 독자에게만 제공되며, 다른 사람에게 양도나 이전은 허 락되지 않습니다.
차례 chapter 1 자바스크립트와 웹 011 1.1 자바스크립트와 HTML/CSS 요소 011 1.2 클라이언트를 넘어선 자바스크립트 020 1.3 자바스크립트 보안 이슈 020 1.4 요약 022 chapter 2 안전한 Ajax RESTful API 023 2.1 RESTful API 서버 구축 023 2.2 유사한 공격에 대한 기본적인 방어 040 2.3 요약 042 chapter 3 크로스 사이트 스크립팅 043 3.1 XSS란 043 3.2 XSS 예제 044 3.3 XSS에 대한 방어 055 3.4 요약 057 chapter 4 크로스 사이트 요청 위조 059 4.1 CSRF란 059 4.2 CSRF의 다른 예제 065 4.3 보호의 다른 형태 066 4.4 요약 068
chapter 5 클라이언트에서 잘못된 신뢰 069 5.1 신뢰가 잘못된 경우 069 5.2 요약 080 chapter 6 자바스크립트 피싱 081 6.1 자바스크립트 피싱이란 081 6.2 자바스크립트 피싱 예제 081 6.3 자바스크립트 피싱 방어 089 6.4 요약 091
chapter 3 크로스 사이트 스크립팅 3장에서는 가장 일반적인 자바스크립트 보안 공격 중 하나인 크로스 사이트 스크 립팅 XSS, Cross-site scripting 을 살펴본다. 3.1 XSS란 XSS는 공격자가 원격 서버에 코드(일반적으로 클라이언트단 스크립트, 이 책에서는 자바 스크립트)를 삽입하는 유형의 공격이다. 2장에서도 비슷한 일을 했다. 불행하게도 데이터베이스에 저장되는 alert()을 게시하여 화면을 재실행할 때 경고창이 발 생하고, 페이지에 접근할 때마다 alert ( ) 함수가 발생하였다. XSS에는 일반적으로 지속적과 비지속적 2가지 유형이 있다. 3.1.1 지속적인 XSS 지속적인 Persistent XSS는 공격자가 삽입한 코드가 데이터베이스와 같은 보조 저 장 장치에 저장될 때 발생한다. 2장에서 수행한 보안 결함 테스트는 삽입한 alert ( ) 함수가 MongoDB에 저장되었으므로 지속적인 XSS의 유형이다. 3.1.2 비지속적인 XSS 비지속적인 Nonpersistent XSS는 공격자가 만든 조작된 링크를 방문하는 의심없는 사 용자가 필요하다. 예상한 것처럼 의심 없는 사용자가 특별히 조작된 링크를 방문 하면 사용자의 브라우저에서 코드가 실행된다. 3 크로스 사이트 스크립팅 - 043
3장에서는 지속적인 XSS와 비지속적인 XSS 모두 실제로 유사하게 동작하므로 정확한 용어는 중요하지 않다. 다양한 자바스크립트 보안 문제를 이해할 수 있도 록 일련의 예제를 제공한다. 3.2 XSS 예제 2장에서 Node.js와 Express.js 기반의 백엔드를 구축하고, 애플리케이션에 간 단한 alert ( ) 자바스크립트 함수 삽입을 시도하여 성공했다. 그렇다면 보안 결 함이 자바스크립트 기반의 백엔드에서 발생했다고 생각하는가? 대답은 아니다. 오류는 다른 프로그래밍/스크립팅 언어 기반의 시스템에서 발생 할 수 있다. 여기서는 Python 기반의 RESTful 백엔드와 함께 XSS의 다른 유형 을 어떻게 수행하는지 설명하겠다. 3.2.1 Tornado/Python을 이용한 간단한 to-do 애플리케이션 이번 예제의 애플리케이션은 2장과 유사하다. Python/Tornado 기반의 백엔드 를 가진 간단한 RESTful to-do 애플리케이션을 구축하며, 전체 코드 구조는 다 음과 같다. 그림 3-1 전제 코드 구조 다음 내용으로 이동하기 전에 필요한 폴더와 파일을 생성하자. python_server 044 -
폴더와 그 안에 static과 templates 폴더, static 안에 css 폴더를 생성한다. 필 요한 파일과 폴더를 생성했다고 가정하고, server.py 파일과 함께 시작한다. server.py 구현 여기서는 2장에서 Node.js와 Express.js 백엔드가 수행한 것과 중복되는 코 드를 작성한다. 3장에서는 Python과 Tornado 웹 프레임워크를 사용하므로 반드시 설치하고, Python setuptools과 같은 일반적인 Python 개발 도구 와 PyMongo, Tornado CORS도 설치해야 한다. Tornado와 PyMongo, Tornado CORS는 다음 명령을 실행하면 설치된다. sudo pip install tornado ==3.1 sudo pip install pymongo sudo pip install tornado-cors NOTE 다운로드 링크 Python https://www.python.org/download(이 예제에서는 2.7.5 버전을 사용한다.) Tornado http://www.tornadoweb.org/en/stable/ Python setuptools https://pypi.python.org/pypi/setuptools PyMongo http://api.mongodb.org/python/current/ Tornado CORS https://github.com/globocom/tornado-cors 이제 코드를 작성해보자(3장의 샘플 코드는 Chapter3/python_server 폴더에 있다). 먼저 필요한 라이브러리를 import하고, 서버가 동작하는 포트 8080을 정의 한다. import tornado.httpserver import tornado.ioloop import tornado.options import tornado.web import pymongo 3 크로스 사이트 스크립팅 - 045
from bson.objectid import ObjectId from tornado_cors import CorsMixin from tornado.options import define, options import json import os define("port", default=8080, help="run on the given port", type=int) 다음으로 URL과 일반적인 설정을 정의한다. 해당 내용은 Application 클래 스에서 다음과 같이 정의한다. 이 코드에서 2장에서 수행한 것과 동일한 2가지 URL /api/todos 과 /todo 를 정의한다. class Application(tornado.web.Application): def init (self): handlers = [ (r"/api/todos", Todos), (r"/todo", TodoApp) ] conn = pymongo.connection("localhost") self.db = conn["todos"] settings = dict( xsrf_cookies=false, debug=true, template_path=os.path.join(os.path.dirname( file ), "templates"), static_path=os.path.join(os.path.dirname( file ), "static") ) tornado.web.application. init (self, handlers, **settings) 이번에는 기능의 핵심을 제공하는 클래스를 구현한다. 다음과 같이 TodoApp 클래 스와 Todos 클래스를 구현하자. class TodoApp(tornado.web.RequestHandler): def get(self): self.render("todos.html") class Todos(tornado.web.RequestHandler): def get(self): 046 -
Todos = self.application.db.todos todo_id = self.get_argument("id", None) if todo_id: todo = Todos.find_one({"_id": ObjectId(todo_id)}) todo["_id"] = str(todo['_id']) self.write(todo) else: todos = Todos.find() result = [] data = {} for todo in todos: todo["_id"] = str(todo['_id']) result.append(todo) data['todos'] = result self.write(data) def post(self): Todos = self.application.db.todos todo_id = self.get_argument("id", None) if todo_id: # perform a delete for example purposes todo = {} print "deleting" Todos.remove({"_id": ObjectId(todo_id)}) # cos _id is not JSON serializable. todo["_id"] = todo_id self.write(todo) else: todo = { 'text': self.get_argument('text'), 'details': self.get_argument('details') } a = Todos.insert(todo) todo['_id'] = str(a) self.write(todo) TodoApp 클래스는 to-do 목록 애플리케이션의 프론트엔드를 포함하는 todos. html 파일로 전달한다. 다음으로 Todos 클래스는 2가지 HTTP 메소드 GET과 3 크로스 사이트 스크립팅 - 047
POST를 포함한다. GET 메소드는 하나의 to-do 항목을 조회하거나 전체 to-do 목록을 조회한다. POST 메소드는 새로운 to-do 항목을 추가하거나 삭제한다. 마지막으로 다음 코드처럼 애플리케이션을 초기화한다. def main(): tornado.options.parse_command_line() http_server = tornado.httpserver.httpserver(application()) http_server.listen(options.port) tornado.ioloop.ioloop.instance().start() if name = = " main ": main() 이제 2장에서 이미 구현한 todos.html 파일을 구현하자. 코드를 복사해서 붙여 넣으면 된다. custom.css와 exter-nal.html 파일도 2장과 동일하다. 터미널에서 다음 명령을 실행하면 애플리케이션을 시작할 수 있다. python server.py 애플리케이션을 시작하면 브라우저에서 http://localhost:8080/todo에 접속 하여 화면을 확인한다. 2장에서 수행했을 때와 거의 동일하게 보인다. 그림 3-2 Python/Tornado에서 to-do 애플리케이션 048 -
화면에서 [Add To Do] 버튼을 클릭하면 상세 정보를 입력할 수 있다. 그림 3-3 새로운 to-do 항목 추가 [Submit] 버튼을 클릭하면 다음과 같은 화면이 보인다. 화면에 새로운 to-do 항 목을 나타나는지 확인한다. 그림 3-4 성공적으로 추가된 to-do 항목 애플리케이션이 동작하는 것을 확인하였으므로 이제 XSS를 수행해보자. 3 크로스 사이트 스크립팅 - 049
3.2.2 XSS 예제 1 기본적인 XSS 예제를 수행해 보겠다. 1. 다른 포트(포트 8888)의 새로운 웹 서버에서 2장에서 구현한 external_node. html을 열고, 다음 화면과 같이 기본적인 텍스트를 입력한 후 [Submit] 버튼 을 클릭한다. 그림 3-5 외부에서 게시하기 위한 외부 post 폼 2. 앞에서 구현한 애플리케이션 http://localhost:8080/todo로 돌아가서 브 라우저를 재실행하면 다음과 같이 웹 페이지에 텍스트가 삽입된 것을 확인할 수 있다. 그림 3-6 외부로부터 추가된 to-do 항목 050 -
3. 자바스크립트 함수를 포함한 to-do 항목을 생성한 후, [Submit] 버튼을 클릭 하고 http://localhost:8080/todo에서 애플리케이션을 재실행한다. 그림 3-7 자바스크립트 함수 게시 2가지 alert 상자를 확인할 수 있다. 첫 번째 alert은 다음과 같다. 그림 3-8 해킹된 첫 번째 alert 다음은 해킹된 두 번째 alert 화면이다. 다시 한 번 해킹되었다 그림 3-9 해킹된 두 번째 alert 3 크로스 사이트 스크립팅 - 051