<4D F736F F D20BAB8BEC8BCADB9F620BCD2BDBA20BCF6C1A420BBE7BFEBC0DA20B8DEB4BABEF32E646F63>

Size: px

Start display at page:

Download "<4D F736F F D20BAB8BEC8BCADB9F620BCD2BDBA20BCF6C1A420BBE7BFEBC0DA20B8DEB4BABEF32E646F63>"

우영 방
5 years ago
Views:

1 보안서버 (SSL) 소스수정매뉴얼 ( 사용자매뉴얼 ) 순서 1. 웹페이지수정방법및사례 (2P ~ 2P) 가. 전체페이지암호화하기 (2P ~ 4P) 나. 페이지별암호화하기 (4P ~ 6P) 다. 프레임별암호화하기 (6P ~ 15P) 2. 보안서버적용확인하기 (15P ~ 16P) 본사용자매뉴얼은정보보호진흥원에서보급된보안서버설치가이드를기준으로작성되었습니다. 1

2 웹페이지수정및적용확인하기 1. 웹페이지수정방법및사례 암호화통신을하기위해서보안프로토콜을호출하는방법은 OS 나 Program 언어를가리지않고모두동일합니다. 그이유는암호화통신을하기위해적용하는부분이특정 OS 나특정 Program 언어에의존하지않는, 모두가공통으로사용하는 HTML 언어이기때문입니다. 본절에서는암호화적용범위에따라웹페이지전체혹은일부를암호화하는방법과이용자가선별적으로암호화를선택하는방법을소개하겠습니다. 가. 전체페이지암호화하기 1 https 프로토콜호출하기 https 프로토콜을호출하여웹페이지전체에적용하는방법은그림만으로도곧바로이해를할수있을정도로아주쉽습니다. 간단히호출하는프로토콜을 에서 로수정해주기만하면됩니다. < 그림 1> 과 < 그림 2> 는암호화통신을하기위해 https 프로토콜을호출하기전과호출한후의 HTML 소스코드예입니다. < 그림 1> 평문통신을위한 HTML 소스코드 < 그림 2> https 프로토콜을호출하기위한 HTML 소스코드 2

3 2 리다이렉션 (Redirection) 설정앞서설명을하였듯이, 암호화통신을위해서는 https 프로토콜을직접호출을해줘야합니다. 하지만, 웹페이지에접속하는사용자들은일일이 https 프로토콜을붙여서입력을하지않습니다. 대부분의경우가 또는 test.co.kr 도메인을웹브라우저의주소창에입력하고접속하는경우가대부분일것입니다. 이때웹브라우저에그냥도메인주소만입력하면, 웹브라우저는해당도메인앞에 가붙은것으로판단하고평문통신을하도록합니다. 평문통신을하는경우라면문제가없지만, 암호화통신을해야할경우에는 를직접붙여서입력해야하므로여간불편해하지않습니다. 리다이렉션은현재접속한도메인이나혹은웹페이지를강제로다른주소나다른페이지로변경해줌으로써사용자들의불편함을감소시켜주고자연스럽게암호화통신을할수있도록해주는기능입니다. < 그림 3> 은아파치서버에서 Redirect 지시자를써서 또는 로들어온사용자를강제로 로리다이렉션시켜서암호화통신하는예입니다. < 그림 3> 아파치서버에서의 Redirection 또다른방법으로는 OS 나 Web Programming 언어의종류에상관없이모두공통적으로사용하는 HTML tag 를이용한방법으로써, 어떤경우에서나적용이가능하기때문에가장많이이용되고있습니다. < 그림 4> 은웹페이지의 index.html 에한줄의소스코드를추가함으로써 로접속하는사용자들을강제로 로리다이렉션하는예입니다. < 그림 4> HTML Tag 를이용한 Redirection 위와같이 Meta 태그를이용하는경우, 1 초정도깜빡하는현상이나타나기때문에종종 Javascript 를이용하기도합니다. 3

Meta tag 를이용한 html Redirection 방법과동일하게, 사용자들이익숙하게접속하는 http://www.test.com 의 index 페이지에삽입해두면, 사용자들이불편하게 https:// 라는프로토콜을특별히지정해주지않아도, 보안을위해서암호화통신이적용된 https:// www.test.com 으로리다이렉션해주게됩니다.

