221223 - Node Express - Cookie, cookieParser()

오늘 내가 배운 것

1. Cookie (쿠키)

2. Cookie 만들기

3. cookie-parser (쿠키 파서 만들기)

4.npm - cookieParser() 이용하기

 

 

1. Cookie (쿠키)

http 특징 : 비연결성
http 비연결성인 단점을 보안하기 위해 쿠키랑, 세션을 배운다.

 

서버가 사용자의 브라우저에 전송하는 작은 데이터 조각이다. 브라우저는 그 데이터들을 저장(예전에 사용해봤던 localstorage와 비슷)해 놓았다가, 동일한 서버에 request message를 보낼 때 저장된 데이터를 함께 전송한다.

쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로

 사용하고, 이걸 이용하면 사용자의 로그인 상태를 유지할 수 있다. 하지만 브라우저마다 자동로그인이 차별되어 있다. 왜냐하면 브라우저마다 브라우저 안에서 자체적으로 데이터 저장소를 가지고 있기 때문이다.
 
브라우저 데이터 저장소에 저장되어 있는 내용을 같이 적어서 보낸다.(그래서 저장 용량이 많이 적다.)

 

 

2. Cookie 만드는 방법

요청페이지가 어디가 됐든 cookie는 언제나 들어가 있다.
브라우저가 쿠키를 가지고 있다면 요청할 때마다 그 쿠키 데이터를 서버로 같이 요청메시지를 보낸다.
쿠키를 만드는 법은 2가지가 있다. 

- client 측에서 쿠키 만들기 : 

브라우저는 document.cookie 라는 속성을 사용할 수 있다.
document.cookie = 'baek'='space'

- server 측에서 쿠키 요청하기 : 
res.setHeader("name"="baek)
name = baek 이라는 헤더를 만들어 줌 

res.setHeader("Set-Cookie", 'express=1;')
response message로 Set-Cookie: express=1;가 전달이 되고
쿠키에 express = 1 이라는 값이 저장되어 있다.

 

 

서버 측에서는 직접적으로 쿠키를 만드는 것이 아닌 쿠키를 만들어 달라고 브라우저에게 요청을 하는 것이다(쿠키가 저장되는 곳은 브라우저의 저장공간이기 때문에..)

javascript를 이용한(브라우저에서) 쿠키를 컨트롤할 수 없게 만들 수 있다.

 

 

3. cookie.parser 구현하기 : req.headers.cookie 객체화시키기

쿠키를 이용하여 작업을 할 때 쿠키의 키와 값을 잘 가져다 쓰기 위하여 객체화를 시켜서 관리를 한다.

 

app.use(req, res, next) =>{
    console.log(req.headers.cookie) // cookie : 'a=a; b=b; c=c; '

    if(req.headers.cookie === undefined) return next()
    const cookies = req.headers.cookie.split(';').map((v)=>v.split('=')).reduce((acc,[key, value])=>{
        acc[k.trim()]=v
        return acc
    },{})
    req.cookies = cookies
    next()
}

 

이를 이용하여 cookieParser 구현하기

 

//server.js


const express = require("express")
const nunjucks = require("nunjucks")
const app = express()

app.set('view engine', 'html')
nunjucks.configure('views',{
    express:app,
})

app.use((req, res, next)=>{
    console.log(req.headers.cookie) // cookie : 'a=a; b=b; c=c; '

    if(req.headers.cookie === undefined) return next()
    const cookies = req.headers.cookie.split(';').map((v)=>v.split('=')).reduce((acc,[key, value])=>{
        acc[key.trim()] = value
        return acc
    },{})
    req.cookies = cookies
    next()
})  // 어떤 요청이 들어오더라고 req.headers가 출력된다.


app.get('/', (req, res)=>{
    res.render('index.html')
})
app.get('/createCookie', (req, res)=>{ 
    res.setHeader('name','baek') //name 속성에 baek 값을 넣어서 응답을 보내주겠다.
    res.setHeader('Set-Cookie', "token=baek; Domain=127.0.0.1; Path=/; Secure; HttpOnly")
    res.send("응답")
})
app.get('/profile', (req,res)=>{
    // console.log(req.headers.cookie)//string 이므로 객체화를 시켜야 사용하기 편하다.
    console.log(req.cookies)  // 위에서 미들함수로 사용했기때문에 아래에서 사용할 수 있다. // { token: 'baek' } 객체화 확인...
    console.log(req.cookies.token)  // 쿠키 token의 값을 구할 수 있다.
    res.send("profile~")
})
app.listen(3000, ()=>{ 
    console.log(`server start`)
})

 

 

4.npm - cookieParser() 이용하기

 

1. npm install을 이용하여 cookie-parser 설치하기

npm install cookie-parser

 

2. 적용하기

const express = require('express')
const cookieParser = require('cookie-parser')

const app = express()
app.use(cookieParser())

app.get('/', function (req, res) {
  // 일반적인 쿠키
  console.log('Cookies: ', req.cookies)

  // 서명된(암호화) 쿠키
  console.log('Signed Cookies: ', req.signedCookies)
})

cookieparser는 리턴값이 함수이기 때문에 호출을 해서 값을 이용할 수 있도록 하자.