[ NodeJS 기본 ] 파일 입출력 구현과 보안

  아래는 사용자 입력에 대한 출력 및 수정 삭제를 구현한 코드입니다. 홈에서는 쓰여진 글의 목록을 출력 및 글쓰기 화면으로의 접근, 쓰여진 글 보기 등 을 가능하게 했으며, 각 글에 접근해 수정 혹은 삭제가 가능도록 하였습니다.

 

let http = require("http");
let fs = require("fs");
let URL = require("url");
let qs = require("querystring");
let path = require("path");
let sanitizeHtml = require("sanitize-html");
let tp = require("./lib/template.js");

let app = http
  .createServer((req, res) => {
    let parse = URL.parse(req.url, true);
    let pathname = parse.pathname;
    let query = parse.query;
    let filteredTitle;

    if (query.title) filteredTitle = path.parse(query.title).base;

    if (pathname === "/") {
      fs.readdir(__dirname + "/data", (err, files) => {
        navigate(res, err, tp.home(files));
      });
    } else if (pathname === "/article") {
      fs.readFile(
        __dirname + `/data/${filteredTitle}`,
        "utf-8",
        (err, data) => {
          console.log(data, query.title);
          navigate(
            res,
            err,
            tp.article(sanitizeHtml(query.title), sanitizeHtml(data))
          );
        }
      );
    } else if (pathname === "/update") {
      fs.readFile(
        __dirname + `/data/${filteredTitle}`,
        "utf-8",
        (err, data) => {
          navigate(
            res,
            err,
            tp.update(sanitizeHtml(query.title), sanitizeHtml(data))
          );
        }
      );
    } else if (pathname === "/src") {
      fs.readFile(__dirname + `/src/${filteredTitle}`, "utf-8", (err, data) => {
        navigate(res, err, data);
      });
    } else if (pathname === "/process_write") {
      let body = "";

      req.on("data", (data) => {
        body += data;
      });

      req.on("end", () => {
        let post = qs.parse(body);

        fs.writeFile(
          __dirname + `/data/${post.title}`,
          post.description,
          (err) => {
            redir(res, err, "/");
          }
        );
      });
    } else if (pathname === "/process_delete") {
      fs.unlink(__dirname + `/data/${filteredTitle}`, (err) => {
        redir(res, err, "/");
      });
    } else if (pathname === "/process_update") {
      let body = "";

      req.on("data", (data) => {
        body += data;
      });

      req.on("end", () => {
        let post = qs.parse(body);

        fs.rename(
          __dirname + `/data/${filteredTitle}`,
          __dirname + `/data/${post.title}`,
          (err) => {
            fs.writeFile(
              __dirname + `/data/${post.title}`,
              post.description,
              (err) => {
                redir(res, err, "/");
              }
            );
          }
        );
      });
    } else {
      res.writeHead(404);
      res.end("404 not found");
      return;
    }
  })
  .listen(5000);

let navigate = function (res, err, callback) {
  if (err) {
    res.writeHead(404);
    res.end("404 not found");
  } else {
    res.writeHead(200);
    res.end(callback);
  }
  return;
};

let redir = function (res, err, location) {
  if (err) {
    res.writeHead(404);
    res.end(`ERROR : ${err}`);
  } else {
    res.writeHead(302, { Location: location });
    res.end();
  }
  return;
};

 

1. navigate

  각 페이지로의 이동은 request요청의 url의 path를 통해 이루어집니다. 

 

if (pathname === "/") {
      fs.readdir(__dirname + "/data", (err, files) => {
        navigate(res, err, tp.home(files));
      });
    }

 

  홈의 경우 data디렉토리의 파일들을 읽어 각 데이터 목록을 출력합니다. 

 

else if (pathname === "/article") {
      fs.readFile(
        __dirname + `/data/${filteredTitle}`,
        "utf-8",
        (err, data) => {
          navigate(
            res,
            err,
            tp.article(sanitizeHtml(query.title), sanitizeHtml(data))
          );
        }
      );
    }

 

  각 글에대한 접근의 경우 url의 path와 query string을 읽어 동작 방식과 읽어올 글을 특정합니다. query string으로 얻은 제목을 통해 해당 글을 읽어 본문 내용을 얻은 뒤 이를 미리 정의해 둔 템플릿을 이용해 출력합니다.

 

