jQuery Ajax IE8,9 Cross Domain Security Issue

http 연결된 페이지에서 개인정보를 전송하기 위해 동일한 서버인데 https로 ajax 접속할 필요가 있었다.

(이메일을 전송하는 로직이 있어서 시간이 5초 정도 걸리는 것 같다.)

Chrome 에서는 다음과 같이 HTTP 헤더에 다음 값을 추가하는 우아한 방법으로 Cross Domain Issue가 해결이 된다.

response.addHeader("Access-Control-Allow-Origin", "*");

IE (Internet Explorer) 에서도 10 버전부터는 된다고 하는데, 그 이하에서는 이런 방법으로 해결이 안된다.

그나마 IE 8, 9 에서는 XDomainRequest 객체가 있어서 이 객체를 이용하면 된다고 하고, 그 이하 버전에서는 사용자가 Browser의 Security Settings 를 건드리지 않으면 프로그램 적으로는 아예 안될 것 같다.

Cross-Origin Requests (CORS) in Internet Explorer, Firefox, Safari and Chrome

http://www.webdavsystem.com/ajax/programming/cross_origin_requests

IE에서 XDomainRequest 객체를 이용하기 위해서 jQuery ajaxHooks 라이브러리를 써 보았다.

[스크립트] jQuery.ajax cross domain post (XDomainRequest, X-XSS-Protection)

http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=76411

jQuery ajaxHooks

https://github.com/jaubourg/ajaxHooks/blob/master/src/xdr.js

IE 9 에 있는 개발자 도구로 xdr.js 파일에 브레이크 포인트도 찍어가면서 실행되는 것을 확인했지만, 예외가 발생.

에러의 원인은 "액세스 할 수 없습니다."

CORS with jQuery and XDomainRequest in IE8/9

http://stackoverflow.com/questions/11487216/cors-with-jquery-and-xdomainrequest-in-ie8-9

그런데 IE 에 있는 XDomainRequest 객체도 제약사항이 있는데, 보안 상의 이유로 http 와 https 간에는 ajax 통신을 할 수 없게 해 놓았다고 한다. (다음 글 참고) 그래서 이 방법도 실패.

XDomainRequest - Restrictions, Limitations and Workarounds

http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

[나의 해결책]

ajax 통신을 안 하고, 그냥 Form 을 https 웹페이지로 submit 해서 그 페이지에서 잠시 기다려 달라는 메시지를 보여주고, 거기서 https 로 ajax 통신하도록 해도 될 테지만, 중간 페이지도 새로 디자인 해야하고, Form 을 Submit 하고, 다시 Ajax 통신 하기 위해 Form 내용을 중간 페이지에서도 가지고 있어야 해서... 귀찮다.

jQuery.ajax 통신을 하면, 지원 안하는 IE 9 이하 버전에서는 바로 failure callback 함수가 실행된다.

그 함수에서 안 보이는 iframe 으로 https 웹페이지로 submit 해버림.

그리고 전송 결과를 기다리지 않고, 전송 성공으로 간주함.

그리고 메인 화면으로 바로 redirect 시켜버림.

혹시 iframe 의 submit 에서 에러가 나서 이메일이 전송 안되더라도 사용자의 입력 내용이 웹서버의 로그 파일에도 기록되고, DB에도 에러 내용이 기록되게 해 놨다. 그래서 혹시 메일이 안 가더라도 사용자의 입력 내용을 유실하지는 않으므로 무조건 성공이라고 간주했다.