웹어플리케이션 보안 Web application security 2017. 9. 중부대학교 정보보호학과 이병천 교수

1. 강의 개요 1.1 강의 목표 1.2 MEAN Stack 소개 1.3 실습 환경 구축 1.4 웹서버 계정 생성 1.5 Bootstrap 기술 소개

1.1 강의 목표 자바스크립트 기반 웹 개발 방법론 소개 MEAN stack 실무 기술 습득 최신 인증기술 적용 MongoDB Express Angular 4 Node.js 최신 인증기술 적용 토큰인증 패스포트 난수화 토큰인증 팀별 프로젝트 수행

깃허브에서의 인기 프로그래밍 언어 순위 http://smartincome.tistory.com/28

수익 잠재력 상위 10개 언어 페이스케일닷컴(PayScale.com)과 인디드닷컴(Indeed.com)의 연봉 정보를 바탕으로 뽑은 수익 잠재력 상위 10개 언어 http://www.itworld.co.kr/news/103581 1. 자바(Java) - 평균 연봉: 10만 2,000달러 2. 자바스크립트(JavaScript) - 평균 연봉: 9만 5,000달러 3. 파이썬(Python) - 평균 연봉: 10만 달러 4. C++ - 평균 연봉: 10만 달러 5. 루비(Ruby) - 평균 연봉: 10만 달러

1.2 MEAN 스택 웹 개발의 방법론 비교 한국의 전자정부 프레임워크 – JSP 기반

자바스크립트로 (모던)웹어플리케이션을 개발하기 위한 클라이언트-서버-DB 플랫폼 및 프레임워크 풀스택(Full Stack) MEAN 스택이란? 자바스크립트로 (모던)웹어플리케이션을 개발하기 위한 클라이언트-서버-DB 플랫폼 및 프레임워크 풀스택(Full Stack)

MEAN 스택이란? MongoDB, ExpressJS, AngularJS, and NodeJS 서버측 프로그래밍: NodeJS, ExpressJS 클라이언트측 프로그래밍: AngularJS DB 활용: MongoDB (데이터를 JSON 객체로 저장) JSON (자바스크립트 객체 표현 방식) 전체 스택이 모두 자바스크립트를 이용하므로 학습이 쉽고 생산성이 높다

MEAN 스택의 구성요소

MEAN 스택이란?

대규모 웹서비스들이 MEAN 스택을 활용

웹 개발의 방법론 비교 MEAN 스택이 다른 웹 개발 스택과 다른점 MEAN 스택을 사용하면 좋은 점 복잡한 웹어플리케이션을 개발하기 위한 레이아웃을 제공 모던(클라이언트 기반, SPA) 웹 어플리케이션을 위한 스택 실행 플랫폼, 개발 프레임워크 제공 모든 스택(DB-서버-클라이언트)에서 자바스크립트로 개발 낮은 진입장벽 - 자바스크립트만 알면 개발 가능 비동기 기반의 개발 스택 OS와 상관 없이 구동 가능 MEAN 스택을 사용하면 좋은 점 자바스크립트로만 DB-서버-클라이언트 개발 가능 JSON 객체를 DB, 서버, 클라이언트에서 동일하게 사용 라우팅 기반의 유연한 개발 클라이언트 two-way 데이터 바인딩 테스트가 효율적이다 다양한 bootstrap, 플러그인 SPA, RESTful, 프론트엔드 어플리케이션 개발에 최적화

MongoDB Humongous(거대한)라는 단어에서 딴 이름 오픈소스 NoSQL 데이터베이스 데이터를 JSON 포맷의 문서로 저장 문서기반 DB https://www.mongodb.com/

MongoDB Document-Oriented Storage Full Index Support 모든 데이터가 JSON 형태로 저장되며 schema가 없음 Full Index Support RDBMS에 뒤지지 않는 다양한 인덱싱을 제공합니다. Replication & High Availability 데이터 복제를 통해 가용성을 향상시킬 수 있습니다. Auto-Sharding Primary key를 기반으로 여러 서버에 데이터를 나누는 scale-out이 가능합니다. Querying key 기반의 get, put 뿐만이 아니라 다양한 종류의 쿼리들을 제공합니다. Fast In-Place Updates 고성능의 atomic operation을 지원합니다. Map/Reduce 맵/리듀스를 지원합니다. GridFS 별도 스토리지 엔진을 통해 파일을 저장할 수 있습니다.

MongoDB 관계형 DB (relational database) 문서기반 DB 데이터를 테이블 형식으로 저장. 정보간의 관계를 이용. MySQL 문서기반 DB 비관계형 데이터베이스로 데이터를 문서 형태로 저장 JSON (JavaScript Object Notation) 복잡한 형태의 데이터를 JSON, XML, BSON(Binary JSON) 등의 포맷으로 데이터베이스에 넣을 수 있음 PDF 문서를 DB에 직접 저장할 수 있다?

MongoDB 사례 Elf Info json { id: "1234", name: "holly", age: "400", type: "high-elf" } Elf Address Book json { elven_id: "1234", city: "rivendell", state: "middle-earth" } XML vs. JSON

