[포스코x코딩온] 웹개발자 풀스택 과정 6주차 | 쿠키,세션

쿠키

쿠키란?

• 웹 사이트에 접속할 때 서버에 의해 사용자의 컴퓨터에 저장되는 정보를 의미
• 웹 사이트는 이렇게 저장된 사용자의 정보를 클라이언트(Client) 측의 컴퓨터에 남겨서 필요할 때마다 재사용
• 사용자의 컴퓨터에 마치 과자 부스러기가 남아 있는 것과 같다고 해서 '쿠키(cookie)'라는 명칭이 붙음
• 현재 이러한 쿠키는 로그인 정보나 장바구니 정보를 저장하는 용도로 많이 활용되고 있지만, 사용자의 정보가 컴퓨터에 고스란히 남기 때문에 사생활 침해의 우려가 있으며, 보안과 관련된 이슈를 가지고 있다.

쿠키의 동작 방식

1. 클라이언트가 페이지를 요청
2. 서버에서 쿠키를 생성
3. HTTP 헤더에 쿠키를 포함 시켜 응답
4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

쿠키의 사용예시

쿠키 사용하기

npm install cookie-parser 	// 쿠키설치

일반쿠키 사용

const cookieParser = require('cookie-parser')
//일반쿠키 사용
app.use(cookieParser());
//cookie 옵션
const cookieConfig = {
	httpOnly : true,
	maxAge : 60 * 1000
};