4 Meta tag 를이용한 html Redirection 방법과동일하게, 사용자들이익숙하게접속하는 의 index 페이지에삽입해두면, 사용자들이불편하게 라는프로토콜을특별히지정해주지않아도, 보안을위해서암호화통신이적용된 으로리다이렉션해주게됩니다. < 그림 5> Javascript 를이용한 Redirection 나. 페이지별암호화하기 페이지별암호화는현재위치하고있는페이지에서다른페이지로이동할때, 보안을위해서암호화된전송을할것인지아니면평문전송할것인지를선택하여암호화하는것을말합니다. 부분적인페이지암호화를사용하는이유는암호화적용이필요없는부분까지암호화를하여서버의부하를증가시키는것을최대한줄일수있기때문입니다. 다음 < 그림 6> 은사이트의메뉴부분예입니다. 이중 서버관련강좌 & TIP 메뉴를클릭하여이동을하면 https 가호출되어서버와클라이언트간의통신이암호화되어전송되고, Q&A 메뉴를클릭하여이동하면 http 가호출되어서버와클라이언트간의통신이평문으로이루어지게하는방법을알아보겠습니다. < 그림 6> 페이지별암호화대상메뉴 < 그림 7> 은위메뉴부분의소스코드입니다. 빨간색밑줄부분중첫번째밑줄에해당하는부분이현재위치에서메뉴를클릭하여이동을때암호화전송을하도록하게끔설정된것이고, 두번째밑줄은현재위치에서메뉴를클릭하여이동할때평문전송을하도록설정된것입니다. < 그림 7> 페이지별암호화대상메뉴의소스코드 4

5 이렇게페이지별로암호화가적용된사이트를방문해보면, < 그림 8> 과같은경고창을만나게되는경우가있습니다. < 그림 8> SSL 이적용된페이지의경고창 이경고창이뜨는것는암호화통신을유지하기위해서는웹페이지내의모든 URL 의호출이 로이루어져야하나, 즉평문통신을위한웹페이지 URL 이포함되어있다는것을의미합니다. 이런경고창이발생하는웹페이지속성을보면 < 그림 9> 처럼 암호화안됨 이라고해서마치암호화가되지않은평문상태로데이터가전송되어지는것처럼생각되지만웹페이지간전송되는데이터를볼수있는 third-parth 툴을이용해서확인해보면, < 그림 10> 와같이암호화통신이이루어지고있다는것을알수가있습니다. < 그림 9> http 평문통신주소가호출되는웹페이지의속성 < 그림 10> https 를통한암호화통신 5

6 < 그림 11> 는 < 그림 10> 의결과와비교하기위해서암호화되지않은평문통신 (http) 상태를나타낸그림입니다. < 그림 11> http 를통한평문통신 하지만 < 그림 8> 와같이경고창이발생하게되면, 상세한내용을모르고웹사이트에접속하는사용자들에게보안이되고있지않다는불신을줄수도있고, 또한계속적인경고창으로인해서불편해할수있으므로가급적발생하지않도록웹페이지내의모든 URL 을 로바꿔주는것이좋습니다. 만일절대경로로호출하는것이아니라, 상대경로로호출하는것이라면소스를변경하지않아도됩니다. 다. 프레임별암호화하기 SSL 을이용한보안포트 (443) 를웹페이지에적용하는방법을앞서소개하였습니다. 단순히 http 를 https 로만바꾸어주면보안포트를이용해서암호화통신을할수있었습니다. 하지만, 프레임이삽입된웹페이지의경우에는약간적용하는방식이다르기때문에소개하고자합니다. 프레임이적용된페이지를이용하면암호화된페이지와비암호화된페이지를각각적용시킬수있습니다. 적용시나리오는 < 그림 12> 과같이웹페이지 (index.html) 에프레임으로두개의페이지 topmenu.htm 과 main.htm 을불러오는소스코드가있을때소스코드의 URL 을 < 그림 13> 와 < 그림 14> 처럼변경하고웹브라우저에서 http 와 https 로각각호출했을때의결과를살펴보고자합니다. 6

7 < 그림 12> 프레임이포함된웹페이지 < 그림 13> topmenu.htm 을 https 로호출하기 7

8 < 그림 14> topmenu.htm 과 main.htm 을 https 로호출하기 1 비암호화통신 (http) 를이용해서호출하기 < 그림 15> 는 topmenu.htm과 main.htm을모두 < 그림 12> 의소스를이용해서호출한경우입니다. 이경우에는모든정보가암호화되지않고 < 그림 16> 와같이그대로노출됩니다. < 그림 15> 비암호화된페이지호출하기 8

