[TIL] Day57 #HTTPS #Cookie #Session

2022.07.14(Thurs)

[TIL] Day57
[SEB FE] Day56

☑️ 웹 인증/보안

📎 HTTPS

Hyper Text Transfer Protocol Secure Socket layer (HTTP + Secure)
: HTTP 요청을 SSL이나 TLS 알고리즘을 이용해, HTTP 통신을 하는 과정에서 데이터를 암호화하여 전송하는 방법

➰ HTTPS 목적

1. 암호화: 제3자가 서버와 클라이언트가 주고받는 정보를 탈취할 수 없도록 하는 것
   • 대칭키 방식: 양쪽이 공통 비밀키를 공유하여 데이터를 암호화 및 복호화하는 것
     • 클라이언트와 서버가 데이터를 주고받을 때 사용
   • 비대칭키 방식: 공개키와 비밀키를 가지고 상대가 나의 공개키로 암호화한 데이터를 개인이 가진 비밀키로 복호화하는 것
     • 대칭키를 주고받을 때 사용
     • A_key로 암호화 → B_key로만 복호화 가능!!
2. 인증서(Certificate): 브라우저가 서버의 응답과 함께 전달된 인증서 확인 가능
   • 데이터 제공자 신원 보장
   • 도메인 종속
   • CA(Certificate Authority): 서버 신원 보증할 수 있는 제3자로써, 인증서를 발급해주는 엄격하게 공인된 기관
     👉 서버 공개키와 정보를 CA 비밀키로 암호화하여 인증서 발급

✅ 인증서가 CA 비밀키로 암호화되어 있기 때문에 CA 개인키로 복호화 가능
👉 해당 CA에서 발급한 인증서라는 것을 보증 가능!!

➰ SSL → TLS
: 서버와 클라이언트간의 CA를 통해 서버를 인증하는 과정 & 데이터를 암호화하는 과정을 아우른 프로토콜

➰ HTTPS 통신 과정

1. Hand Shake
2. 비밀 키 생성: 클라이언트와 서버 각각 세션 키 생성
3. 상호 키 검증: HTTPS 연결 성립

➰ HTTPS 사설 인증서 발급 / 서버 구현

# mkcert install
$ brew install mkcert

# [인증서 생성]
# 인증된 발급기관으로 로컬 추가
$ mkcert -install

# 로컬 환경에 대한 인증서 생성
$ kcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1

# => cert.pem, key.pem 파일 생성됨!

// Node.js https module를 이용하여 HTTPS 서버 구현

const https = require('https');
const fs = require('fs');

https
  .createServer(
    {
      key: fs.readFileSync(__dirname + '/key.pem', 'utf-8'),
      cert: fs.readFileSync(__dirname + '/cert.pem', 'utf-8'),
    },
    function (req, res) {
      res.write('Success:) https server!!');
      res.end();
    }
  )
  .listen(3001);

// Express.js 이용하여 HTTPS 서버 구현

const https = require('https');
const fs = require('fs');
const express = require('express');

const app = express();

https
  .createServer(
    {
      key: fs.readFileSync(__dirname + '/key.pem', 'utf-8'),
      cert: fs.readFileSync(__dirname + '/cert.pem', 'utf-8'),
    },
    app.use('/', (req, res) => {
      res.send('Success:) https server!!');
    })
  )
  .listen(3001);

✚ ngrok(HTTP 서버 → HTTPS 프로토콜로 터널링해주는 프로그램) 이용하여 HTTPS로 터널링해보기~!

📎 Hashing

: 어떤 문자열에 임의의 연산을 적용하여 다른 문자열로 변환하는 것

➰ Hashing 철칙

1. 모든 값에 대한 해시값 계산은 오래걸리지 않아야 함
2. 최대한 해시값을 피해야 하며, 모든 값은 고유한 해시값을 가짐
3. 작은 단위 변경이라도 완전히 다른 해시값을 가져야 함

➰ 암호화(Encryption)
: 임의의 방식을 사용해서 정보를 다른 형태로 변환하여 해당 정보를 소유한 사람을 제외하고 이해할 수 없도록 알고리즘을 이용해 정보를 관리하는 과정

➰ Salt
: 암호화해야 하는 값에 별도 값을 추가하여 결과를 변형하는 것