MongoDB Consistency(일관성) vs. Availability(가용성) 샤딩(Sharding) 기능 제공 데이터가 많아져서 DB가 커지면 몇 개의 DB로 자동 파티션 복수개의 파티션 DB가 하나의 컬렉션으로 동작함 주요 기능 • Agile and Scalable • Document-Oriented Storage - JSON-style documents with dynamic schemas offer simplicity and power. • Full Index Support - Index on any attribute, just like you’re used to. • Replication & High Availability - Mirror across LANs and WANs for scale and peace of mind. • Auto-Sharding - Scale horizontally without compromising functionality. • Querying - Rich, document-based queries. • Fast In-Place Updates - Atomic modifiers for contention-free performance. • Map/Reduce - Flexible aggregation and data processing. • GridFS - Store files of any size without complicating your stack.

Node.js Node.js는 자바스크립트를 이용한 웹서비스 개발 언어 로 최근 빠르게 확산되고 있음 구글 크롬의 V8 자바스크립트 엔진에 기반한 서버측 플랫폼. Apache와 같은 별도의 서버 프로그램을 사용하지 않고 서비스를 직접 제공 이벤트기반, 비동기 I/O, 단일 스레드 루프를 통한 높은 처리성능 대규모 회사들에서도 널리 사용 중 Microsoft, eBay LinkedIn, Yahoo WalMart, Uber Oracle https://nodejs.org/

Node.js LAMP 스택과의 비교 웹서버: Apache, Nginx 등 서버측 스크립트언어: PHP, Perl, Python DB 연결: Mysql 등 새로운 접속요청이 있으면 Apache는 새로운 쓰레드(thread)를 생성하여 서비스 (멀티쓰레딩). 동시접속자수에 제한이 있음. 서비스 사용자를 늘리려면 서버를 증설해야 함

Node.js Node는 이벤트 기반 언어 비동기식 단일쓰레드로 모든 서비스 요구에 응답

Node.js Node의 프로그래밍 방법론 이벤트 기반 프로그래밍 (Event driven programming) 마우스클릭, 키보드입력, 메시지입력 등 이벤트 발생에 따라 프로그 램 진행. GUI 프로그래밍이 대표적인 사례 비동기 프로그래밍 (Asynchronous programming) 메인 프로그램은 이벤트를 기다림 이벤트 발생시 이벤트핸들러에게 처리를 넘기고 메인 프로그램은 다 른 이벤트를 기다림 이벤트 처리가 끝나면 콜백(callback) 함수를 실행 비동기 콜백 (Asynchronous callbacks, non-blocking callbacks) 함수의 인자로 또 다른 함수를 지정하는 방식 처리할 준비가 완료되면 실행되는 함수 처리에 시간이 걸리는 경우에 유용 Synchronous callback: blocking (작업이 끝날때까지 기다림) Asynchronous callback: non-blocking (작업을 시켜놓고 다른 일 수행)

Node와 NPM NPM (Node Package Manager) 노드에서는 많은 확장 패키지들을 설치하여 사용할 수 있음. Node.js 설치시 NPM도 기본 설치됨 https://www.npmjs.com/ 자신이 프로그래밍한 코드를 패키지 형태로 만들어 재활용할 수 있음 Popular packages • ExpressJS is currently the most starred package on npm’s site. • Mongoose is the package we will use to interact with MongoDB. • GruntJS for automating tasks • PassportJS for authentication with many social services. • Socket.io for building real time websocket applications • Elasticsearch for providing high scalability search operations.

https://www.npmjs.com/browse/star

Express node.js 환경에서 웹 어플리케이션을 쉽게 개발하기 위 해 사용할 수 있는 프레임워크 웹 어플리케이션 개발에 필요한 유용한 API 제공 Express는 현재 NPM 사이트에서 가장 인기있는 패키지 Express의 주요 기능 Router Handling Requests Application Settings Middleware

Express http://expressjs.com/

Express Express를 사용하는 회사들 MySpace, LinkedIn, Klout, Segment.io http://expressjs.com/en/resources/companies-using- express.html

AngularJS 구글이 만든 front-end 자바스크립트 프레임워크 Back-end: 서버측 Dynamic 요소들을 사용하기 위한 all-in-one 솔루션 데이터 바인딩(data binding) 폼 유효성 검사(Form validation) DOM 이벤트 처리 Dependency injection 다양한 지시어를 통한 개발 생산성 향상 ng-if, ng-repeat, ng-validate Form, Form validation 관련 도구 제공

AngularJS Data binding Dependency injection 주요 기능 사용자 입력을 매우 쉽게 처리 가능 MVC(model-view-controller) 모델에서 데이터의 일관성 유지 Dependency injection 객체에게 타 객체와의 의존성을 명시 모듈화 개념. 하나의 모듈을 다른 프로젝트에 재사용이 쉬움 주요 기능 MVC Directives Scopes Templates Testing

Angular 4 AngularJS의 최신버전은 Angular 4 https://angular.io/ 생산성을 높일 수 있는 많은 요소 추가

