78DAYS) [프로젝트] 솔로 프로젝트 - 웹 애플리케이션 설계 (1)

◉ 학습목표

1. 서버와 클라이언트 등 개발에 필요한 개념적인 부분을 이해할 수 있다.

1. 개념학습

⦿ 학습내용

☞ 서버와 클라이언트

✔︎ 서버 : 제공하는 주체
✔︎ 클라이언트 : 제공받는 대상
✔︎ 서버의 종류

• 웹 서버
  • 웹 서비스를 제공하기 위한 서버 컴퓨터
  • Apache, IIS, NginX와 같은 웹 서버 소프트웨어를 사용해 웹 서비스 가능
• 웹 애플리케이션 서버
  • 웹 애플리케이션을 제공하기 위한 서버 컴퓨터
  • Tomcat, WebLogic, WebSphere와 같은 웹 애플리케이션 서버 소프트웨어를 사용해 웹 애플리케이션 서비스 제공 가능
• 데이터베이스 서버
  • 데이터베이스를 제공하기 위한 서버 컴퓨터
  • Oracle, MS-SQL, MySQL과 같은 데이터베이스 소프트웨어를 사용하여 서비스 가능
• 파일 전송 서버
  • 대용량의 파일을 빠르게 주고 받기 위한 서버 컴퓨터
  • VS-FTPD, IIS와 같은 소프트웨어를 사용해 서비스 가능
• 메일 서버
  • 메일 서비스를 위한 서버 컴퓨터
  • Send-mail, Microsoft Exchange Server와 같은 소프트웨어를 사용해 서비스 가능
• 인쇄 서버
  • 공간의 제약을 극복하고 인쇄할 수 있도록 하는 서버 컴퓨터
  • 인쇄기 제품과 구성에 따라 해당 서비스를 지원하는 다양한 소프트웨어를 사용해 서비스 가능

✔︎ 서버와 클라이언트의 통신

✔︎ 서버 구성과 서버 환경 설정

• 배포 : 개발된 서비스가 적용되는 것
• 개발자가 배포하기 위해서는 서버의 구성과 서버의 환경 설정이 선행되어야 함
• 서버 구성
  • 서버 컴퓨터를 구성하는 관점
  • 서버 컴퓨터의 종류, 서버 컴퓨터의 대수, 네트워크 정책, 서버 수용 인원 예측 등을 구성
• 서버 환경 설정
  • 구성된 특정 컴퓨터 서버가 서비스를 제공할 수 있도록 환경을 구성하는 과정
  • 웹 서버는 Apache, IIS, NginX와 같은 웹 서버 소프트웨어를 이용해 웹 서비스를 가능케하는 서버 환경 설정을 의미
  • 웹 애플리케이션 서버는 Tomcat, WebLogic과 같은 웹 애플리케이션 서버 소프트웨어를 이용해 웹 애플리케이션을 구동하여 서비스를 가능케하는 서버 환경 설정을 의미
  • 데이버베이스 서버는 Oracle, MS-SQL과 같은 데이터베이스 솔루션 소프트웨어를 이용해 데이터베이스를 관리할 수 있는 서비스를 제공하는 서버 환경 설정을 의미
• 서버 구성 작업 진행 후, 서버가 구성되면 각 컴퓨터 서버(물리 서버)에 서버가 서비스할 목적에 맞는 서버 환경 설정을 진행해야 함
• 서버 구성 + 서버 환경 설정 작업엥 해당하는 서버 셋팅 작업이 완료되면, 개발자는 개발한 제품을 연관된 개발 / 운영 서버에 배포하여 웹 서비스 준비 가능
• 이 후, 클라이언트(고객)은 제품(제공 관점에서의 서버)을 이용(요청 / 응답)할 수 있음

☞ CORS

✔︎ CORS (Cross-Origin Resource Sharing)

• 애플리케이션 간 출처(Origin)가 다를 경우, 스크립트 기반의 HTTP 통신을 통한 리소스 접근이 제한되는 정책(SOP; Same Origin Policy) 존재

• CORS는 이러한 접근 제한의 예외 조항

• 사전 설정을 통해 리소스에 선택적으로 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 정책

• 브라우저에서 확인할 수 있는 CORS 관련 에러 콘솔 문구
  

  - 다른 출처의 리소스를 가져오려고 했지만 SOP 때문에 접근 불가
  - CORS 설정을 통해 서버의 응답 헤더에 'Access-Control-Allow-Origin'을 작성하면 접근 권한을 얻을 수 있음

• 즉, 이 에러는 CORS 때문이 아니라 SOP 때문
• CORS는 이 에러를 해결해줄 수 있는 방안

✔︎ CORS 정책 동작 방식

