웹 - 2

  1. 2015.03.02 자바스크립트를 통한 팝업창에서 부모창으로 데이터 주고받기
  2. 2011.01.27 웹해킹을 하기전에 알아야하는 기초! HTTP 프로토콜 (2)


최근 들어 자바스크립트와 제이쿼리를 사용을 요구하는 일이 처음부터 제대로 공부를 필요로 할 정도로(약간 짜증날 정도로...ㅎ..) 많아졌습니다. 백엔드에 주력을 함으로 HTML과 CSS에만 집중을 하고 그 외의 언어는 별로 공부를 하지 못 했었는데 Node.js 도 손을 건들어보면서 최근 관심을 가지기 시작했습니다.

그리고 무엇보다 자바스크립트가 언어의 최고봉으로서 자리를 만들어가고 있는 순간 공부하지 않으면 안되겠다 싶어 공부를 시작했습니다. 그리고 부모창과 팝업창 간의 데이터를 주고 받는 놈을 만들다가 자바스크립트를 사용했는데 애먹은 부분이 있었습니다.

일단 제 경우는 팝업창에서 부모창으로 데이터를 전달해줄 때 기본적으로 엘리먼트의 name, id을 중복 사용을 필요로 하는 방식의 PHP 환경이였습니다. (PHP-MySQL-mysql_fetch_array) 그러나 id 값은 중복으로 사용이 불가능하다는 점이 문제이기에 name 방식을 통해 배열값을 주고 받으려다가 모든 name이 값을 가지고 있다는 점 때문에 어떻게 해야할지 의문이였습니다.

더 찾아보다가 그냥 간단하게 인자를 전달해주는 방식으로 꼼수를 사용했습니다.
소스는 다음과 같습니다.

------------------------------------------------
-- test1.html ((부모))
<script>
var winObject = null;

(1)function popupWindow(){
var settings = 'toolbar=0,directories=0,status=no,menubar=0,scrollbars=yes,resizable=no,height=500,width=1000,left=0,top=0';
(1)winObject = window.open("test2.html", "test2", settings);
}

</script>


(2)<input type='text' id='charge' style='width:70px;' value='이름'/>

(1)<input type="button" value="조회" onclick="popupWindow();"/>

------------------------------------------------

-- test2.html ((자식))

<script>

(3)function submitCharge(val1){

(4)window.opener.document.getElementById("charge").value = val1;

(5)self.close();

}

</script>


(PHP 코드 부분은 간단하게 바꿔보았습니다)

$query = ...;

$result = ...;


while($row = mysql_fetch_array($result)){

echo "<input type='text' name='i_charge' value='$row[name]'/>

(6)<input type='button' value='선택' onclick='submitCharge('$row[name]');' />";

}

------------------------------------------------


(1). 부모에서 popupWindow() 함수를 통해 간단하게 팝업창을 열어주고 부모와 자식 관계를 만들어줍니다.

(2). 자식에서 데이터를 부모로 넘겨주면 작성이 되어질 부분을 만들어놓습니다.


(3). submitCharge() 라는 함수를 만들어놓고 인자를 하나 받아옵니다.

(4). 받아오는 인자는 부모에서 'charge' 라는 id 값을 가지고 있는 엘리먼트에 값을 전송합니다.

(5). 과정이 끝나고 자식창을 직접 셀프 종료합니다.

(6). 함수를 호출하며 인자로 해당 값을 보내줍니다.


위의 과정을 통해 자바스크립트를 이용해 배열도 작성이 되어 있는 부분에서 해당 값을 자식에서 부모로 전달해줍니다.

응용을 하면 마찬가지로 부모에서 자식으로 데이터를 전달해주는 부분도 쉽게 개발이 가능합니다.





window.opener.document.getElementById("charge").value 이 부분에서 혹여나 name 에 해당하는 값을 불러오고 싶으시다면

window.opener.document.getElementsByName("charge").value 왼쪽과 같이 사용하시면 됩니다!


이 부분에서 저만 애를 먹은건지, 다른 분들도 애를 먹으셨던건지...더 좋은 방법이 있으면 공유해주시면 감사하겠습니다!


js, jquery 'opener' 관련 함수 - http://wendy81.tistory.com/160

html 'id', 'name' 관련 내용 - http://lucetedaniel.tistory.com/69


열공 :)

2015.03.02 23:06. RSS feed. Trackback 0 came from other blogs. Leave a Response.
Posted in 스터디/javascript. Top

댓글을 달아 주세요


안녕하세요! 완소풉 입니다. 몇 일까지 언어를 배우고 이제 보안공부에 다시 몸을 던지게 되었습니다.
그래서 이 Network / Web 게시판에서는 웹해킹에선 빠져서는 안되는 기초를 알려드릴 생각입니다. 물론 제가 가지고 있는
서적을 참고하였으며 파로스에 관한 내용까지 담을 예정 입니다.

 HTTP 프로토콜이란, Hyper Text Transfer Protocol은 TCP 기반으로 WWW(World Wide Web)에 접속하기 위해 사용되는