9 < 그림 16> HTTP 호출시 80 포트모니터링결과 다음으로는 < 그림 13> 의소스코드를적용하여 topmenu.htm 만을 https 로호출을하는경우입니다. < 그림 17> topmenu.htm 만암호화하여호출하기 9

프레임을이용해서호출하는경우에는아래 < 그림 18> 과같이암호화되지않는 index.html ( 빨간색네모박스 ) 의내용과 main.htm 의내용만이 80 포트로텍스트전송되는것을알수있습니다. topmenu.htm 의내용은암호화전송되어지기때문에평문전송되는 80 포트에서는내용이확인되지않습니다.

10 프레임을이용해서호출하는경우에는아래 < 그림 18> 과같이암호화되지않는 index.html ( 빨간색네모박스 ) 의내용과 main.htm 의내용만이 80 포트로텍스트전송되는것을알수있습니다. topmenu.htm 의내용은암호화전송되어지기때문에평문전송되는 80 포트에서는내용이확인되지않습니다. < 그림 18> topmenu.htm 의내용만암호화된모니터링결과 마지막으로 < 그림 14> 과같이, 호출하는 index.html 을제외하고모든프레임내의호출페이지를 https 를통해서호출하게될경우에는아래와같이 index.html 의내용만평문으로전송이되고, 나머지 topmenu.htm 과 main.htm 은암호화되어서전송됩니다. 10

11 < 그림 19> topmenu.htm 과 main.htm 을 https 로호출하기 < 그림 20> index.html 의내용만이모니터링된결과 2 암호화통신 (https) 을이용해서호출하기앞에서와같은절차를이용해서 https를이용해서 < 그림 11> 과같이호출을하게되면, 프레임을포함하고있는 index.html은 URL을https로호출을하게되므로, 항상암호화가되어지고, topmenu.htm과 main.htm은 < 그림 12>,< 그림 13>,< 그림 14> 과같이암호화적용여부에따라서, 평문통신또는암호화통신이됩니다. 11

12 < 그림 21> https 를이용한호출 < 그림 22> https 호출시 80 포트모니터링결과 12

< 그림 22> 을보면, 웹브라우저에서 https 를통해서호출한 index.html 의내용은암호화되어서통신이이루어지기때문에 80 포트를모니터링하였을경우에그내용이보이지않지만,index.html 안에있는프레임을통해서 http 로호출한 topmenu.htm 과 main.htm 은 https 통신을통해서 index.

13 < 그림 22> 을보면, 웹브라우저에서 https 를통해서호출한 index.html 의내용은암호화되어서통신이이루어지기때문에 80 포트를모니터링하였을경우에그내용이보이지않지만,index.html 안에있는프레임을통해서 http 로호출한 topmenu.htm 과 main.htm 은 https 통신을통해서 index.html 을호출했지만, 평문으로통신이되는것을확인할수있습니다. < 그림 13>, < 그림 14> 의소스를같은방법으로테스트해보면, http 로호출된웹페이지는암호화통신이이루어지지않고있는것을알수있습니다. 이와같이프레임을이용하면, 필요에따라서한페이지에서암호화가제공되는부분과암호화가제공되지않는부분이공존할수있도록구성할수있지만, 앞서서도이미언급했듯이아무리웹브라우저에서 https 를이용해서호출을했어도프레임으로불러오는페이지가 http 주소를가지고있을경우에는암호화가되지않고정보의노출이발생할수있으므로, 프레임이사용되는페이지를암호화를위해서 https 로호출하고자할때에는꼭확인을해보시기바랍니다. 라. 체크박스를이용한선별적암호화하기웹페이지전체를암호화하지않고선별적으로암호화하는경우, 정보입력시보안접속을체크함으로써프로토콜을호출하는방법이있습니다. 다음은로그인박스에서선별적으로암호화된통신을하기위한 HTML 소스코드의예입니다. * 소스코드 * 소스코드 <script language="javascript"> <!-- function checkloginform1() { var f = document.forms["loginform1"]; // 아이디입력검사 if( f.memberid.value=="" ){ alert(" 아이디를입력하세요 "); f.memberid.focus(); return false; } // 비밀번호입력검사 if( f.memberpw.value=="" ){ alert(" 비밀번호를입력하세요 "); f.memberpw.focus(); <script language="javascript"> <!-- function checkloginform2() { var f = document.forms["loginform2"]; // 아이디입력검사 if( f.memberid.value=="" ){ alert(" 아이디를입력하세요 "); f.memberid.focus(); return false; } // 비밀번호입력검사 if( f.memberpw.value=="" ){ alert(" 비밀번호를입력하세요 "); f.memberpw.focus(); 13

14 return false; } // 액션 f.action = "h return true; } //--> < /script> < form name="loginform1" method="post" onsubmit="return checkloginform1();"> < table> <tr> <td> 아이디 </td> <td><input type="text" name="memberid"></td> <td> </td> </tr> <tr> <td> 비밀번호 </td> <td><input type="password" name="memberpw"></td> <td><input type="submit" name="submit" value=" 로그인 "></td> </tr> < /table> < /form> return false; } // 액션 if ( f.ssl_login.checked ) { // 보안접속체크판별 // 보안접속을체크했을때의액션 f.action = " } else { // 보안접속을체크하지않았을때의액션 f.action = " } return true; } //--> </script> <form name="loginform2" method="post" onsubmit="return checkloginform2();"> <table> <tr> <td> 아이디 </td> <td><input type="text" name="memberid"></td> <td><input type="checkbox" value=1 checkedname="ssl_login" > 보안접속 </td> </tr> <tr> <td> 비밀번호 </td> <td><input type="password" name="memberpw"></td> <td><input type="submit" name="submit" value=" 로그인 "></td> </tr> </table> 14

