웹어플리케이션 보안 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 6 AngularJS의 최신버전은 Angular 6 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)이란? 트위터 사가 만든 편리하고 효율적인 HTML5, CSS3, Javascript 오픈소스 툴킷 반응형(responsive), 모바일위주(mobile first) 웹 개발을 위한 웹 프레임워크 전문가들이 미리 만들어놓은 css, js, 클래스들을 사용하여 높은 품질의 웹페이지를 손쉽게 개발 jQuery 프레임워크를 이용

Bootstrap 기술 소개 부트스트랩(Bootstrap) 관련 자료 http://getbootstrap.com/ (영문 홈페이지 v4.1.1) http://bootstrap4.kr/ (한글 문서 서비스, v4.0.0) https://bootswatch.com/ (부트스트랩 테마) https://www.w3schools.com/bootstrap4/ (w3schools.com에서 제공하는 Bootstrap 4 튜토리얼)

Bootstrap 기술 소개 부트스트랩 프로젝트 시작 방법 소스를 다운로드하여 사용하는 방법 http://bootstrap4.kr/docs/4.0/getting-started/download/ 에서 zip파일 다운로드, 압축 풀기 (컴파일된 css, js를 다운로드) 내 서버에서 제공하는 css, js 파일을 사용 CDN(content delivery network)을 이용하는 방법 CDN 서버에서 제공하는 css, js 파일을 링크하여 사용 기본 템플릿을 복사하여 시작 패키지 매니저를 이용하여 설치하여 사용 (npm)

Bootstrap 기술 소개 기본 템플릿을 이용하여 페이지 작성 시작 http://bootstrap4.kr/docs/4.0/getting-started/introduction/ 반응형 동작을 위해 뷰포트 메타 태그 Bootstrap CSS 파일 링크 Bootstrap이 정상 작동하려면 jquery가 반드시 필요 Bootstrap.min.js 포함 CDN을 이용하는 사례

레이아웃 – 컨테이너 Bootstrap은 전문가가 디자인한 클래스(class)들의 모음 https://www.w3schools.com/bootstrap/bootstrap_ref_all_classes. asp 첫 번째 해야 하는 일은 컨테이너 클래스 사용하기 고정폭 콘테이너 .container 최대폭 콘테이너 .container-fluid

레이아웃 – 그리드 시스템 그리드 시스템 12개의 컬럼 시스템, 5개의 반응형 계층, Sass 변수 및 믹스인 및 수십 개의 미리 정의 된 클래스를 사용하여 강력한 mobile-first 플렉스박스 그리드로 모든 형태의 레이아웃을 만듭니다. 부트스트랩의 그리드 시스템은 일련의 컨테이너, 행 및 열을 사 용하여 내용을 정렬하고 구성합니다. 그것은 플렉스 박스로 제작 되었으며 완전히 반응형 입니다. 

레이아웃 – 미디어 객체 미디어 객체

컨텐츠 - 타이포그래피 Typography

컨텐츠 - 타이포그래피 Typography

컨텐츠 – 테이블 각종 테이블 클래스 .table .table-dark .table-striped .table-bordered .table-hover .table-sm

컨텐츠 – 이미지, 피규어 반응형 이미지 .img-fluid 섬네일 이미지 .img-thumbnail 이미지 정렬 .float-left .float-right

컴포넌트 – 알림

컴포넌트 – 배지

컴포넌트 – 버튼

컴포넌트 – 버튼 그룹

컴포넌트 – 카드

컴포넌트 – 캐러셀 캐러셀 Carousel 회전목마와 같이 순환하는 슬라이드 쇼(이미지 또는 텍스트 슬라 이드)를 구성하는 컴포넌트.

컴포넌트 – 컬랩스

컴포넌트 – 드롭다운

컴포넌트 – 폼

컴포넌트 – 점보트론

컴포넌트 – 목록그룹

컴포넌트 – 모달 (modal)

컴포넌트 – 내비게이션

컴포넌트 – 내비게이션바 (메뉴)

메뉴를 이용한 홈페이지 작성하기 여러 개의 페이지를 갖는 홈페이지 작성하기 예제 메뉴 구성 메뉴 부분까지는 내용이 같고 이후의 세부 내용이 다른 여러 페 이지들을 작성. 메뉴에서 상호 링크 연결 홈페이지 메뉴 구상 Index.html 파일에 내비게이션바 추가 (메뉴 item의 파일명 지정) 이 파일을 복사하여 다른 파일명으로 저장, 내용 수정 li Item의 class를 active로 지정 예제 메뉴 구성 홈 (home) – 홈페이지에 대한 간단한 소개, 그림 등 소개 (intro) – 나에 대한 소개, 취미, 시간표 등 과제물 (homework) – 과제물 업로드, 관련 기술 스크랩 등 부트스트랩(bootstrap) – 부트스트랩 기능 테스트 링크 (link) – 학교, 학과, 과목 홈페이지, 기타

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