• 프리플라이트 요청 (Preflight Request)
  • 실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것을 의미
  • 브라우저는 서버에 실제 요청을 보내기 전 프리플라이트 요청을 보내고, 응답 헤더의 Access-Control-Allow-Origin으로 요청을 보낸 출처가 돌아오면 실제 요청을 보내게 됨
  • 만약 요청을 보낸 출처가 접근 권한이 없다면 브라우저에서 CORS 에러를 띄우게 되고, 실제 요청 전달 ❌
• 단순 요청 (Simple Request)
  • 특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 것
• 인증정보를 포함한 요청 (Credentialed Request)
  • 요청 헤더에 인증 정보를 담아 보내는 요청
  • 출처가 다를 경우, 별도의 설정을 하지 않으면 쿠키를 보낼 수 ❌ (민감한 정보이기 때문)
  • 이 경우, 프론트 / 서버 양 측 모두 CORS 설정 필요

✔︎ CORS 정책 설정 방법

• Global 설정 클래스를 이용해 특정 도메인에 모두 적용하는 방법
  • Security Configuration 클래스에 CORS 설정 추가
  • .cors(withDefaults())일 경우, corsConfigurationSource라는 이름으로 등록된 Bean을 이용

    @Conffiguration
    public class SecurityConfiguration {
    	@Bean
        public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        	http
            	...
                .cors(withDefaults())	// CORS 설정 추가
                ...
            );
        return http.build();
    }

  • CorsConfigurationSource Bean을 제공함으로써 CorsFilter 적용
• 애너테이션을 이용해 컨트롤 단에서 적용하는 방법

  • @CrossOrigin 애너테이션을 이용해 컨트롤러 혹은 메서드에서 CORS 정책 설정

  • 애너테이션이 붙은 컨트롤러(혹은 메서드)에서만 적용, 따라서 원하는 요청에 따른 응답에만 CORS 설정 가능

  • < 컨트롤러 단에서 애너테이션을 이용해 CORS 설정 >

    @CrossOrigin	// Controller에 애너테이션을 이용해 설정
    @RestController
    public class HelloController {
    
    	...
        
    }

  • < 메서드 단에서 애너테이션을 이용해 CORS 설정 >

    @RestController
    public class helloController {
    
    	@CrossOrigin	// 해당하는 메서드에 애너테이션을 이용해 설정
        @GetMappping
        public ResponseEntity<> getHello () {
        	...
        }
        
    }

  • 애너테이션을 이용해 CORS 설정을 하는 경우, 옵션을 이용해 세부적인 설정 추가 가능

    @CrossOrigin(origins = "https://codestates.com")
    @RestController
    public class HelloController {
    	...
    }

✔︎ CSRF (Cross-Site Request Forgery)

• 사이트 간 요청을 위조하는 공격
• 신뢰할 수 있는 사용자를 가장하여 웹 사이트에 원치 않는 명령을 보내는 방식
• Spring Security는 기본적으로 아무 설정을 하지 않아도 CSRF 공격을 방지하기 위해 클라이언트로부터 CSRF Token을 수신 후 검증
• 이 경우, 403 에러를 마주할 수 있어 disable처리 필요

@Configuration
public class SecurityConfiguration {
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            .csrf().disable()	// disable 처리
            ...
    }
    ...
}

◉ 느낀 점

☞ 드디어 프로젝트의 첫 발을 내디뎠다... (웅장)
우선 시작은 간단한 TO-DO Application을 혼자서 진행하는 솔로 프로젝트 시간이었다. 처음부터 바로 프로젝트를 만드는 시간으로 알았는데 자세히 보니 앞에 개념학습도 병행되어 있었다. 그래서 2일로 잡은듯 ^^,,

앞선 개념학습에서는 기존에 배웠던 내용을 보충하거나 복습하는 느낌이었다. (서버, 클라이언트, CORS 등등 ...) 특히 CORS 에러 파트에서는 내가 이전 실습 때 직접 만나본 에러라 반갑기도 했다!

CORS 에러지만 사실 CORS 문제가 아니라, HTTP 통신 간 리소스 접근이 제한되는 정책인 SOP 때문이라는 점❗️

이전 실습에서는 단순한 나의 오타때문이었지만 ^^,,, 정확한 에러의 이유를 알 수 있는 시간이었다 :)
CSRF 공격 같은 경우도 정보처리기사를 공부할 때와 이전 학습 때 접해본 내용이라 크게 어려움은 없었던 것 같다.

시간이 남아서 TO-DO App 프로젝트를 대충 끄적여봤는데 Section3에서 학습한 Spring MVC 내용들을 복습하는 느낌이었다. 공부한 내용들을 다시 상기시켜보며 하나하나 짚으며 정리해갔다..! 솔로 프로젝트의 내용같은 경우는 내일 직접 실습을 진행하며 회고해보도록 하겠다.

◉ 내일의 키워드

・ 웹 애플리케이션 설계