본절에서는앞서적용한보안프로토콜이제대로적용이되었는지확인하는방법에대해서알아보겠습니다. 1 패킷캡쳐를통한확인일단제대로암호화가되어지고있는지패킷을캡쳐하여확인하는방법입니다.

15 </form> SSL을이용한암호화된폼전송을하려면, action URL에서 'http' 대신 'https' 를적어주면됩니다. < 그림 23> 로그인시보안접속체크박스를이용하기위한 HTML 소스코드 2. 보안서버적용확인하기 앞에서암호화통신을위해서보안프로토콜을적용하는방법을알아보았습니다. 본절에서는앞서적용한보안프로토콜이제대로적용이되었는지확인하는방법에대해서알아보겠습니다. 1 패킷캡쳐를통한확인일단제대로암호화가되어지고있는지패킷을캡쳐하여확인하는방법입니다. < 그림 24> 는일반적인 http를통한평문통신의경우를캡쳐한것입니다. 빨간네모상자를확인하면 header의내용이평문으로보이는것을확인할수있습니다. < 그림 24> 평문통신 < 그림 25> 암호화된통신 15

16 2 웹페이지에서확인직접패킷을캡쳐해서확인하는방법외에도, 웹페이지에서간단히암호화가되어지고있는지를확인하는방법이있습니다. SSL이적용된웹사이트에 https 프로토콜로접속을했을경우에, < 그림 26> 과같이브라우저하단에자물쇠모양의표시가나타나는것을확인할수있을것입니다. 현재사이트와의통신이암호화되어서진행되고있다는것을보여주는것입니다. 웹사이트구성방법에따라자물쇠이미지가보이지않을수있으며, 구축방법에따라모양은다르게나타날수있습니다. < 그림 26> 암호화통신이이루어지고있음을보여주는자물쇠이미지 3 호출시포트번호확인 https를이용하여접속하시면일반적으로 443번포트로연결이되어 SSL 인증서버를통한통신을하게됩니다. 서버에여러개의인증서버를설치할경우상황에따라 443번포트가아닌여러가지포트를이용해서접속을하는상황이발생할수있습니다. 이런경우설치를대행하는업체나호스팅업체에서임의의포트를지정하거나사용할포트를지정받아 SSL 인증서를설치한뒤작업완료통보와함께사용된포트번호를알려주게됩니다. 4 웹페이지속성보기를통한확인암호화를적용한웹페이지가정상적으로암호화되고있는지는웹페이지에서오른쪽마우스를클릭하고속성을선택한후웹페이지등록정보를통하여확인할수가있습니다. 현재페이지가보안이되고있다면 < 그림 27> 와같은웹페이지속성을확인할수있습니다. < 그림 27> 보안이적용된웹페이지등록정보 16

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것