통신수단이며 오늘날 웹에 적용되어 현재까지 사용되고 있습니다.

그리고 HTTP 프로토콜에서 사용되는 TCP 는 다른 것들과 차이가 있습니다. HTTP 에서는 State-Less 방식이라고 정보를
전달한 후 바로 끊켜버립니다. 그래서 이런 점을 보완하기 위해 로그인 같은것들을 인증하기 위해 사용자 정보를 임시의 값으로
저장해주는 쿠키가 있습니다. 쿠키는 클라이언트에 저장이 됩니다.

웹 브라우저는 사용자 IP 를 웹 서버에 전달하면 TCP 세션(웹서버) 연결이 시작됩니다. 일단 세션이 연결되면
HTTP Request Header와 Body에 주소와 데이터를 포함하여 웹서버에 전달합니다. 그리고 웹서버가 이를 받은 후 이상 없는지
확인하고 나면 HTTP Response Header, Body 에 문서를 만들어 사용자에게 전달합니다.

Request(요청) : 웹브라우저 -> 웹서버
Response(회신) : 웹서버 -> 웹브라우저



위 사진은 세션 연결 및 데이터 전송과정 순서를 나타낸 사진입니다. (꽤 오래전에 강의 쓸려고 다운받아놨는데
지금 와서 출처를 찾아볼려고 하니깐 모르겠습니다. 혹시나 출처를 아시는 분은 댓글 부탁드리겠습니다.)
번호 순서대로 설명하겠습니다.

아래 나오는 TCP 헤더의 컨트롤 비트는 아래 링크에 있는 글을 참고하세요!
2011/01/27 - [ 정보기술/  Network / Web] - [네트워크갤] TCP 헤더 (TCP Header)

① 웹 서버가 기본 80 포트를 열어놓고 대기 중 입니다.
② 사용자가 웹서버에 접속 요청을 합니다.
③ 사용자에게 SYN과 ACK 를 전송합니다.
④ 응답을 잘 받았는지 확인 후 확인메세지를 재전송합니다.

-----> 이제부터 웹 브라우저와 웹 서버가 데이터를 주고받습니다.

⑤ GET 메소드를 이용해 PUSH 옵션을 통해 기본페이지를 요청한다.
⑥ 사용자 요청 데이터에 이상이 없는지 점검하고 사용자에게 잘 받았다고 ACK를 전송한다.
⑦ PUSH 옵션을 통해 페이지를 사용자에게 전송한다.
⑧ 사용자 측에서도 데이터에 이상이 없는지 점검하고 웹서버에 ACK를 전송한다.


 
위 사진은 세션 연결 해제과정을 나타낸 사진 입니다. 아까 말씀드렸듯이 HTTP 는 State-Less 방식이라 데이터 전송을
완료하면 바로 연결이 끊어집니다.

① 사용자는 세션 종료 요청을 위해 FIN, ACK 를 전송한다.
(연결을 시도한자가 종료 요청까지 해야한다.)
② 세션 종료 요청을 프로그림, 웹 애플리케이션에 전송한다.
③ 웹 서버의 답변을 기다립니다.
④ 웹 서버는 종료 합의의 의미로 FIN, ACK 를 전송한다.
⑤ 혹시나 늦게 뒤떨어져 올 수 있는 데이터가 있을지 모르니 ACK 를 웹서버로 전송하기전에 대기한다.
⑥ 데이터 전송이 완료되면 자동으로 종료된다.

제가 정말 설명이 잘 되어있는 글이 있기에 퍼왔으나 혹시나 읽지 않으시는 분들을 위해... 귀찮지 않게 살짝 서술해드리겠습니다.
TCP 헤더에 메세지 상태를 알리든 컨트롤 비트 입니다.

URG - 긴급처리를 요청하는 BIT
ACK - 잘 받았다는 메세지 처리를 위한 BIT
PSH(PUSH) - 빠른 처리 요구를 위한 BIT
RTS - 강제 종료 BIT
SYN - TCP 세션을 시작하기 위한 BIT
FIN - 정상 종료 BIT


이만 오늘 강의를 마치겠습니다, 정작 중요한 HTTP Request, Response 에 대한 강의를 서술하지 못했습니다.
강의가 매우 길어질것 같아 그랬습니다, HTTP Request, Response 에 대한 내용은 2강에서 서술하겠습니다! ^^
2011.01.27 16:20. RSS feed. Trackback 0 came from other blogs. Leave a Response.
Posted in 스터디/server. Top

댓글을 달아 주세요

  1. 동글이

    지나가면서 들렸어요 웹해킹?하면서요
    잘.. 읽었습니다. 전혀 모르겠지만요 ㅋㅋ;
    세상엔 내가 모르는 지식들이 참 많네요ㅋㅋ

    2011.02.11 00:29 신고  ×  +
  2. Re. BlogIcon 완소풉

    그러게요,, ㅋㅋㅋㅋ
    댓글 감사합니다~!

    2011.02.11 12:13 신고  ×