joyoon

작성일 Edited on In Disqus:

목표

사용자로부터 서버로 어떠한 입력을 받을때에 발생할 수 있는 보안 위험을 방지하는 법을 알아보겠습니다.




> 상황 가정

입력에 의한 보안 위협이 어떤식으로 발생하는지 알아보기 위해 특정 상황을 가정해 설명해보겠습니다.



어떤 웹 애플리케이션 이 있습니다.

사용자로부터 파일 제목을 입력받으면 정해진 디렉토리 안에 있는 파일의 내용을 표시해주는 어떤 웹 애플리케이션.




directory_tree


이런 디렉토리 트리를 가지고 있구요.

security, data 디렉토리를 갖고있고, main.js 로 실행합니다.

이 어떤 웹 애플리케이션 은 사용자로부터 파일 제목을 입력받으면

data/ 디렉토리 안에 있는 파일의 내용을 표시해줍니다.



그런데 이 어떤 웹 애플리케이션 은 사용자 정보를 담은 중요한 파일도 갖고 있습니다.

security/users.txt

1
2
3
4
--- 사용자들의 ID/PW 가 담긴 파일 ---
Joyoon : 1q2w3e4r
Nodejs : passssword12
Javascript : hellojs!@

이렇게 security/ 디렉토리에 users.txt 파일의 형태로 사용자들의 ID/PW 가 저장되어 있다고 해봅시다.







enter title

더 읽어보기 »

작성일 Edited on In Disqus:

목표

강의 내용을 바탕으로 자바스크립트 객체에 기본적인 개념을 알고

이를 이용해 main.js 의 코드를 리팩토링(refactoring) 해보겠습니다.




JavaScript 의 객체

JavaScript 에서는 객체 를 사용할 수 있는데, 일단 배열과 유사하다고 생각하면 쉽습니다.

array.js

1
2
3
4
var array = ['item1', 'item2', 'item3'];
for(var i in array){
  console.log(array[i]);
}
더 읽어보기 »

작성일 Edited on In Disqus:

목표

_data 디렉토리에 생성된 글을 수정 및 삭제할 수 있도록 합니다.



> 수정 및 삭제 링크 만들기

생성 링크를 만들어보았으니 수정 및 삭제 링크도 같은 방법으로 만들 수 있습니다.

control 변수에 update 와 delete 링크를 추가하면 되는데, delete 링크의 경우에는 주의사항이 있으니 참고합니다.

먼저 update 부터 시작해보겠습니다.

> main.js

1
2
3
4
5
var control = `
...
<a href="/update?id=${title}">update</a>
...
`;

<a> 태그를 이용해 update 링크를 만들고, 원하는 특정 글을 수정해야 하므로 queryString 에 제목 ${title} 을 담아둡니다.

이러면 update 링크는 완성입니다. 이 링크에서 수정작업을 할 수 있는 코드를 추가하면 됩니다.




그런데 delete 는 이런 방식으로 삭제 링크를 만들면 안됩니다. update 링크와 마찬가지로 queryString 이 delete 에 적용된다면, 사용자가 http://localhost:4000/delete?id=${제목} 와 같이 url을 임의로 수정해 접속하는것만으로도 삭제 작업이 이루어질 수 있기 때문입니다.

때문에 delete 는 queryString 이 url에 노출되는 get 방식이 아닌 post 방식으로 id 값을 보이지않게 서버로 건네주기 위해 <form method="post"> 태그를 이용합니다.


> main.js

1
2
3
4
5
6
7
8
var control = `
...
<form action="/delete_process" method="post">
  <input type="hidden" name="id" value="${title}">
  <input type="submit" value="delete"
</form>
...
`;
더 읽어보기 »

작성일 Edited on In Disqus:

목표

사용자가 서버 내의 _data 디렉토리에 새 글을 생성할 수 있고

서버는 생성된 새 글을 페이지에 반영하도록 합니다.



> 글생성 UI 만들기

사용자가 글을 써 넣을 공간을 만듭니다.
form 태그를 이용합니다.

1
2
3
4
5
<form action="http://localhost:4000/create_process" method="post">
  <p><input type="text" name="title" placeholder="제목을 입력하세요"></p>
  <p><textarea name="본문을 입력하세요"></textarea></p>
  <input type="submit">
</form>

form 의 action 속성은 입력된 데이터를 action 속성의 주소로 보내는 역할을 하고, method="post" 는 post 방식으로 url에 노출없이 데이터를 보내겠다는 뜻입니다.

post의 반대되는 방식으론 get 방식이 있는데 따로 속성을 지정해주지 않으면 기본값으로 get 방식을 따릅니다.

서버를 향하는 정보가 url 에 노출되면 안되기 때문에 일반적으로 서버에 정보를 줄땐 post 방식을 사용합니다.
{: .notice–danger}
> 완성된 UI

html-form



더 읽어보기 »

작성일 Edited on In Disqus:

Node.js - sync, async, and callback

sync & async{: .align-center}

Synchronous

동기적 방식은 함수들의 실행이 항상 순서대로 진행됩니다.