✎ 암호화만 해놓으면 해시된 결과 항상 동일
👉 Salt 사용시, 기존 해시값과 전혀 다른 해시값이 반환되어 알고리즘이 노출되어도 원본값을 보호할 수 있음 → 안전 장치 역할!!

✅ 암호화하려는 값 + Salt 값 ⇒ Hash 값

✚ Rainbow Table: 특정 입력값 해싱 결과를 대량으로 모아놓은 표

➰ Salt 사용시 주의점

1. User & Password 별로 유일한 값을 가져야 함
2. 사용자 계정을 생성할 때 & 비밀번호 변경할 때 마다 새로운 임의의 Salt를 사용해서 Hashing
3. 절대 재사용 금지 ❌
4. DB의 User Table에 같이 저장되어야 함

---

☑️ Cookie 🍪

: 서버에서 클라이언트에 영속성있는 데이터 저장 방법
👉 서버는 클라이언트 쿠키를 이용하여 데이터를 가져올 수 있음

✎ 해당 도메인에 쿠키 존재시, 웹 브라우저는 도메인에게 http 요청시 쿠키 함께 전달

• 서버 → 클라이언트에 특정 테이터 저장 → 다시 해당 데이터를 불러와 사용 가능
  But, 데이터 저장 이후 특정 조건들이 만족되어야 쿠키를 다시 가져올 수 있음 👉 이러한 조건들을 쿠키 옵션으로 표현 가능
  

📎 Cookie Option

⌘ URL: `http://www.localhost:3000/users/login`

1. Domain: 서버에 접속할 수 있는 이름

   • 포트, 서브 도메인 정보(ex - www), 세부 경로 포함 ❌
   • [Client] 쿠키 도메인 옵션 & 서버 도메인이 일치해야만 쿠키 전송 가능
   • localhost

2. Path: 세부 경로로써 서버가 라우팅할 때 사용하는 경로

   • 설정된 경로를 포함하는 하위 경로로 요청해도 쿠키를 서버에 전송 가능
   • /users/login

3. MaxAge / Expires : 쿠키가 유효한 기간을 정하는 옵션

   • MaxAge: 쿠키가 유효한 시간을 초 단위로 설정하는 옵션
   • Expires: 언제까지 쿠키가 유효한지 날 지정 가능
     • 옵션 값은 클라이언트 시간 기준 → 지정 시간, 날짜 초과시 쿠키 자동 파괴
   • 🍪 세션 쿠키: MaxAge / Expires 옵션 없는 쿠키로, 브라우저 실행 중일 때 사용 가능한 임시 쿠키
     • 브라우저 종료시 해당 쿠키 삭제
   • 🍪 영속성 쿠키: 브라우저 종료 여부와 상관없이 지정된 유효시간만큼 사용 가능한 쿠키

4. Secure: 사용하는 프로토콜에 따른 쿠키 전송 여부 결정 옵션

   • true → HTTPS 이용시에만 쿠키 전송 가능
   • 이 옵션이 없으면 HTTP, HTTPS 등의 프로토콜 상관없이 모두 쿠키 전송 가능

5. HttpOnly: JS에서 브라우저의 쿠키에 접근 여부 결정

   • true → JS로 쿠키 접근 불가 ❌
   • false → document.cookie를 이용해 JS에서 쿠키접근 가능 ⭕️ → XSS 공격 취약

6. SameSite: 요청을 보낸 Origin & 서버의 도메인, 프로토콜, 포트가 같은 경우 (이 중 하나라도 다르면 Cross-Origin !)

   • Cross-Origin 요청을 받은 경우, 요청에서 사용한 메소드 & 해당 옵션(GET, POST …) 조합 기준으로 서버의 쿠키 전송 여부 결정

   • Lax: Cross-Origin 요청 → GET 메소드에 대해서만 쿠키 전송 가능

   • Strict: 가장 엄격한 옵션으로, Cross-Origin이 아닌 same-site인 경우에만 쿠키 전송 가능

   • None: 항상 쿠키를 보내줄 수 있음. But, Secure 옵션 필요

😈 [server] —Set-Cookie—> [client] —Cookie—> [server]

