본문 바로가기

분류 전체보기176

2019년 6월 1주차 - "젠킨스 플러그인 100개에서 비밀번호 평문 저장 취약점 나와" 등 1. 젠킨스 플러그인 100개에서 비밀번호 평문 저장 취약점 나와 빌드와 테스트, 배포를 위한 자동화 서버로 널리 이용되는 젠킨스는 오픈소스로서 많은 플러그인을 제공하고 있습니다. 그런데 최근 이들 플러그인 100개 이상에서 비밀번호 평문 저장 및 CSRF(Cross-site request forgery, 사이트 간 요청 위조) 취약점이 발견되었습니다. 젠킨스는 비밀번호를 credential.xml 파일에 암호화해서 저장하는데, 일부 개발자들이 이를 어기고 플러그인 자체 xml 파일을 생성하여 저장하거나, 비밀번호 암호화 과정을 생략하는 오류를 범해 이러한 취약점들이 나타나는 것으로 밝혀졌습니다. 일부 플러그인들은 이러한 취약점에 대해 패치가 진행되었으나, 대부분의 플러그인들이 패치되지 않은 상태이기 때.. 2020. 10. 20.
[실전 어플리케이션 만들기] 7. RouterGuard 설정 및 Referrer URL 설정 이 글에서는 권한이 없는 사용자가 url을 통해 페이지에 접근하려고 할 때, 접근을 제한하고 그에 따른 처리를 하도록 도와주는 RouteGuard를 설정해볼 것입니다. 또한 권한이 없어 로그인 페이지로 리다이렉트 되었을 때, 로그인 후에 처음 요청했던 페이지로 이동될 수 있도록 이전 페이지를 관리하는 코드를 함께 작성해 볼 것입니다. 1. RouterGuard 설정하기 권한이 없는 사용자가 권한이 필요한 특정 페이지로 접근했을 때, 라우팅되지 않도록 막아주는 역할을 하는 것이 RouterGuard입니다. 이 글에서는 로그인하지 않은 사용자가 마이페이지로 접근하려고 시도했을 때 로그인 페이지로 리다이렉트 되도록 구현해 볼 것입니다. 먼저 core/service 아래에 auth-guard.ts 파일을 생성하.. 2020. 10. 20.
[실전 어플리케이션 만들기] 6. Directive 일반적인 웹 애플리케이션에서 로그인 전과 후에 Header에 노출되는 UI가 달라집니다. [로그인 전] [로그인 후] if/else 문법으로도 분기처리가 가능하지만, Angular에서 제공하는 Directive를 이용하면 코드의 가독성도 높아지기 때문에 Directive를 이용하기로 결정했습니다. 로그인 여부에 따라 AuthDirective를 구현합니다. 1) 로그인 여부에 따라 특정 템플릿에 대해 노출/비노출을 결정하는 AuthDirective를 구현합니다. [auth.directive.ts] import {User} from '../../core/model/user.model'; import { AppState } from '../../store/app.states'; import {Directive.. 2020. 10. 20.
[실전 어플리케이션 만들기] 5. 사용자 인증(2) - ngrx/store, ngrx/effect [실전 애플리케이션 만들기] 4. 사용자 인증(1) - In-memroy service, Authentication service에서 LoginForm에 입력한 계정을 검증하기 위한 서비스를 만들었습니다. 그런데 화면이 전환된다면, 컴포넌트가 교체되면서 검증된 계정 정보가 메모리에서 사라질 것입니다. Angular docs에서는 이렇게 전역적으로 필요한 상태값들은 싱글턴 객체인 서비스에 저장하는 방법을 권고합니다. Service에서 상태값을 관리한다고 해도 애플리케이션을 개발할 수는 있지만 애플리케이션의 규모가 커지고 구조가 조금이라도 복잡해지면 컴포넌트의 상태를 관리하는 일은 귀찮은 일이 됩니다. 그래서 많은 프로젝트에서 Vue는 Veux로, React는 Redux로, Angular는 ngrx/stor.. 2020. 10. 20.
[실전 어플리케이션 만들기] 4. 사용자 인증(1) - In-memroy service, Authentication service 일반적인 애플리케이션이라면, 로그인 폼에 입력한 계정이 유효한지 체크하기 위해 회원을 담당하는 api서버로 http요청을 할 것입니다. 그러나 이 어플리케이션은 Angular에만 집중하기 위해 api서버를 따로 두지 않고, Angular에서 기본적으로 제공하는 In-memory DB Service를 이용했습니다. (mockable.io를 사용할 수도 있으나 무료 버전은 유효 기간이 정해져 있으므로 In-memory DB로 결정했습니다.) 이 장에서는 In-memory DB Service를 만들고, 이전 장에서 입력한 Form에서 로그인 버튼을 클릭했을 때 In-memory DB로부터 해당 계정이 유효한지 체크하는 구현부를 살펴보겠습니다. Prerequisite HttpClientModule, rxjs 1.. 2020. 10. 20.
[실전 어플리케이션 만들기] 3. 로그인 Form 작성 앞장에서 생성한 LoginFormComponent에 Angular의 @angular/forms 패키지의 FormBuilder, FormGroup, Validators 들을 이용하여 Form 관련 기능을 구현해보겠습니다. Prerequisite Reactive Forms - https://angular.io/guide/reactive-forms 참고. 이 예제에서는 Angular 공식 UI Component 모음인 Angular Material을 사용하여 작성되었습니다. Angular material이 필수는 아니기 때문에 bootstrap을 사용하여 UI는 자유롭게 작성할 수 있습니다. 1. HTML 작성 1) Form 작성 [login-form.component.html] LOGIN {{hide ? '.. 2020. 10. 20.
[실전 어플리케이션 만들기] 2. Feature Modules과 Routing 이전 글의 프로젝트 구조에서 여러 Module들이 존재하는 것을 보았습니다. 이는 실전 애플리케이션 예제가 Feature Modules로 구성되어 있기 때문입니다. 이 글에서는 Feature Modules가 무엇인지 알아보고, 실제로 컴포넌트들을 구성해보도록 하겠습니다. 또한 만들어진 컴포넌트들에 라우팅 정보를 넣어주도록 하겠습니다. 1. Feature Modules? Feature Modules란 코드를 특정한 구조로 체계화하기 위해서 사용하는 NgModules입니다.어플리케이션이 커지면 커질수록 root modules 방식(app.module.ts에 모든 컴포넌트와 서비스, 모델 등을 등록하는 방식)으로 구성하기에는 무리가 있습니다. 가독성이 떨어질 뿐만 아니라, 관리하기 어려울 정도로 루트 모듈의 .. 2020. 10. 20.
[실전 어플리케이션 만들기] 1. 프로젝트 구조 및 생성 이 글에서는 Angular 실전 애플리케이션을 작성하며 아래 목록의 기능들을 사용, 구현해 보겠습니다. Feature Modules ReactiveFormsModule(FormBuilder, FormGroup, Validators) Routing(라우팅), Lazy Loading(지연 로딩) Authentication(인증), State Management(상태 관리 - ngrx/store, ngrx/effects) Directive(사용자 정의 디렉티브) SPA에서 필수적인 라우팅 기능과 각 컴포넌트별 접근권한을 로그인(인증)정보로 체크하며, 인증정보 상태 관리를 할 수 있는 ngrx를 이용해 보겠습니다. Prerequisite Angular Tutorial - Tour of Heroes Feature.. 2020. 10. 20.
6. React의 이벤트 처리 이 글에서는 React에서의 이벤트를 다루는 방법에 대해서 알아보도록 하겠습니다. 본 글의 내용을 이해하기 위해서는 아래와 같은 사전 지식이 필요합니다. 캡처링 및 버블링 Introduction to events Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example, if the user selects a button on a webpage, you might want to respond to that a developer.mozilla.org .. 2020. 10. 19.
5. 컴포넌트 라이프사이클 이벤트 전 글에서 전반적인 컴포넌트에 대한 내용과 생성 방법을 살펴보았습니다. 이 글에서는 컴포넌트를 좀 더 세밀하게 제어할 수 있도록 React 컴포넌트의 라이프사이클 이벤트에 대해 알아보도록 하겠습니다. 1. 라이프사이클 이벤트의 분류 컴포넌트는 각 프로세스가 진행되는 시점에 따라 라이프사이클 이벤트로 불리는 특별한 함수가 실행됩니다. 개발자는 이 라이프 사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있습니다. 라이프사이클 이벤트는 크게 세 가지로 분류됩니다. 마운팅(mounting) 이벤트 : 페이지에 컴포넌트를 나타내는 이벤트로, React 엘리먼트(컴포넌트 클래스의 인스턴스)를 DOM 노드에 추가하는 시점에 발생. 1회만 실행. 갱신(updating) 이벤트 : 컴포넌트 정보.. 2020. 10. 19.

티스토리툴바