인프런 커뮤니티 질문&답변

강사님 안녕하세요

질문드리기 전에, http 쿠키와 세션 강의를 먼저 복습했습니다

 

아래처럼 정리했습니다

서버측에서 클라이언트를 구분하기 위해 보내는 게 쿠키

쿠키의 중요한 정보를 클라이언트의 브라우저로 보내면 보안위험이 있고

그래서 쿠키의 중요한 정보는 서버에서 갖고, 클라이언트에게 안보내서,

브라우저에서는 중요정보는 못알아내도록 서버에서 관리하는 게 세션

예를 들면 4장의 session.js에서는 쿠키의 name 대신, 현재 시간을 보낸다

라고 복습하고 http 세션 코드도 복습했습니다

 

그리고나서 cookie2.js를 익스프레스 코드로 변환시킨 코드를
이번에는 session을 이용한 코드로 변경해보려고 했습니다

 const express = require('express');
 const path = require('path');
 const { nextTick, rawListeners } = require('process');
 const morgan = require('morgan');
 const cookieParser = require('cookie-parser');
 const bodyParser = require('body-parser');
 const session = require('express-session');
const { connect } = require('http2');
 
 const app = express();

 app.set('port', process.env.PORT || 3000); //'port' 라는 속성에 포트번호 3000번을 설정합니다.
 //서버의 포트를 3000번으로 지정합니다.
 
app.use(morgan('dev'));

 //app.use(morgan('dev'));
 //쿠키를 객체화 시킵니다.
 app.use(cookieParser('zerochopassword'));
//cookieparser를 사용하기 위해


//app.use('/',express.static(__dirname, 'kkk'))
app.use(express.static(path.join(__dirname, 'kkk')))

 app.use(express.json());
 app.use(express.urlencoded({extended: true}));
//post요청에 의한 req.body를 사용하기 위해서

console.log(path.join(__dirname, 'kkk'))

 //login 경로의 경우입니다.
 app.get('/login', (req, res, next) => { 
   req.cookies // 쿠키 객체화  
 
  const expires = new Date();
  expires.setMinutes(expires.getMinutes() + 5);
   res.cookie('name', encodeURIComponent(req.query.name),{
     expires: expires,
     httpOnly: true,  
     path: '/',
   })

  //  app.use(session({
  //   name: 'connect.sid',
  //   resave: false,
  //   saveUninitialized: false, 
  //   secret: 'zerochopassword',
  //   cookie:{
  //     expires: expires,
  //     httpOnly: true,
  //     path: '/',
  //   }, 
  // }));

  //  req.session.id = req.query.name;
   res.redirect('/');
});
 
app.get('/', (req,res)=>{
  console.log("req.url "+req.url);
  if(req.cookies.name)//name이라는 쿠키가 있는 경우입니다.
  {
   //res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
   res.send(`${req.cookies.name}님 안녕하세요`);//쿠키에 넣은 이름이 웹페이지에 출력됩니다
  }
  else{ //로그인도 아니고, 쿠키도 없는 경우입니다.
    //next(createError(404));
   try {
    // console.log("진입");
    //res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
    //익스프레스에서는 writeHead를 쓰면 안된다 에러가 생긴다
    //res.send( ) 할 때 이미 자동으로 res.status().send() 이런 식으로 헤더를 설정해준다
   
    //res.sendFile(path.join(__dirname, '/cookie2.html'));//cookie2.html 파일을 클라이언트에게 보내준다
    //console.log(err.status)
    console.log("진입");
    res.setHeader('Content-Type', 'text/html');
    //익스프레스에서는 writeHead를 쓰면 에러가 생긴다 그러므로 setHeader를 써라
    res.sendFile(path.join(__dirname, 'cookie2.html')); //cookie2.html 파일을 클라이언트에게 보내준다
    } catch (err) {
    //  res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
    //  res.end(err.message);
    next(err); //콜백함수에 err 라는 인자가 있는 app.use로 이동한다
  }
 }
});

// app.get('/:id',(req,res)=>{
//   console.log("req.url "+req.url);
//   console.log("req.params.id "+req.params.id);
  
//   res.send(`Hello ${req.params.id}`);
// })

//아래는 에러처리입니다.
app.use((req,res,next)=>{ // 찾는 경로가 없으면 get을 다 지나서 use로 온다
  console.log("req.url "+req.url);
  next(createError(404)); //찾는 경로가 없으면 404처리
})

 app.use((err,req,res,next)=>{  //   /favicon.ico도 여기로 간다   에러도 여기로 간다
  console.log("req.url "+req.url);
  console.log(res.locals.message);
  res.locals.message = err.message;
  res.locals.error = req.app.get(`env`) === `development` ? err:{};
  console.log(err.status)
  res.status(err.status ||500).send(err.message);
 });
 
 app.listen(3000, () => {
   console.log(app.get('port'), '번 포트에서 서버 대기 중입니다!');
 });

 

 

저는 아래처럼 변경해봤습니다

 

공식문서도 참고했습니다

프로덕션 환경의 Express를 위한 보안 우수 사례 (expressjs.com)

 

 

 

그런데 로그인을 하면 세션이 안생겨서 혹시 제가 잘못 알고있는 부분을 가르쳐주시면 감사하겠습니다

 

+

그리고 63행과 66행에서 req.cookies.name을 req.session.id로 변경해도 에러가 해결이 안되더라구요