데이터베이스의 본질
데이터베이스의 데이터를 어떻게 입력하고 어떻게 출력하는지를 파악해야 한다
입력은 세가지의 작업으로 쪼갤 수 있다 Create Update Delete
출력은 Read
이 4가지 작업을 CRUD라고 부른다
file vs database
파일에 비해 스프레드시트는 구조적으로 데이터를 저장한다
정리정돈을 하니까 데이터를 가공하는 것이 훨씬 쉬워진다
전문적인 데이터베이스는 사람이 일일이 작성하지 않고도 어떤 조건에 따라 자동적으로 CRUD를 할 수 있는 기능이 있다
API와 CreateServer
API = Application Programming Interface
pm2 보충학습
pm2 kill pm2의 모든 프로세스를 종료
pm2 start main.js --watch --no-daemon 로그까지도 잘 보임
pm2 start main.js --watch --ignore-watch="data/*" --no-daemon 파일변경시 재시작하지 않음
입력정보에 대한 보안
폴더 내에 password.js 라는 파일을 만들고
module.exports = {
id:'specialist',
password:'quickwork'
}이런식으로 해주고 저장해준다
그리고 url에 localhost:3000/?id=../password.js 를 검색하면
위의 아이디와 패스워드가 그대로 노출되게 된다
../password.js이라는것은 data의 부모디렉토리의 password.js 를 가져와라 라는 뜻이 된다
... 이런식으로 부모디렉토리로 계속 올라가면 우리 컴퓨터를 탐색할 수 있게 된다
이렇기에 보안이 중요하다
var path = require('path');모듈을 불러와주고
var filteredId = path.parse(queryData.id).base;
fs.readFile(`data/${filteredId}`, 'utf8', function(err, description)filtereId 를 만들어주고 아래에도 경로부분에 queryData.id를 filteredId로 치환해준다
아래 나머지 readFile들도 다 수정해준다
출력정보에 대한 보안
localhost:3000으로 들어가서 create를 한다
제목은 XSS
내용은
<script>
alert('merong');
</script>이렇게 작성해준다
그렇게 하고 제출을 하면 경고창이 뜨며 merong하는것을 알 수 있다
XSS를 클릭할때마다 이제 경고창으로 merong이 뜨게된다
XSS 본문을 수정해보자
<script>
location.href = 'https://opentutorials.org/course/1';
</script>이렇게 하면 XSS를 누를때마다 생활코딩 홈페이지로 들어가짐을 알 수 있다
이것을 홈페이지로 안들어가고 그냥 출력은 어떻게 하냐면
data폴더 내의 XSS를 수정하면 된다 <> 이것을 <, >로 치환해주면 된다
npm sanitize를 이용해보자
cmd로
npm init을 쳐보자
그냥 엔터를 쭉 눌러준다
npm install -S sanitize-html 를 치고 엔터를 눌러준다
-g는 글로벌로 어디서나 쓸 수 있지만
-S는 해당 프로젝트만 사용할 수 있다
var sanitizeHtml = require('sanitize-html');main,js 에 모듈을 불러오고
fs.readdir('./data', function(error, filelist){
var filteredId = path.parse(queryData.id).base;
fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
var title = queryData.id;
var sanitizedTitle = sanitizeHtml(title);
var sanitizedDescription = sanitizeHtml(description);
var list = template.list(filelist);
var html = template.Html(sanitizedTitle, list,
`<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
`<a href="/create">create</a>
<a href="/update?id=${sanitizedTitle}">update</a>
<form action="delete_process" method="post">
<input type="hidden" name="id" value="${sanitizedTitle}">
<input type="submit" value="delete">
</form>`
);
response.writeHead(200);
response.end(html);
});
});sanitized를 이용해서 변수들을 clean하게 만들어주고 바뀐 변수들을 치환해준다
이제 웹에서 <script>를 이용하면 그것이 제외되고 나오는 것을 볼 수 있다
만약 h1태그를 허용하고 싶다면
var sanitizedDescription = sanitizeHtml(description, {
allowedTags:['h1']
});allowedTag 라는 옵션을 이용해서 허용하고싶은 태그들을 작성하면 된다
모듈의 활용
모듈은 module.exports를 이용해서 require로 불러오게 된다
lib 폴더를 만들어주고 그 안에 template.js 파일을 만들어서 main.js안에 있는 template을 옮겨준다
var template = {
Html:function(title, list, body, control){
return `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${list}
${control}
${body}
</body>
</html>
`;
}, list:function(filelist){
var list = '<ul>';
var i = 0;
while(i < filelist.length){
list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
i = i + 1;
}
list = list+'</ul>';
return list;
}
}
module.exports = template;이것을 좀더 바꿀 수 있다
module.exports = {
Html:function(title, list, body, control){
return `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${list}
${control}
${body}
</body>
</html>
`;
}, list:function(filelist){
var list = '<ul>';
var i = 0;
while(i < filelist.length){
list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
i = i + 1;
}
list = list+'</ul>';
return list;
}
}
module.exports = template;이제 main.js에서 require을 해주어야 한다
var template = require('./lib/template.js');
모듈을 이용해서 더 간결하게 코드를 작성할 수 있게 되었다