✋ 쿠키는 오랜 시간동안 유지될 수 있으며, HttpOnly 옵션 미사용시 JS를 이용하여 쿠키에 접근 가능하기 때문에 쿠키에 민감정보를 담는건 위험 🧨

---

☑️ Session

: 사용자가 인증에 성공한 상태

• 서버가 클라이언트에 유일하고 암호화된 ID 부여
• 중요 데이터는 서버에서 관리!

✎ 인증에 따라 리소스 접근 권한(Authorization)이 달라짐

• [Server] 사용자가 인증에 성공했음을 알고 있어야 함
• [Client] 인증 성공을 증명할 수단을 갖고 있어야 함

📎 세션기반 인증(Session-based Authentication)

📌 Login

1. [Client→Server] 사용자가 웹사이트에서 로그인 시도

2. [Server→Session_Store] DB에 정보 및 세션 저장

3. [Session_Store→Server] 세션 생성시, 각 세션 구분 가능한 세션ID 반환

4. [Server → Client] 중요 유저 데이터를 암호화된 세션ID로 저장

   ✋ 클라이언트에 세션 성공을 증명할 수단으로써 세션ID 전달

   ✋ 웹사이트에서 로그인 유지 수단으로 쿠키 사용 (쿠키에 서버에서 발급한 세션ID 저장)

5. [Client→Server] 유효한 세션ID로 필요한 작업 수행

6. 세션 스토어에 해당 세션 존재시 서버는 해당 요청에 접근 가능하다고 판단

   ✋ 쿠키에 세션ID 정보가 없는 경우, 서버는 해당 요청이 인증되지 않았음을 알려줌

📌 Logout

✎ 세션ID가 담긴 쿠키는 클라이언트에 저장됨
✎ 세션은 서버에 저장됨
✎ 서버는 세션ID로만 인증 여부 판단!

✋ 쿠키는 세션ID 즉, 인증 성공에 대한 증명을 가지고 있으므로, 탈취될 경우 서버는 해당 요청이 인증된 사용자 요청이라고 판단 🥲 👉 공공 PC에서 로그아웃!!

• [Server] 세션 정보 삭제해야 함
• [Client] 쿠키 갱신해야 함

✋ 서버는 클라이언트 쿠키를 임의로 삭제 불가 ❌
     대신, set-cookie로 클라이언트에게 쿠키 전송시 세션ID 키 값을 무효한 값으로 갱신 가능

📎 express-session

: 세션을 대신 관리해주는 모듈로, express 서버에서 쉽게 세션을 위한 공간을 다룰 수 있도록 만들어줌 (미들웨어)

const express = require('express');
const session = require('express-session');

const app = express();

app.use(
  session({
    secret: '@beanxx', // 비밀키 -> 암호화하여 세션ID 생성 -> 클라이언트에게 쿠키로 전송
    resave: false,
    saveUninitialized: true,
    cookie: {
      domain: 'localhost',
      path: '/',
      maxAge: 24 * 6 * 60 * 10000,
      sameSite: 'none',
      httpOnly: false,
      secure: true,
    },
  })
);

• 쿠키로 전송된 세션ID는 고유한 세션 객체를 가지며 서버에 저장
  • 세션 객체 - 유저별로 독립적으로 생성된 객체 → 유저별로 각각 다른 데이터 저장 가능
    • req.session으로 접근 가능 → 세션에 임의 데이터를 저장하거나 불러올 수 있음
• 서버는 클라이언트의 세션ID를 이용해 유저 인증여부 판단 가능

✅ Cookie & Session Summary

	설명	접속 상태 저장 경로	👍	👎
Cookie 🍪	http의 stateless한 것을 보완해주는 도구	Client	서버 부담 ⬇️	쿠키 그 자체는 인증 ❌
Session	- 접속 상태를 서버가 가짐 (stateful) - 접속 상태와 권한 부여를 위해 세션ID를 쿠키로 전송	Server	신뢰할 수 있는 유저인지 서버에서 추가 확인 가능	하나의 서버에서만 접속 상태를 가지므로 분산에 불리

---

☑️ [Pair] Auth Basic

: 로그인 상태 유지 기능을 제공하는 간단 웹 앱 구현해보기 🙌

👾 한번 다시 공부하고 다시 업로드하기!~!