//메인페이지
app.get('/', (req,res)=>{
  res.render('index');
};

app.get('/setCookie', (req,res)=>{
  //쿠키이름, 쿠키값, 옵션객체 순서로 옴
  res.cookie('myCookie','myValue',cookieConfig);
  res.send('set Cookie');
}

CookieConfig 옵션

1. httpOnly : 웹 서버를 통해서만 쿠키에 접근 가능, 자바스크립트에서 document.cookie를 이용해서 쿠키에 접속하는 것을 차단
2. maxAge : 쿠키의 수명을 나타냄, 밀리초 단위
3. expires : 만료날짜를 GMT 시간으로 설정
4. path : 해당 디렉토리와 하위 디렉토리에서만 경로가 활성화 되고 웹 브라우저는 해당하는 쿠키만 웹 서버에 전송 즉, 쿠키가 전송될 URL 특정 가능(기본값: '/')
5. domain : 쿠키가 전송될 도메인을 특정 가능(기본값: 현재 도메인) -> 자주안씀
6. secure : 웹 브라우저와 웹 서버가 https로 통신하는 경우에만 쿠키를 서버에 전송 -> 자주씀
7. signed : 쿠키의 암호화를 결정(req.signedCookies 객체에 들어있음)

암호화 쿠키

//일반쿠키 사용
//app.use(cookieParser());
//암호화 쿠키
app.use(cookieParser("newJeans"))
//cookie 옵션
const cookieConfig = {
	httpOnly : true,
	maxAge : 60 * 1000,
  	signed : true,	// 암호화 결정하는 옵션(req.signedCookies 객체에 들어있음)
};

//메인페이지
app.get('/', (req,res)=>{
  res.render('index');
};

app.get('/getCookie', (req, res)=>{
    // res.send(req.cookies);
    res.send(req.signedCookies);    //암호화쿠키
})

쿠기 삭제

app.get('/clearCookie', (req,res)=>{
  res.clearCookie('myCookie','myValue',cookieConfig)
  // 쿠키이름, 쿠키값, 옵션객체값이 똑같아야 삭제됨
  res.send('clear cookie');

쿠키 예제

1. view/index.ejs

얘는 부트스트랩 복붙
모달창 X 표시 id값 = close
오늘 그만보기 왼쪽에 체크박스 id = btn

• 체크박스에 onchange옵션을 줘서 체크박스가 눌릴때마다 true, false값이 isChecked라는 변수에 저장되게 설정
• 모달창 닫기 버튼에 onclick함수를 주고 axios방식으로 data에 아까 저장한 체크박스 옵션(true, false)값을 보냄

2. controller/index.js

• 아까보낸 체크박스 옵션은 req.body.checked에 담겨잇음
• 체크박스 옵션이 true -> 쿠키를 생성함
• false면 아무일도 안 일어남

true 일때 정상적으로 쿠키가 부여되는 것을 볼 수 있음
물론 false면 아무일도 안 일어남

Session

세션이란?

• 웹 사이트의 여러 페이지에 걸쳐 사용되는 사용자 정보를 저장하는 방법을 의미
• 사용자가 브라우저를 닫아 서버와의 연결을 끝내는 시점까지를 세션이라고 함
• 쿠키는 클라이언트 측의 컴퓨터에 모든 데이터를 저장하지만, 세션은 서비스가 돌아가는 서버 측에 데이터를 저장하고, 세션의 키값만을 클라이언트 측에 남겨둠
• 브라우저는 필요할 때마다 이 키값을 이용하여 서버에 저장된 데이터를 사용하게 됨 이러한 세션은 보안에 취약한 쿠키를 보완해주는 역할을 하고 있음

세션의 동작방식

1. 클라이언트가 서버에 접속 시 세션ID를 발급받음
2. 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있음
3. 클라이언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 서버에 전달해서 사용
4. 서버는 세션 ID를 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라이언트 정보를 가져옴
5. 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답

세션 사용하기

const express = require('express')
const session = require('express-session')
const cookieParser = require('cookie-parser');
const app = express();
const PORT = 8000;

app.use(cookieParser());
app.use(session({
  //세션 옵션설정
    secret:'newJeans',
    secure : false,
    resave: false,
    saveUninitialized : true,
    cookie:{
        httpOnly:false,
        maxAge: 60*60*24,
    }
}));

app.get('/', (req, res)=>{
    //세션설정 req.session.키
    req.session.name = '홍길동'
    res.send("세션 설정 완료")

})
app.get('/name', (req,res)=>{
    res.send({id:req.sessionID, name: req.session.name})
})
app.get('/destroy', (req, res)=>{
    req.session.destroy((err)=>{
        return;
    })
    res.redirect('/name')
    //개인정보 페이지에서 세션정보를 지우고 나가야되는데 그 페이지가
    //계속유지되면 문제가 됨   
})

app.listen(PORT, ()=>{
    console.log(`http://localhost:${PORT}`)
})

/	/name

세션 옵션

1. httpOnly : 값을 true로 하면 사용자가 자바스크립트를 통해서 세션을 사용할 수 없도록 강제
2. secure : 값을 true로 하면 https에서만 세션을 주고 받음
3. secret : 안전하게 쿠키를 전송하기 위한 쿠키 서명 값
   -> 세션을 발급받을 때 사용되는 키(무조건 들어가는 값)
4. resave : 세션에 수정사항이 생기지 않더라도 매 요청(req)마다 세션에 저장할 것인지, 세션에 항상 저장할건지 지정하는 값(보통 false로 설정함)
5. saveUninitialized : 세션에 저장할 내역이 없더라도 처음부터 세션을 생성할지 설정

세션연습

메인화면, 로그인화면

로그인을 하면 메인화면이 로그인 한 사람의 name값과 로그아웃 버튼으로 바뀜

세션을 삭제하고 확인 버튼을 누른 뒤 홈화면을 새로고침하면 다시 원래 로그인 버튼이 생긴걸 볼 수 있음

1. index.js
   세션 사용하기 위한 옵션값 설정

2. controller/Cindex.js

(member는 변수명이라 맘대로 설정하면됨)
(result[0]은 로그인을 했을 때 axios에 data에 담겨서 오는 정보임, 배열로와서 [0]붙여준거임)

req.session.member에 result[0]값을 저장

3. index.js
   

• res.local을 사용하면 지역변수를 전역변수처럼 사용할 수 있게 해줌
• 처음화면이 열렸을 때는 user_id, name 변수에 값이 안 들어가 있어서 오류가 나기 때문에 빈 값을 넣어주었음
• 조건문을 사용해서 req.session.member에 값이 있으면(true) user_id와 name에 컨트롤러에서 저장해줬던 변수(req.session.member)값을 저장함

4. index.ejs (메인화면)
   
   ejs문법과 조건문을 사용해서 user_id가 있으면 name과 로그아웃 버튼을 보여줌
   user_id가 없으면 로그인 버튼을 보여줌