Cooie는 사용자의 정보가 웹 서버를 통해 사용자의 컴퓨터에 직접 저장되는 정보의 단위를 말합니다. 예를 들어 사이트에 접속을 했는데 "아이디와 비밀번호를 저장하시겠습니까?라는 창이 뜨면 사용자의 아이디와 비밀번호를 쿠키로 저장한다는 뜻입니다.
쿠키는 브라우저에서 임의로 바꿀 수 있습니다. 만약 아이디와 패스워드 같은 중요한 정보가 쿠키로 저장했다면 보안에 큰 문제가 있을 겁니다. 이러한 문제점을 해결하기 위해서 나온것이 Session입니다.
Session이란?
세션은 쿠키보다 더 안전하고 많은 데이터를 저장하는 저장 방식입니다. 쿠키의 경우 데이터를 사용자의 컴퓨터에 저장하기 때문에 비밀번호 같은 민감한 부분이라도 예외없이 그대로 드러납니다. 하지만 세션은 데이터를 서버에 저장하기 때문에 쿠키보다 안전하다고 볼 수 있습니다.
Session Store >> ( Express Session )
세션 스토어는 세션이 데이터를 저장하는 곳을 말합니다. 대표적으로 Memory Store, File Store, Mongo Store가 있습니다.
default값은 Memory Store입니다. 메모리는 서버나 클라이언트를 껏다 키면 사라지는 휘발성입니다. 이번에는 데이터를 파일로 저장하는 File Store를 사용하겠습니다. 파일 스토어 역시 모듈이기 때문에 npm에 설치를 해야 합니다.
또한 서버에서 세션에 접근을 하려면 req.session을 이용하면 됩니다.
/cookie.js
/* cookie/cookie.js */
const express = require("express");
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
const session = require("express-session");
const FileStore = require("session-file-store")(session);
const path = require("path");
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser("COOKIE-SECRET"));
app.use(
session({
secret: "COOKIE-SECRET",
resave: false,
saveUninitialized: true,
store: new FileStore(),
})
);
app.use(
"/css",
express.static(path.resolve(__dirname, "./css"))
);
app.set("view engine", "ejs");
app.set("views", "views");
app.set("PORT", 3000);
let user = {
user_id: "heart2002101",
user_pwd: "gustj486!!",
};
app.get("/", (req, res) => {
console.log(req.session.user_id);
if (req.session.logined) {
res.render("logout", { id: req.session.user_id });
} else {
res.render("login");
}
});
app.post("/", (req, res) => {
if (
req.body.id == user.user_id &&
req.body.pwd == user.user_pwd
) {
req.session.logined = true;
req.session.user_id = req.body.id;
res.render("logout", { id: req.session.user_id });
} else {
res.send(`<h1>Who are you?</h1> <a href="/">Back</a>`);
}
});
app.post("/logout", (req, res) => {
req.session.destroy();
res.redirect("/");
});
app.listen(app.get("PORT"), () => {
console.log(`*:: listening at ${app.get("PORT")}`);
});
/login.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../css/login.css" rel="stylesheet">
<title>Login</title>
</head>
<body>
<div id="FormContainer">
<h1>Login Please</h1>
<form action="/" method="POST">
<div class="formData">
<label for="id">Id</label>
<input id="id" name="id" type="text" placeholder="ID">
</div>
<div class="formData">
<label for="pwd">Password</label>
<input id="pwd" name="pwd" type="password" placeholder="Password">
</div>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
/logout.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logout</title>
</head>
<body>
<h1>Hello! <%= id %></h1>
<form action="/logout" method="POST">
<button type="submit">Logout</button>
</form>
</body>
</html>
로그인 페이지에서 미리 저장해 논 id인 heart2002101와 password는 gustj486!!을 치게 되서 session으로 logined와 user_id를 넣어주게 되면 다음과 같은 화면을 보여주게 됩니다.
다음과 같이 session의 id가 암호화 되어서 저장되게 됩니다.
express는 미들웨어에서 이 id를 통해 File store에서 값을 찾아서 띄워주게 됩니다.
'School > Security' 카테고리의 다른 글
[ Web Hacking ] - Cookie & Session (0) | 2022.05.26 |
---|---|
[ Web Hacking ] - W31c0m3, w3b h4ck3rs! (0) | 2022.05.25 |
[ Security ] 비밀번호 단방향 암호화 (0) | 2022.05.23 |
[ Basic Security ] - Ubuntu in Server (0) | 2022.05.15 |
[Basic Security ] - Linux basic (0) | 2022.05.10 |