A,B,C,D 각각 4개의 함수가 A-B-C-D 순서로 실행이 된다고 할 때,

B는 A 종료 후

C는 B 종료 후

D는 C 가 종료된 이후에 실행이 됩니다.



예를 들어,

sync.js

1
2
3
4
5
6
7
8
9
10
11
12
13
function A(){
  console.log('A');
}
function B(){
  console.log('B');
}
function C(){
  console.log('C');
}
function D(){
  console.log('D');
}
A(); B(); C(); D();

이 프로그램의 결과는

1
2
3
4
5
$ node sync.js
A
B
C
D
더 읽어보기 »

작성일 Edited on In Disqus:

Node.js 공부 시작

한번쯤 나만의 ‘서버’를 만들어 보고 싶단 생각을 갖고 있었는데, 늘 그에 대한 공부는 뒷전이었습니다.

미루고 미뤘던 Node.js 공부. 이제 시작해봅니다.



공부는 웹에 관해 공부를 시작하려는 사람들을 위한 아주 유용한 강의 사이트가 있는데, 바로 생활코딩 입니다.

저는 이곳의 Node.js 관련 강의를 듣고 정리해두려 하는데, 수업 내용이 굉장히 초심자를 위한 내용들로 이루어져 있어서 블로그에는 수업 모든 내용을 정리한다기보다 개인적으로 중요하다고 생각되는 부분만 찝어서 정리해두려 합니다.



> JavaScript 배경 지식

Node.js 는 JavaScript 로 이루어져있기 때문에 Node.js 스터디 관련 포스트 중간중간 필요한 JavaScript 관련 기초 지식도 함께 작성해두겠습니다.
{: .text-center}

Template literal

> template_literal.js

1
2
3
4
5
var name = 'Jo Yoon';
var sentence = 'Hi My name is ' + name + '.';
var sentence2 = `Hi My name is ${name}.`; // Template Literal
console.log(sentence);
console.log(sentence2);
더 읽어보기 »

작성일 Edited on In Disqus:

웹서버와 웹브라우저의 통신 원리

communication between webserver and web browser{: .align-center}

출처: 생활코딩 - 웹서버 운영
{: .text-right}


웹브라우저는 IP 주소를 통해 웹서버의 저장공간에 있는 index.html 을 달라고 요청(request)한다. 웹서버는 요청받은 파일 index.html 을 보내줌(response)으로써 웹브라우저에서 index.html을 볼 수 있게 되는것이다.

> 127.0.0.1 "localhost"

about localhost{: .align-center}

출처: 생활코딩 - 웹서버 운영
{: .text-right}


ip 주소 127.0.0.1 이란 해당 웹브라우저가 있는 자기 자신을 향하는 주소이다. 전세계 어느 컴퓨터에서든지 ip 주소 127.0.0.1 은 자기 자신을 향하는 주소를 의미한다.

더 읽어보기 »

작성일 Edited on In Disqus:

HTML 문서 기본 구조

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
  <head>
    <!--- 해당 html 페이지를 설명함 --->
    <title></title>
    <meta>
  </head>
  <body>
    <!--- 본문 --->
  </body>
</html>



> 배운 태그 정리 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<a href="link_path" target="_blank" title="title_name">Hello</a>
<!--- <a> Tag.
속성으로 'href'(hypertext reference) 를 반드시 갖는다.
새 창 띄우고 싶을땐 target="_blank" 속성 추가. --->
<ul>
  <li>item1</li>
  <li>item2</li>
</ul>
<ol>
  <li>item1</li>
  <li>item2</li>
</ol>
<!-- <ul>, <ol>, <li> Tag.
<ul> : unordered list
<ol> : ordered list
<li> : 반드시 <ul> 이나 <ol> 을 부모태그로 갖는다. --->



더 읽어보기 »

작성일 Edited on In Disqus:

코딩야학 5기를 신청해 수강중이다. 원래 일정은 1월 3일부터 시작이지만, 사실 날짜에 크게 구애받는 수업은 아니어서 바로 시작했다.

코딩야학의 코딩수업을 신청하면 진도표에 자기가 공부한 만큼 진도를 체크할 수 있게 되는데, 하루에 한 강의에 10분 정도 되는 영상을 3~4개 수강하도록 진도가 짜여져있다.

1일차에 30분 정도 투자하는 셈인데, 첫 부분은 30분만 듣자니 감질만 나고 아쉬워서 3일차 진도까지 수강했다.



코딩야학 코딩수업의 내용은 HTML 기초이다. 이미 학교에서 수강했던 내용들이라 너무 쉽게만 느껴졌지만, 생활코딩의 node.js 내용을 들으려는 사람들은 HTML 수업을 선수강 하기를 권장해 복습할 겸 수강하기로 결정했다.



앞으로 수업 내용을 블로그에 정리해두려 한다.

> HTML 태그(Tag) 
1
<tag_name></tag_name>

여는 태그와 닫는 태그로 이루어진다. (<br>과 같은 예외도 있음)



> 의미에 맞는 태그 사용 
1
<span style="font-size:22px">`Title`</span>

VS

더 읽어보기 »