TIL

HyeBin, Park·2022년 4월 21일
0

TIL

목록 보기
11/12
post-thumbnail

단일 페이지 웹 어플리케이션 (SPA)

  • 사용자 인터랙션에 의해 URL이 변경 시 화면 전체의 로드가 없이 화면의 일부분만 동적으로 렌더링하여 데스크탑 어플리케이션과 비슷한 유저경험을 제공한다.

HTTP의 비연결성과 비상태성 특징 때문에 모든 사용자의 요청마다 연결과 해제의 과정을 거치는데 이후 상태 정보가 저장되지 않습니다.
이로 인해 사용자를 식별할 수 없어서 같은 사용자가 요청을 여러번 하더라도 매번 새로운 사용자로 인식하는 단점이 있습니다.

출처

쿠키

  • 웹 사이트에 접속할 때 서버에 의해 사용자의 컴퓨터에 저장되는 정보를 담은 임시 파일
  • KEY와 VALUE 로 구성되고 String 형태로 이루어져있다.
  • 웹 사이트는 클라이언트 측의 쿠키를 남기고 필요할 때마다 재사용한다.
  • 로그인 정보나 장바구니 정보를 저장하는 용도로 많이 활용하고 있다
  • 로그아웃 유무와 관계없이 삭제하지않으면 유지됨
  • 사용자의 정보가 컴퓨터에 고스란히 남기 때문에 사생활 침해의 우려가 있으며 보안과 관련된 이슈를 가지고 있다.
  • 서버에서는 브라우저가 다르면 다른 사용자로 인식
    출처

세션

  • 웹 사이트의 여러 페이지에 걸쳐 사용되는 사용자 정보를 저장하는 방법
  • 사용자가 브라우저를 닫아 서버와의 연결을 끝내는 시점까지
  • 세션은 서버측에 데이터를 저장하고 세션의 키값만을 클라이언트 측에 남겨둔다.
  • 브라우저는 필요할 때마다 이 키값을 이용하여 서버에 저장된 데이터를 사용하게된다.
  • 세션 아이디는 웹 브라우저 당 1개씩 생성되어 웹 컨테이너에 저장되며 브라우저 종료시 소멸된다.
  • 로그아웃시 새로운 사용자로 인식하여 새로운 새션이 생성됨
  • 보안에 취약한 쿠키를 보완해주는 역할

라우팅

  • 패킷에 포함된 정보를 이용하여 목적지까지 데이터를 다른 네트워크에 전달하는 최적의 경로를 선택하는 과정
  • 패킷 : 데이터를 전송하는 하나의 단위, 네트워크 회선에서 데이터 한 묶음의 단위

Proxy Server

  • 클라이언트와 서버사이에 위치하여 HTTP 메시지의 중개인 역할
  • 클라이언트 입장에서 트랜잭션을 수행

ResponseEntity

  • HttpEntity 클래스를 상속받아 구현한 클래스
  • 사용자의 HttpRequest에 대한 응답 데이터를 포함하는 클래스로 HttpStatus, HttpHeaders, HttpBody 를 포함한다.
  • 상태코드를 return 해줘야한다.

CORS(Cross-Origin Resource Sharing)

  • CORS 정책 : 교차(다른) 출처 리소스 공유

출처 ?

  • URL의 스킴과 호스트 , 포트번호 => 서버의 위치를 찾아가기 위해 필요한 가장 기본적인 것들
  • 확인방법 : 개발자도구의 콘솔에서 Console.log(location.origin);

SOP (Same-Origin Policy)

  • SOP 정책 : 같은 출처에서만 리소스를 공유할 수 있다.
  • 다른 출처는 CORS 정책을 지킨 리소스 요청만 가능

출처를 비교하는 로직은 브라우저에 구현되어있다.

  • 서버 간 통신을 할 때는 출처를 비교하는 로직이 없어 CORS 정책을 위반하는 리소스 요청에 서버에는 에러 로그를 남기지 않는다.

CORS 동작

  • 웹 클라이언트 어플리케이션이 HTTP 프로토콜을 사용하여 요청을 보낼때 브라우저는 요청 헤더에 Origin이라는 필드에 요청을 보내는 출처를 함께 담아 보낸다.
  • 서버가 요청에 대한 응답을 할 때 응답 헤더의 Access-Control-Allow-Origin이라는 값에 이 리소스를 접근하는 것이 허용된 출처를 주고 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답을 비교해보고 유효한지 결정한다.

Simple Request

  • 서버에 본 요청을 보낸 후 서버가 보내준 값을 보고 브라우저가 CORS 정책위반 여부를 검사하는 방식
  • 조건
    • 요청의 메소드는 GET, HEAD, POST 중 하나여야한다.
    • Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width를 제외한 헤더를 사용하면 안된다.
    • Content-Type 을 사용하는 경우에는 application/x-www-form-urlencoded, multipart/form-data, text/plain만 허용

참고

0개의 댓글