05. 실습 2 - 페이지와 연결 (post)

앞서 말했던 get 방식의 보안 취약점을 해결하는 post 방식 정보전달이다.

 

get 방식의 경우 url 에 정보를 담아서 전달하고

 

post 방식의 경우 패킷의 body에 정보를 담아서 전달한다고 하는데

 

일단은 그런갑다 하고 넘어가자  (사실 저도 잘모름) 

 

마치 총의 원리는 정확히 몰라도 방아쇠를 누르면 나가는것처럼

 

---

 

앞서 했던 파일을 그대로 복사해서 이름만 ex02 로 바꿔서 가져와보겠다. 

 

 

ex02.js 의 경우 ex01.js 에서 가져온 파일을 다음과 같이 지워준다. 

ex02.html 은 그대로 ex02.html 로 이름만 바꿈 

 

서버를 실행을 하고 html 을 라이브서버로 실행 후 제출을 눌러서 연결에 이상이 있는지 확인한다.

 

참고로 파일이름을 바꿨으므로 터미널에서 명령어는 

 

nodemon ex02.js 

 

이다.

 

 

다음과 같이 표시되면 잘 연결 된 것으로 알 수 있다.

 

 

7 줄 : qs 라는 변수에 querystring 모듈을 불러와서 저장

 

17 줄 : 요청 즉 사용자에게 받은 정보를 새로 만든  body 변수에 저장 

+= 를 사용한이유는 요청 받아오는 데이터가 계속 누적 될 수 있도록 하기 위해서

 

22 줄 : 요청을 다 받았을때 body 의 값을 parse 를 통해 사람이 읽기 쉽도록 변환 하는 과정 

이 과정을 통해서 입력받은 정보가 객체 형태로 나오게된다.

 

 

11 줄:  post 방식으로 하겠다는 의미인 method = 'post' 를 입력

(적지 않으면 기본값인 get 방식) 

 

위와같이 파일들을 작성하고 저장 후 실행하면 

 

 

오른쪽 주소를 보면  이전의 get 방식과 다르게 

localhost:3000 까지만 표기되며  사용자가 입력한 값을 알 수 가 없게된다.

 

터미널의 값은 서버에 정보가 왔는지 알 수 있도록 console.log(post) 를 한 결과이다.

 

---

 

그렇다면 이전에 한 것처럼 

 

~~ 님 환영합니다. 라고 표기 해보도록 하자 .

 

그 전에 한가지 확인 할 것이 있다.

 

1번의 위치는 request.on 의 안에 post

2번의 위치는 request.on 의 밖에 post  이다.

 

 

실행하게되면

1번위치에서 사용자 값을 가지며

2번은 비어있는 값을 가지게 된다.

 

다시말하자면 request.on 밖으로 나오게 되면 post 값을 가지고 나올 수 없다 .

따라서  ~~ 님 환영합니다 라고 하기위해선 안에서 response 해야 된다. 

 

26, 27은 앞선 예제 ex01.js 에서 복사해서

${} 안의 값만 post.id 로 변경해주었다.

 

30 줄 : 응답에 대한 종료를 알리기 위해서  response.end() 가 request.on  안으로 들어와야 한다.

 

 

html 문서를 라이브서버로 실행 후 다음과 같이 작성하면

 

다음과 같이 표기되며 주소창에선 어떤한 정보도 알 수 없게 된다.

 

즉 , get 방식에선 나타나던 정보가 post 방식에선 나타지 않게 되어 보안상 더 안전하게 된다.

 

1. html 의 form method = 'post'  로 변경

2. js 의  const qs = require('querystring') 모듈 불러오기

3. request.on('data', function(data) ~~ 를 이용 body 에 내용 저장

4. request.on('end', function(){ 에서 qs.parse 를 이용하여 변환 후 사용가능