Client-server model MEAN stack으로 어플리케이션 개발시 클라이언트-서버 의 역할을 구분하여 설계해야 함 Server/backend/Node – 리소스, 서비스의 제공자 Client/frontend/Angular – 서비스 요청자 서버는 접근 가능한 API 가지고 서비스하는 독립적인 개체임. 클 라이언트는 이런 API를 통해 서버에 서비스를 요청. 서버사이드 코드는 분리되어 운영되며, 여러가지 클라이언트 어 플리케이션(웹사이트, 안드로이드 앱, 아이폰 앱, 윈도우 앱)이 똑 같은 데이터에 접근하도록 설계 페이스북, 구글, 트위터, Github 등 대규모 사이트들은 외부에서 접근 가능한 서버의 API 를 공개

Client-server model Server Components Client Components Database (MongoDB) Server/API (Node and Express) Client Components Frontend Layer (Angular)

1.3 실습환경 구축 Atom 웹에디터 설치 Atom : http://atom.io 필수 확장프로그램 설치 Emmet – html 태그의 자동완성 기능 Atom live server – 별도의 서버를 설치하지 않고도 페이지 즉시 확 인

실습환경 구축 Node.js 설치 설치 후 테스트 서버측 자바스크립트 실행환경 https://nodejs.org/en/ C:\>node -v v8.2.1 C:\>npm -v 5.3.0

실습환경 구축 MongoDB 설치 서버 실행 서버 접속 문서 기반의 NoSQL 데이터베이스 https://www.mongodb.com/ 서버 실행 > mongod --dbpath f:\ 서버 접속 > mongo

1.4 웹서버 계정 생성 Isweb.joongbu.ac.kr 서버에 계정 생성 계정신청서 작성 안전한 패스워드로 변경 및 패스워드 관리 철저 개인별 포트번호 할당

웹서버 계정 접속 Putty 설치 FileZilla 설치 안전한 패스워드 설정 Secure Telnet 프로그램 FileZilla 설치 Secure FTP 프로그램 안전한 패스워드 설정 자신의 계정에 작성한 컨텐츠 업로드 및 서비스 확인

1.5 Bootstrap 기술 소개 Bootstrap이란? 트위터 사가 만든 편리하고 효율적인 웹 프레임워크 http://bootstrapk.com/ (한글) http://getbootstrap.com/ https://bootswatch.com/

Bootstrap 기술 소개 부트스트랩 다운로드 http://bootstrapk.com/getting-started/ 에서 zip파일 다운로드 현재 프로젝트 폴더에 압축 풀기

Bootstrap 기술 소개 기본 템플릿을 이용하여 페이지 작성 시작 http://bootstrapk.com/getting-started/ Bootstrap CSS 파일 링크 Bootstrap이 정상 작동하려면 jquery가 반드시 필요 Bootstrap.min.js 포함

Bootstrap 기술 소개 Bootstrap은 전문가가 디자인한 클래스(class)들의 모음 https://bootstrapcreative.com/resources/bootstrap-3-css- classes-index/ 기본 컨테이너 클래스 고정폭 콘테이너 .container 최대폭 콘테이너 .container-fluid

Bootstrap 기술 소개 그리드 시스템 부트스트랩은 기기나 뷰포트 크기가 증가함에 따라 12열이 적절 하게 확대되는 반응형, 모바일 우선 유동 그리드 시스템입니다. 그것은 쉬운 레이아웃을 위해 미리 정해진 클래스들 뿐만 아니라 강력한 더 시멘틱한 레이아웃을 생성하기 위한 믹스인을 포함하 고 있습니다.

Bootstrap 기술 소개

Bootstrap 기술 소개

Bootstrap 기술 소개 Typography

Bootstrap 기술 소개 테이블

Bootstrap 기술 소개 폼 클래스

Bootstrap 기술 소개 버튼

Bootstrap 기술 소개 배경

Bootstrap 기술 소개 내비게이션바(navbar)

Bootstrap 기술 소개

Bootstrap 기술 소개 컴포넌트 페이지를 참조하여 필요한 내용 입력 가능 http://bootstrapk.com/components/

Bootstrap 기술 소개 여러 개의 페이지를 갖는 홈페이지 작성하기 예제 메뉴 구성 과목 홈페이지 소스 참조 메뉴 부분까지는 내용이 같고 이후의 세부 내용이 다른 여러 페 이지들을 작성. 메뉴에서 상호 링크 연결 메뉴 선택시의 active 클래스 적용 예제 메뉴 구성 홈 (home) – 홈페이지에 대한 간단한 소개, 그림 등 소개 (intro) – 나에 대한 소개, 취미, 시간표 등 과제물 (homework) – 과제물 업로드, 관련 기술 스크랩 등 링크 (link) – 학교, 학과, 과목 홈페이지, 기타

과제 1 자신의 홈페이지를 작성하여 웹서버에 올리기 홈페이지 콘텐츠, 메뉴 구상 Bootstrap 기술을 적용하여 구현 서버에 업로드하고 서비스 테스트