Cookie
쿠키: 서버에서 클라이언트에 쿠키를 전송 + 클라이언트에서 서버로 다시 쿠키 전송
삭제하지 않으면 사라지지 않는다.
장시간 보존해야하는 정보 저장에 적합
로그인상태유지, 장바구니 등
'Set-Cookie':[
'cookie=yummy',
'Secure=Secure; Secure',
'HttpOnly=HttpOnly; HttpOnly',
'Path=Path; Path=/cookie',
'Doamin=Domain; Domain=codestates.com'
]Cookie Options
옵션들을 지정한 후 헤더에 Set-Cookie라는 프로퍼티로 담아 전송
클라이언트->서버인 경우 헤더에 Cookie라는 프로퍼티로 담아 전송
- Domain: 서버와 요청의 도메인 일치하는 경우 전송
- 서브도메인정보, 세부경로 불포함(www, /users/login) - Path: 서버와 요청의 세부경로가 일치하는 경우 전송
- path=/users 일때 /users/login에 쿠키ok - MaxAge or Expires: 쿠키의 유효기간 설정
- maxage(초) expires(날짜지정)- 세션쿠키: 임시쿠키. 브라우저 종료시 삭제/영속성쿠키: 유효시간지정
- HttpOnly: 스크립트의 쿠키 접근 가능여부
- true/false- document.cookie로 접근 가능
- Secure: HTTPS 프로토콜에서만 쿠키 전송여부 결정
- SameSite: CORS요청 옵션 및 메서드에 따라 쿠키전송여부 결정
HttpOnly
쿠키는
<script>태그로 접근이 가능하다 = XSS공격에 취약하다
민감한 정보나 개인정보는 담지말자sameSite
CSRF 공격 방지
- Lax: get메서드 요청만 쿠키 전송
- Strict: cross-origin 쿠키 전송불가. same-site(Origin과 서버의 도메인, 프로토콜, 포트가 같음)에만 전송
- None: Secure옵션이 있는 모든 메서드요청에 쿠키 전송
Axios
fetch API같은거.
axios는 json데이터 형식으로 자동변환이 된다.
1. 설치
npm install axios2. 리액트에서 axios import하기
import axios from 'axios';3. get요청하기
첫번째 인자로 url이 들어가고 두번째 인자로는 요청시 사용할 수 있는 옵션들을 설정한다.
axios.get("url"[,config])vs fetch()
fetch('url', {method: 'GET'})
.then(res => res.json())
.then(res => console.log(res));
axios
.get('url')
.then(res => console.log(res));
Session
서버가 클라이언트에 유일하고 암호화된 아이디 부여. 사용자가 인증에 성공한 상태를 세션이라고 한다.
중요 데이터는 서버에서 관리한다.
xss공격에 취약하다. 쿠키를 사용하기 때문이다.
세션이 만들어지면 세션 아이디가 만들어진다.
웹사이트에서는 로그인을 유지하기 위한 수단으로 쿠키를 사용하고, 쿠키에는 서버에서 발급한 세션 아이디를 저장해놓는다.
로그아웃을 하려면 서버에서는 세션 정보를 삭제하고, 클라이언트는 쿠키를 갱신해야한다.
express-session
노드에서 세션을 관리해주는 모듈으로 미들웨어다.
app.use()로 사용함
const express = require('express');
const session = require('express-session');
const app = express();
app.use(
session({
secret: '@codestates', //비밀키. 암호화해 세션id라는것을 생성한다.
resave: false,
saveUninitialized: true,
cookie: {
domain: 'localhost',
path: '/',
maxAge: 24 * 6 * 60 * 10000,
sameSite: 'none',
httpOnly: false,
secure: true,
},
})
);Token
Token-based Authentication
토큰기반 인증 사용하는 이유
매 요청마다 데이터베이스를 살펴보는 것이 불편하기 때문.
JWT(Json Web Token)
토큰은 유저 정보를 암호화하기 때문에 클라이언트에서 보관할 수 있다.
- 액세스 토큰 : 보호된 정보들에 접근할 수 있는 권한부여. 유효기간을 잛게 준다.
- 리프레시 토큰 : 액세스토큰 유효기간이 만료되면 리프레시 토큰을 이용해 재발급한다. 사용하지 않는 웹사이트도 많다.
1. Header
어떤 종류의 토큰인지, 어떤 알고리즘으로 시그니처를 암호화할지 json으로 적혀있다. 이 제이슨객체를 base64방식으로 인코딩하면 헤더 완성!
{ "alg": "HS256", "typ": "JWT" }2. Payload
서버에서 활용할 수 있는 유저의 정보. 접근가능한 정보권한, 개인정보 등.
base64로 인코딩하면 페이로드 완성!{ "sub": "someInformation", "name": "phillip", "iat": 151623391 }3. Signature
헤더와 페이로드를 서버의 비밀키와 헤더에서 지정한 알고리즘을 사용해 암호화한다.
HMAC SHA256 알고리즘을 사용할때 시그니쳐 생성방법
HMACSHA256(base64UrlEncode(header) + '.' + base64UrlEncode(payload), secret);
토큰기반 인증 절차
- 클라이언트가 서버에 아이디/비밀번호를 담아 로그인 요청을 보낸다.
- 아이디/비밀번호가 일치하는지 확인하고, 클라이언트에게 보낼 암호화된 토큰을 생성한다.
- access/refresh 토큰생성
- 토큰에 담길 정보(payload)는 유저를 식별할 정보, 권한이 부여된 카테고리(사진, 연락처, 기타 등등)이 될 수 있다.
- 두 종류의 토큰이 같은 정보를 담을 필요는 없음!!
- 서버가 토큰을 클라이언트에게 보내주면, 클라이언트는 토큰을 저장한다.
- 저장하는 위치는 Local Storage, Session Storage, Cookie 등
- 클라이언트가 HTTP 헤더(Authorization 헤더) 또는 쿠키에 토큰을 담아 보낸다. 쿠키에는 리프레시 토큰을 헤더 또는 바디에는 액세스 토큰을 담는 등 다양한 방법으로 구현할 수 있다.
- Authorization 헤더를 사용한다면 Bearer Authentication을 이용한다.
- 서버는 토큰을 해독하고 클라이언트의 요청을 처리한 후 응답을 보내준다.
토큰 장점
- 무상태성 & 확장성
서버에서 클라이언트 정보를 저장할 필요가 없이 토큰이 해독되는지만 판단하면 된다.- 안전함
암호화한 토큰을 사용하고 암호화 키를 노출할 필요가 없어 안전하다.- 어디서나 생성 가능
토큰을 확인하는 서버가 토큰을 만들지 않아도 된다.- 권한 부여에 용이
페이로드에 어떤 정보에 접근 가능한지 정할 수 있다.
해싱
비밀번호를 암호화해 저장할 때 많이 사용한다. 암호화는 가능하지만 복호화가 불가능하다.
일정한 길이의 문자열을 리턴한다.
서로 다른 문자열에 동일한 해시함수를 사용하면 다른 결과값이 나온다.
동일한 문자열에 동일한 해시함수를 사용하면 같은 결과값이 나온다.
레인보우 테이블이라는 것이 존재하여 해싱된 비밀번호를 알아낼 수 있다. 이를 방지하기 위해 솔트(임의의 값)를 더해 암호화한다.
