21.05.27 쿠키(토큰 안에 쿠키) 생성, 공유

전체 코드

createtoken.js

const crypto = require('crypto')

function createtoken() {
    let header = {
        "alg": "HS256",
        "typ": "JWT"
    }
    let encode_header = Buffer.from(JSON.stringify(header))
        .toString('base64')
        .replace("=", '');

    let payload = {
        "sub": "1234567890",
        "name": "John Doe",
        "user": "jjun97",
        "iat": 1516239022
    }
    let encode_payload = Buffer.from(JSON.stringify(payload))
        .toString('base64')
        .replace('==', '');

    let signature = crypto.createHmac('sha256', Buffer.from('ingoo'))
        .update(`${encode_header}.${encode_payload}`)
        .digest('base64')
        .replace('=', '')

    return (`${encode_header}.${encode_payload}.${signature}`);
}
let token = createtoken();
console.log(token);
module.exports = createtoken;

 

 

server.js

const express = require('express');
const cookieParser = require('cookie-parser');
const token = require('./createtoken'); //외부 js 파일 가져오기
const app = express();

app.use(cookieParser());

app.get('/', (req, res) => {       
    let {msg} = req.query;
    console.log(req.query.msg);      
    res.send(`${msg} hello world <a href="/menu1">menu1</a><a href="/login?id=root&pw=root">로그인</a>`);
})

app.get('/login', (req, res) => {
    let { id, pw } = req.query;
 
    if (id == 'root' && pw == 'root') {
        //토큰생성
        let ctoken = token();
        res.cookie('token', ctoken, {httpOnly:true,secure:true,});    
        res.redirect('/?msg=로그인성공');                              
    } else {
        //토큰실패
        res.redirect('/?msg=로그인실패');
    }
})

app.listen(3000, () => {
    console.log('server 3000');
})

 

 

 

1.  localhost:3000 으로 접속

app.get('/')

req.query는 현재는 undefined임 

res.send( 안에 있는 내용을 body에 담에서 html에 뿌려줌)

 

<a href="/login?id=root&pw=root">

이 부분에서 localhost:3000/login?id=root&pw=root

쿼리로 id와 pw값을 보내준것이다.

 

 

---

 

 

2. 로그인 버튼 클릭

app.get('/login')

쿼리에서 받아온 id 와 pw 값을 가지고온다.

조건을 만족하면, 토큰을 생성한다.

ctoken (create token) 에 token(); 을 넣고

 

res.cookie('token', ctoken, {httpOnly:true,secure:true,});

               key      value                     

이런식으로 저장이 된다.

 

 

 

그런 뒤 localhost:3000 으로 redirect 를 시켜준다.

이때 쿼리 값(msg)을 담아서 보낸다.

res.redirect('/?msg=로그인성공');

 

다시 여기로 와서 msg에 로그인 성공이라는 값이 담기는 것을 확인 할 수 있다.

app.get('/', (req, res) => {       
    let {msg} = req.query;
    console.log(req.query.msg);   

 

 

---

 

 

 

 

쿠키의 흐름

1. localhost:3000

 

 

당연히 쿠키값 없음

 

 

 

---

 

 

 

2. 로그인 버튼 눌렀을 때

 

요청( res )이 두개임

app.get('/login', (req, res) => {
    let { id, pw } = req.query;
   
    if (id == 'root' && pw == 'root') {
        //토큰생성
        let ctoken = token();
        res.cookie('token', ctoken, {httpOnly:true,secure:true,});    
        //쿠키 생성 요청하고 맞으면 set-cookie 에 생성되는거
        
        res.redirect('/?msg=로그인성공');                               
        // 요청에 쿠키가 있는 이유는 저장이 이미 되어서 
    } else {
        //토큰실패
        res.redirect('/?msg=로그인실패');
    }
})

 

 

①  localhost:3000/login?id=root&pw=root

id 와 pw 가 맞으면 쿠키 생성 되고 요청헤더에 이 쿠키를 담아서 보내고

응답 헤더에 set-cookie 라는 곳에 저장됨

 

로그인 실패시 요청헤더에 쿠키값을 담아서 보내지만,

응답 헤더 set-cookie에 저장되지 않는다.

 

 

② 로그인 성공 시 redirect

res.redirect('/?msg=로그인성공'); 

요청헤더에 쿠키값이 저장되어 있는걸 확인할 수 있다.

 

이유?

★

클라이언트에 스토리지가 있다
브라우저는 쿠키가 생기면 스토리지에 내용을 적는다 파일로 저장한다

token : jjun

요청하면 스토리지에 있는 내용을 haeders에 만든다
그리고 요청을 보낸다
요청을 할때마다 스토리지에 있는거를 다 담아서 서버에게 보내준다
이것이 쿠키가 항상 유지되는 이유이다.

 

 

 

※ 왜 응답헤더에는 없을까?

redirect로 메인페이지로 연결시켰는데

 

get('/') 이 부분에는 쿠키에 대한 처리값이 전혀 없다.

그래서 응답 헤더에는 set-cookie 값이 없는 것이다.

 

 

 

---

 

 

쿠키를 감추자

 res.cookie('token', ctoken);  

이렇게만 쓰면

이렇게 cookie 값이 노출된다. 

해킹의 위험이 높아지므로 이를 숨겨야 한다.

 

---

★   쿠키값 노출되지 않게 하기

 res.cookie('token', ctoken, {httpOnly:true,secure:true,});  

뒷 부분에 옵션을 추가해주었다.

 

 

쿠키 값이 노출되지 않는다.

 

 

 

설정한대로 모두 true 값을 갖는다.