22.07.14_TIL

📌 오늘부터 3일간 로그인관련 내용을 학습을 하게된다. 쿠키... 토큰... 소셜 로그인 관련이다... 이부분은 프로젝트에 사용할 수 있는 부분이기 때문에 열심히해보자!!!

📗 오늘 학습한 내용

HTTPS 프로토콜

• HTTP + Secure
• 요청의 내용을 한번 암호화하기 때문에 유출이 되어도 어떤 내용인지 알 수 없다.
• 인증서, CA, 비대칭 키 암호화방식을 이용한다.
• 인증서
  • 데이터를 제공하는 서버가 진짜인지 인증확인하는 용도이다.
  • 인증서의 내용에 서버에 도메인 관련 정보가 있어서 데이터 제공자의 인증을 용이하게 한다.
  • 요청을 받은 서버는 인증서와 함께 응답을 전송하고, 응답을 받은 클라이언트는 인증서에 작성된 도메인과 응답 객체에 작성된 도메인을 비교하여 같다면 데이터를 제공해주는 서버가 진짜라는 것을 알 수 있습니다.
• CA (Certificate Authority)
  • 인증서를 발급하는 공인된 기관이다.
  • 각 브라우저는 신뢰하는 CA의 정보를 가지고 있어 인증서의 차이가 있다.
• 비대칭 키 암호화
  • 암호화 및 복호화 가능
  • A키로 특정 데이터를 암호화하면 해당 키를 복호화하는데 A키의 쌍인 B키로만 가능하다.

암호화

• 제 3자가 서버와 클라이언트가 주고받는 정보를 탈취할 수 없도록 하는 것이다.
• 서버와 클라이언트는서로가 합의한 방법으로 데이터를안호화하여 주고 받는다.
• 중간에 제 3자에게 데이터가 탈취되더라도 그 내용을 알아볼 수 없다.
• 일련의 정보를 임의의 방식을 사용하여 다른 형태로 변환하여 해당 방식에 대한 정보를 소유한 사람을 제외하고 이해할 수 없도록 '알고리즘'을 이용해 정보를 관리하는 과정이다.

mkcert

• 로컬 환경에서 신뢰할 수 있는 인증서를 만든다.
• 로컬을 인증된 기관으로 추가한 뒤 로컬 환경 인증서를 생성한다.

// 설치
brew install mk cert

// 로컬을 인증된 발급기관으로 추가
mkcert -install

// 로컬 환경 인증서 생성
mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1

Hashing

• 어떤 문자열에 '임의의 연산'을 적용하여 다른 문자열로 변환하는 것
  1. 모든 값에 대해 해시 값을 계산하는데 오래걸리지 않아야 한다.
  2. 최대한 해시 값을 피해야 하며, 모든 값은 고유한 해시 값을 가진다.
  3. 아주 작은 단위의 변경이라도 완전히 다른 해시 값을 가져야 한다.

Salt

• 암호화해야 하는 값에 어떤 '별도의 값'을 추가하여 결과를 변형하는 것
  1. 암호화만 해놓는다면 해시된 결과가 늘 동일하다.
     해시된 값과 원래 값을 테이블(레인보우 테이블)로 만들어서 decoding 해버리는 경우도 생긴다.
  2. 원본값에 임의로 약속된 별도의 문자열을 추가하여 해시를 진행한다면 기존 해시값과 전혀 다른 해시값이 반환되어 알고리즘이 노출되더라도 원본값을 보호할 수 있도록 하는 안정 장치이다.
  3. 기존: 암호화 하려는 값 -> hash 값
     Salt: 암호화 하려는 값 + Salt 용 값 => hash 값

Cookie

• 서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법이다.
• 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함된다.
• 특징
  • 서버가 클라이언트에 특정한 데이터를 저장할 수 있다.
  • 데이터를 저장한 이후 아무 때나 데이터를 가져올 수 는 없고, 데이터를 저장한 후 특정 조건들이 만족돼야 다시 가져올 수 있다.

1. Domain

• www.google.com과 같은 서버에 접속할 수 있는 이름

2. Path

• 세부 경로로써 서버가 라우팅할 때 사용하는 경로를 의미한다.
• 설정된 경로를 포함하는 하위 경로로 요청을 해도 쿠키를 서버에 전송할 수 있다.

3. MaxAge or Expires

• 쿠키가 유효한 기간을 정하는 옵션
• MaxAge: 시간을 초 단위로 설정
• Expires: 날짜 설정
• 세션 쿠키: MaxAge, Expires 옵션이 없는 쿠키(임시 쿠키)
• 영속성 쿠키: MaxAge, Expires에 지정된 유효시간만큼 사용가능한 쿠키

4. Secure

• 사용하는 프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션이다.
• Secure 옵션이 true로 설정된 경우 HTTPS를 이용하는 경우에만 쿠키를 전송할 수 있다.

5. HttpOnly

• JS에서 브라우저의 쿠키에 접근 여부를 결정한다.
• 옵션이 true인 경우 js로 쿠키에 접근이 불가하다.

6. SameSite

• Cross-Orgin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정하게 된다.

쿠키를 이용한 상태 유지

• 기본적으로 쿠키는 오랜 시간 유지할 수 있고, HttpOnly 옵션을 사용하지 않았다면 JS를 이용해서 쿠키에 접근할 수 있기 때문에 쿠키에 민감한 정보를 담는 것은 위험하다.

Session

• 서버가 Client에 유일하고 암호화된 ID를 부여
• 중요 데이터는 서버에서 관리

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

axios 사용방법

📝 중요한 내용

• 쿠키: 서버가 클라이언트에 데이터를 저장하는 방법
• 세션: 사용자가 인증에 성공한 상태
• axios로 서버와 통신가능 (fetch와 같은 기능, 실무에서 많이 사용)

axios	fetch
써드파티 라이브러리(설치 해야 사용 가능)	빌트인(설치하지 않아도 사용 가능)
XSRF 보안 기능 제공	보안 기능 없음
자동 JSON 데이터 변환	JSON 데이터 핸들링 위한 추가 로직 구현
데이터가 객체가 포함됨	데이터가 문자열화 되어야함

추가 비교 표: https://www.geeksforgeeks.org/difference-between-fetch-and-axios-js-for-making-http-requests/

Difference between Fetch and Axios.js for making http requests - GeeksforGeeks