else if (pathname === "/update") {
      fs.readFile(
        __dirname + `/data/${filteredTitle}`,
        "utf-8",
        (err, data) => {
          navigate(
            res,
            err,
            tp.update(sanitizeHtml(query.title), sanitizeHtml(data))
          );
        }
      );
    }

 

  글 수정 또한 앞선 경우와 유사하게 작동합니다. path를 통해 동작 방식을 특정하고 query string을 통해 수정할 데이터에 관련된 템플릿을 제공합니다.

 

2. src loading

 

else if (pathname === "/src") {
      fs.readFile(__dirname + `/src/${filteredTitle}`, "utf-8", (err, data) => {
        navigate(res, err, data);
      });
    }

 

  각 html 에서 사용되는 css, js의 경우 src 디렉토리에 정리한 뒤 요청 주소를 '/src/title'로 주어 위와 같은 코드로 로드하도록 하였습니다. 

 

3. process

  앞서 navigate 부분에서는 form요소를 통해 글쓰기, 수정등을 위한 페이지를 구성합니다. 이번 process 부분에서는 각 요소로 입력받은 데이터를 http request에 query string 형식으로 전송하고, 페이지를 리디렉션하여 글쓰기, 수정, 삭제등의 연산을 수행합니다. 

 

else if (pathname === "/process_write") {
      let body = "";

      req.on("data", (data) => {
        body += data;
      });

      req.on("end", () => {
        let post = qs.parse(body);

        fs.writeFile(
          __dirname + `/data/${post.title}`,
          post.description,
          (err) => {
            redir(res, err, "/");
          }
        );
      });
    }

  글쓰기 페이지에서 입력받은 제목, 내용 등의 데이터는 form 요소를 통해  '/process_write'로 전송됩니다. 이때, 각 데이터는 http request body에 담겨 전달되며 key=value 쌍으로 구성됩니다. req.on은 이러한 데이터 chunk들이 전송될 때 마다 호출되며 위 코드에선 콜백함수로 해당 데이터 청크를 외부에 정의해둔 body 변수에 누산합니다. 이후 모든 데이터를 전송받았을 때 호출되는 이벤트인  'end'에서 누산 된 body를 파싱하여 객체로 만들고 입력받은 title과 description을 writeFile에 인자로 주어 글을 생성합니다.

 

else if (pathname === "/process_delete") {
      fs.unlink(__dirname + `/data/${filteredTitle}`, (err) => {
        redir(res, err, "/");
      });
    }

  글의 삭제는 fs모듈의 unlink를 이용해 이루어 집니다. 

  

else if (pathname === "/process_update") {
      let body = "";

      req.on("data", (data) => {
        body += data;
      });

      req.on("end", () => {
        let post = qs.parse(body);

        fs.rename(
          __dirname + `/data/${filteredTitle}`,
          __dirname + `/data/${post.title}`,
          (err) => {
            fs.writeFile(
              __dirname + `/data/${post.title}`,
              post.description,
              (err) => {
                redir(res, err, "/");
              }
            );
          }
        );
      });
    }

 

  글의 수정은 앞서 글쓰기와 거의 동일한 단계를 거쳐 이루어집니다. 다만, 글을 쓰기 전에 기존 글을 수정된 제목으로 rename한 뒤 writeFile을 적용합니다.

 

4. not found

 

else {
      res.writeHead(404);
      res.end("404 not found");
      return;
    }

 

  not found 페이지는 정의된 path를 제외한 경우 출력되는 페이지입니다. 404로 not found 상태를 전달합니다.

 

5. secure - path.parse, sanitizeHtml

 

  입출력 보안은 path모듈의 parse, sanitize-html 모듈의 sanitizeHtml 을 사용해 이루어집니다. 입력의 경우 ㅔpath 모듈의 parse 함수를 사용해 입력정보에서 ../과 같은 움직임을 제한하며 출력의 경우 sanitize-html을 통해 민감한 스크립트가 포함된 경우 이를 제거합니다.