웹어플리케이션 보안 Web application security

Slides:



Advertisements
Similar presentations
프로그램이란 프로그램 생성 과정 프로젝트 생성 프로그램 실행 컴퓨터를 사용하는 이유는 무엇인가 ? – 주어진 문제를 쉽고, 빠르게 해결하기 위해서 사용한다. 컴퓨터를 사용한다는 것은 ? – 컴퓨터에 설치 혹은 저장된 프로그램을 사용하는 것이다. 문제를 해결하기 위한.
Advertisements

을지대학교 무선 네트워크 사용 방법 2010 년 06 월 01 일. 을지대학교 무선 네트워크 사용 방법 1. PC 무선랜 카드 활성화 및 체크 1 단계 : 시작 -> 설정 -> 네트워크 설정 2 단계 : 무선 네트워크 설정 선택 -> 마우스 버튼 오른쪽 클릭 -> 사용.
MobileWeb 시작하기. 디바이스 별 해상도 갤럭시 S : 480*800 ( 옴티머스, 갤럭시, 베가 ) 안드로이드폰 / 아이폰 3G : 320*480 아이폰 4 : 640 *960 아이패드 : 1024*768 갤럭시탭 : 1024*600.
2. 미디어 쿼리 : 다양한 뷰포트의 지원 김은옥 1 학습목표 : 여기서는 미디어 쿼리 작성방법, 뷰포트 지정 방법 등 을 살펴본다.
.Net History. Visual Studio.Net 2002 /.Net Framework 1.0 제품의 버전 / 특징 2002 년 - Visual Studio.Net 2002 /.Net Framework 1.0 첫 통합 개발 환경 - C# 언어 등장 (C# 1.0)
앱인벤터 기초과정 (1차시) ㈜헬로앱스 강사: 김영준 목원대학교 겸임교수.
난이도 : 초급 제1장 앱 인벤터 소개 및 준비.
웹 어플리케이션 보안 2016년 2학기 1. 강의 개요.
2016 유성환 Hybrid MOBILE.
컴퓨터와 인터넷.
목 차 C# 언어 특징 .NET 프레임워크 C# 콘솔 프로그램 C# 윈도우 프로그램 실습 프로그래밍세미나 2.

Chapter 16 : Struts 프레임워크 2. chapter 16 : Struts 프레임워크 2.
30강_웹문서 제작 팁 웹문서 제작 팁 Lecturer Kim Myoung-Ho Nickname 블스
新 연구관리 프로그램 SAP 설치 안내 1. SAP GUI 7.3 설치 2전자증빙 솔루션 설치 배포 :
암호학 응용 Applied cryptography
Image & Video processing
Power Java 제3장 이클립스 사용하기.
4강. Servlet 맛보기 Servlet 문서 작성 하기 web.xml에 서블릿 맵핑 어노테이션을 이용한 서블릿 맵핑
웹어플리케이션 보안 Web application security
부트스트랩(Bootstrap) 트위터사가 만든 HTML, CSS, JS 개발을 위한 오픈소스 툴킷
Sep Youn-Hee Han 웹서비스 컴퓨팅 수업을 위한 코딩 환경 준비 Sep Youn-Hee Han
PHP입문 Izayoi 김조흔.
데이터베이스 및 설계 금오공과대학교 컴퓨터공학부 이 이섭.
JSP Programming with a Workbook
4장. 웹로직 서버상에서의 JDBC와 JTA의 운용
31강 JAVA 네트워크 JAVA 네트워크 InetAdress, URLConnection 클래스 Socket의 이해
CHAPTER 02 OpenCV 개요 PART 01 영상 처리 개요 및 OpenCV 소개.
강좌 소개 웹프로그래밍기초 숙명여자대학교 임순범.
8장. 원격지 시스템 관리하기.
Visual Basic .NET 처음 사용하기.
1. C++ 시작하기.
                              데이터베이스 프로그래밍 (소프트웨어 개발 트랙)                               퍼스널 오라클 9i 인스톨.
학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
ASP.NET AJAX 비동기 게시판 작성 2007 컴퓨터공학실험( I )
KHS JDBC Programming 4 KHS
Chapter 03 : 서블릿 ( Servlet ) 개요. chapter 03 : 서블릿 ( Servlet ) 개요.
속성과 리스너 초기화 파라미터 외 파라미터에 대해 이해한다. 리스너를 생성해보고 사용에 대해 이해한다.
2장 JSP 개발 환경 설정 이장에서 배울 내용 : JSP 페이지를 작성하기 위한 개발환경을 설정하고, 웹 어플리케이션 개발을 위해 반드시 이해하여야 할 웹 어플리케이션 폴더 구조에 대해 학습한다. 또한 요청된 JSP 페이지가 어떠한 처리과정을 거쳐 응답이 이루어지는가에.
CHAP 12. 리소스와 보안.
Grade Server Team14. Attention Seeker
웹 어플리케이션 보안 2016년 2학기 3. Mongo db.
웹어플리케이션 보안 Web application security
웹 어플리케이션 보안 2016년 2학기 10. Workflow tools.
반응형 웹 프로젝트
2018년 11월 05일 박성진 Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진
MEAN Stack Front to Back (MEANAuthApp)
HTTP 프로토콜의 요청과 응답 동작을 이해한다. 서블릿 및 JSP 를 알아보고 역할을 이해한다.
MEAN Stack Front to Back (MEANAuthApp)
Adobe 제품 다운로드 및 설치 방법 안내 Adobe Creative Cloud Adobe License 권한을 받으신 분
뇌를 자극하는 Windows Server 장. 원격 접속 서버.
PC에 설치된 엔드포인트 클라이언트 프로그램을 클릭하여 프로그램 상자를 엽니다
Tiny OS와 NesC Tiny OS Part1. Won Mi Sun – 17 지능제어 연구실.
ASP.NET AJAX / AJAX Control Toolkit 응용 2008 컴퓨터공학실험( I )
웹디자인
인천대학교 웹과 인터넷 수업 개요 및 내용 소개.
STS 에서 웹 서버 설치 방법.
암호학 응용 Applied cryptography
암호학 응용 Applied cryptography
KISTI Supercomputing Center 명훈주
.Net Web Application 2007 컴퓨터공학실험(Ⅰ)
3장 JSP프로그래밍의 개요 이장에서 배울 내용 : JSP페이지의 기본적인 개요설명과 JSP페이지의 처리과정 그리고 웹 어플리케이션의 구조에 대해서 학습한다.
JSP Programming with a Workbook
9 브라우저 객체 모델.
슬라이드 쇼의 설정 슬라이드 쇼의 실행 파일과 폴더의 관리 글꼴을 포함해서 저장 웹 페이지로 게시 압축 파일
프로그래밍 언어 학습을 위한 가상실습환경 창원대학교 이수현.
웹과 모바일 홈페이지의 이해와 제작 웹기획 & 제작
JAVA 프로그래밍 16장 JNLP.
AJAX? Cho Hyun Min.
20 XMLHttpRequest.
Presentation transcript:

웹어플리케이션 보안 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 실습환경 구축 Visual Studio Code 웹에디터 설치 VSCode : https://code.visualstudio.com/ 여러가지 유용한 확장프로그램 설치하여 사용 Emmet – html 태그의 자동완성 기능 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 기술을 적용하여 구현 서버에 업로드하고 서비스 테스트