성태의 닷넷 이야기
홈 주인
모아 놓은 자료
프로그래밍
질문/답변
사용자 관리
사용자
메뉴
아티클
외부 아티클
유용한 코드
온라인 기능
MathJax 입력기
최근 덧글
[정성태] Working with Rust Libraries from C#...
[정성태] Detecting blocking calls using asyn...
[정성태] 아쉽게도, 커뮤니티는 아니고 개인 블로그입니다. ^^
[정성태] 질문이 잘 이해가 안 됩니다. 우선, 해당 소스코드에서 ILis...
[양승조
] var대신 dinamic으로 선언해서 해결은 했습니다. 맞는 해...
[양승조
] 또 막혔습니다. ㅠㅠ var list = props[i].Ge...
[양승조
] 아. 감사합니다. 어제는 안됐던것 같은데....정신을 차려야겠네...
[정성태] "props[i].GetValue(props[i])" 코드에서 ...
[정성태] 저렇게 조각 코드 말고, 실제로 재현이 되는 예제 프로젝트를 압...
[정성태] Modules 창(Ctrl+Shift+U)을 띄워서, 해당 Op...
글쓰기
제목
이름
암호
전자우편
HTML
홈페이지
유형
제니퍼 .NET
닷넷
COM 개체 관련
스크립트
VC++
VS.NET IDE
Windows
Team Foundation Server
디버깅 기술
오류 유형
개발 환경 구성
웹
기타
Linux
Java
DDK
Math
Phone
Graphics
사물인터넷
부모글 보이기/감추기
내용
<div style='display: inline'> <h1 style='font-family: Malgun Gothic, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>여신금융협회 웹 사이트의 "Netscape 6.0은 지원하지 않습니다." 오류 메시지</h1> <p> 아래의 글에 달린 덧글에 보면,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Internet Explorer 11을 7, 8, 9, 10 버전으로 인식시키는 방법 ; <a target='tab' href='http://www.sysnet.pe.kr/2/0/1514'>http://www.sysnet.pe.kr/2/0/1514</a> </pre> <br /> 현재(2015-02-06) 여신 금융 협회의 공인인증 로그인 페이지에 인터넷 익스플로러 11을 이용해 접속하면,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > 여신금융협회 - 공인인증 로그인 ; <a target='tab' href='http://www.cardpoint.or.kr/signCert.do'>http://www.cardpoint.or.kr/signCert.do</a> </pre> <br /> "Netscape 6.0은 지원하지 않습니다."라는 오류 메시지 창이 뜹니다. 왜 그럴까요? ^^ 원인 분석을 해보겠습니다.<br /> <br /> <hr style='width: 50%' /><br /> <br /> 우선, 해당 오류가 발생하는 원인은 "<a target='tab' href='http://www.cardpoint.or.kr/signCert.do'>http://www.cardpoint.or.kr/signCert.do</a>" 웹 페이지에 포함된 PrintObjectTag 함수로부터 시작됩니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <script type="text/javascript"> PrintObjectTag(); </script> </pre> <br /> 이 함수는 xecureweb.js 파일에 정의되어 있고 그 내부의 IsNetscape60을 검사하는 코드에서 우리가 보았던 오류 메시지를 발생시키는 것을 볼 수 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > function PrintObjectTag() { if( <span style='color: blue; font-weight: bold'>IsNetscape60()</span> ) <span style='color: blue; font-weight: bold'>alert("Netscape 6.0은 지원하지 않습니다") ;</span> else { // ...[생략]... } } </pre> <br /> IsNetscape60 함수가 도대체 어떻게 정의하고 있길래 IE 11을 Netscape60으로 판단하고 있는지 살펴보면,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > function UserAgent() { return navigator.userAgent.substring(0,9); } function IsNetscape() // by Zhang { if(<span style='color: blue; font-weight: bold'>navigator.appName == 'Netscape'</span>) return true ; else return false ; } function IsNetscape60() // by Zhang { if(<span style='color: blue; font-weight: bold'>IsNetscape() && UserAgent() == 'Mozilla/5'</span>) return true ; else return false ; } </pre> <br /> 일단, UserAgent() 함수는 IE 11이든 IE 10이든 "Mozilla/5"를 반환하므로 상관이 없습니다. 문제는 navigator.appName에서 차이가 발생합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Ineternet Explorer 11: navigator.appName == "Netscape" Ineternet Explorer 10 이하: navigator.appName == "Microsoft Internet Explorer" </pre> <br /> 그렇군요. IE 11부터 navigator.appName 값이 "Netscape"로 바뀌었기 때문에 xecureweb.js에서는 해당 웹 브라우저를 Netscape로 인식했고 버전을 6.0으로 가정하고 그런 오류를 내고 있는 것입니다.<br /> <br /> <hr style='width: 50%' /><br /> <br /> 그렇다면, 왜? 제가 만든 다음의 글에 공개한 유틸리티를 통해 IE 10이하로 값을 바꿔주어도 여전히 오류가 발생하는 걸까요?<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Internet Explorer 11을 7, 8, 9, 10 버전으로 인식시키는 방법 ; <a target='tab' href='http://www.sysnet.pe.kr/2/0/1514'>http://www.sysnet.pe.kr/2/0/1514</a> </pre> <br /> 위의 UserAgentSelector 유틸리티는 "웹 브라우저"에서 "웹 서버"로 전달하는 "User Agent" 문자열을 바꾸는데 사용하는 것일 뿐, "IE 웹 브라우저" 자체의 동작 모드를 제어하는 것은 아니기 때문입니다.<br /> <br /> 즉, UserAgentSelector 유틸리티를 사용하면 웹 서버에서 IE 버전을 판단할 수 있는 것을 제어할 수 있도록 도와주는 것입니다. IE 클라이언트 내부의 자바 스크립트 실행환경을 그렇게 바꿔주는 것은 아니기 때문에 naviagor.appName의 값은 여전히 "Netscape"로 나오는 것입니다.<br /> <br /> 그렇다면, navigator.appName의 값을 IE 10 이하에서처럼 "Microsoft Internet Explorer"로 나오게 하려면 어떻게 해야 할까요? 그것은 IE의 동작 모드를 바꿔주면 되는데, 이를 위해 "F12" 키를 눌러 나오는 "개발자 도구"의 "Emulation" 탭에서 "Document mode"를 10 이하로 설정해 줄 수 있습니다.<br /> <br /> <img onclick='toggle_img(this)' class='imgView' alt='ie11_document_mode_1.png' src='/SysWebRes/bbs/ie11_document_mode_1.png' /><br /> <br /> 저렇게 10으로 설정하고 다시 "<a target='tab' href='http://www.cardpoint.or.kr/signCert.do'>http://www.cardpoint.or.kr/signCert.do</a>" 웹 페이지를 방문해 보면, 이번에는 오류 메시지 창 없이 정상적으로 로그인이 되는 것을 볼 수 있습니다.<br /> <br /> <hr style='width: 50%' /><br /> <br /> 그렇다면, 누구의 잘못일까요?<br /> <br /> 제가 보기에는 "www.cardpoint.or.kr" 웹 사이트를 만든 개발자와 "xecureweb.js"를 개발한 "소프트포럼" 모두 절반의 책임이 있습니다. 음... 그래도 ^^ 조금 엄격하게 따지면, 라이브러리 성격의 모듈을 만드는 "소프트포럼"의 책임이 좀 더 크게 있습니다. 왜냐하면, IsNetscape60 함수에서 UserAgent에 "MSIE" 문자열의 포함 여부를 한번 더 검사한다면 저런 식의 오탐은 없앨 수 있기 때문입니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > function IsNetscape60() // by Zhang { if(IsNetscape() && UserAgent() == 'Mozilla/5'<span style='color: blue; font-weight: bold'> && navigator.userAgent.indexOf("MSIE") == -1</span>) return true ; else return false ; } </pre> <br /> 그런데 "www.cardpoint.or.kr" 측에는 어떤 잘못이 있는 걸까요?<br /> <br /> 설령, IsNetscape60 함수가 MSIE를 구분하지 않았다고 해도 "www.cardpoint.or.kr" 측의 웹 서버는 해당 서비스가 IE 7을 따른다고 설정하고 있었습니다. 이는 브라우저와 서버간의 패킷을 캡쳐해 보면 알 수 있습니다. IE는 다음과 같이 GET 패킷을 보내면,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > GET http://www.cardpoint.or.kr/signCert.do HTTP/1.1 Accept: text/html, application/xhtml+xml, */* Accept-Language: ko,en-US;q=0.7,en;q=0.3 User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko Accept-Encoding: gzip, deflate Host: www.cardpoint.or.kr DNT: 1 Connection: Keep-Alive Pragma: no-cache Cookie: JSESSIONID=0001-yblhXpRnG8rP9CNwsxpCBQ:-C9HMUS </pre> <br /> 웹 서버는 그 응답으로 IE 7모드로 동작하라는 "X-UA-Compatible" 헤더를 포함해 브라우저로 전송하기 때문입니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > HTTP/1.1 200 OK Date: Fri, 06 Feb 2015 12:10:51 GMT Server: IBM_HTTP_Server Pragma: No-cache Cache-Control: no-cache Expires: Thu, 01 Jan 1970 00:00:00 GMT <span style='color: blue; font-weight: bold'>X-UA-Compatible: IE=EmulateIE7</span> Keep-Alive: timeout=30 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=euc-kr Content-Language: en-US </pre> <br /> 그런데, 왜? IE 11은 IE 7 모드로 동작하지 않고 여전히 IE 11로 동작하는 것일까요? 그것은 웹 페이지에 포함된 <meta /> 태그가 다시 이 값을 최신 IE 버전으로 동작하라고 재정의하고 있기 때문입니다. "<a target='tab' href='http://www.cardpoint.or.kr/signCert.do'>http://www.cardpoint.or.kr/signCert.do</a>" 요청에 대한 반환으로 받은 웹 페이지를 보면 그 사실을 확인할 수 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <span style='color: blue; font-weight: bold'><meta http-equiv="X-UA-Compatible" content="IE=edge" /></span> <link rel="stylesheet" type="text/css" href="/source/css/common.css" /> <link rel="stylesheet" type="text/css" href="/source/css/layout.css" /> <link rel="stylesheet" type="text/css" href="/source/css/sub.css" /> <link rel="stylesheet" type="text/css" href="/source/css/new.css" /> <title>카드 포인트 통합조회</title> ...[생략]... </pre> <br /> Internet Explorer 11은 HTTP 응답 헤더로부터 "EmulateIE7" 지시자를 받았지만, 우선 순위가 높은 웹 페이지의 <meta /> 태그에 다시 "IE=edge"로 설정되어 있기 때문에 이를 따르게 된 것입니다.<br /> <br /> 아마도 "<a target='tab' href='http://www.cardpoint.or.kr/signCert.do'>http://www.cardpoint.or.kr/signCert.do</a>"의 웹 개발자는 해당 페이지가 최신 HTML 규약을 따르므로 IE 11을 잘 지원할 것이라 판단하고 그와 같은 메타 태그 설정을 넣었지만, 그것이 포함하고 있는 xecureweb.js는 그에 대한 준비가 안된 것이어서 이런 문제가 발생한 것입니다.<br /> <br /> <hr style='width: 50%' /><br /> <br /> 정리해 보면, 이 문제를 해결하기 위해서는 2가지 방법 중에 하나를 선택하면 됩니다.<br /> <br /> <ul> <li>xecureweb.js에서 MSIE에 대한 조건을 추가하든가!</li> <li>아니면, signCert.do 페이지의 응답 헤더에 있는 meta 태그의 값을 "IE=edge"에서 "IE=10"으로 설정하든가!</li> </ul> <br /> 이 작업 중의 하나가 변경되지 않는 한, 여신 금융 협회 홈페이지를 방문하는 모든 IE 11 웹 브라우저 사용자는 "F12" 키를 눌러 Document Mode를 "10"으로 바꿔주어야 합니다.<br /> <br /> <hr style='width: 50%' /><br /> <br /> 끝마치기 전에 개발자들에게 흥미로운 사실을 하나 전달해 드리자면!<br /> <br /> fiddler의 경우 패킷을 조작할 수 있는 Rule script를 제공하는데, OnBeforeResponse에서 다음과 같은 작업을 수행하도록 만들 수 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > static function OnBeforeResponse(oSession: Session) { // ...[생략]... <span style='color: blue; font-weight: bold'> if (oSession.HostnameIs("www.cardpoint.or.kr") && oSession.oResponse.headers.ExistsAndContains("Content-Type","text/html")){ oSession.utilDecodeResponse(); oSession.utilReplaceInResponse('IE=edge','IE=10'); }</span> // ...[생략]... } </pre> <br /> 이름하여 "FiddlerScript"인데, 자세한 사용법은 다음의 글을 참고하세요.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Modifying a Request or Response ; <a target='tab' href='http://docs.telerik.com/fiddler/KnowledgeBase/FiddlerScript/ModifyRequestOrResponse'>http://docs.telerik.com/fiddler/KnowledgeBase/FiddlerScript/ModifyRequestOrResponse</a> </pre> <br /> 아울러, 전에 이 스크립트를 이용해 WebSocket을 모니터링하는 방법을 간략하게 설명한 적이 있습니다. ^^<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Fiddler에서 WebSocket 통신을 모니터링하는 방법 ; <a target='tab' href='http://www.sysnet.pe.kr/2/0/1578'>http://www.sysnet.pe.kr/2/0/1578</a> </pre> </p><br /> <br /><hr /><span style='color: Maroon'>[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]</span> </div>
첨부파일
스팸 방지용 인증 번호
1748
(왼쪽의 숫자를 입력해야 합니다.)