ajax HTTP, HTTPS에 따른 크로스 도메인 문제

사용자 개인 정보를 서버에 전송할 때 HTTPS로 적용해 달라는 요청이 들어온 적이 있었다.

그래서 주민등록번호나 회원 아이디, 패스워드 등을 서버로 전송하는 페이지에 한해서 HTTPS로 적용되게 URL을 변경하였다.

헌데, 다음과 같은 문제가 발생하였다.

1. 회원 약관 페이지 접근 http://test.co.kr/userAgreement.do

2. 약관 페이지에서 회원 정보 입력 페이지 이동 https://test.co.kr/userReg.do

3. 회원 정보 입력 페이지에서 휴대폰 인증 버튼 클릭 시 ajax로 http://test.co.kr/userAuthMobilePhone.do 요청

위와 같이 휴대폰 인증 버튼 클릭 시 서버로 요청을 보내지도 못하고, ajax 에러 메시지가 출력된다.

error, No Transport

에러 메시지가 출력되는 원인은 회원 정보 입력 페이지 접근 시에는 HTTPS 프로토콜로 접근하였지만 휴대폰 인증 시에는 HTTP로 요청을 보냈기 때문이다.

ajax에서는 HTTPS, HTTP도 크로스 도메인으로 구분하기 때문이다.

지금까지 크로스 도메인 문제는 메인 도메인과 서브 도메인, 도메인은 같지만 포트 번호가 다를 경우에만 해당 되는 줄 알았다.

허나 ajax는 프로토콜이 서로 다를 경우에도 크로스 도메인으로 구분한다.

결국 위의 문제는 휴대폰 인증 시에도 HTTPS로 요청을 보낼 수 있도록 수정하여 문제를 해결하였다.

또 다른 해결 방법은 JSONP를 이용하는 것이 있지만 굳이 쓸 이유가 없어서 적용해 보진 않았다.

---

[2016-05-11]

https 사이트에서 jsonp를 이용하면 http 사이트로 호출할 수 있다고 생각했는데 아니였다. (3년 전에 정리했던 내용인데 잘못 알고 있었음)

This request has been blocked; the content must be served over HTTPS. 와 같은 에러 메세지가 나오면서 브라우저에서 연동을 차단한다.

여하튼 다음번에는 이런 오류를 범하지 않기 위해 다시 한번 간략하게 정리를 해본다.

http -> https 호출 가능

https -> http 호출 불가능

다른 도메인으로의 호출은 가능 (프로토콜에 상관 없이 모두 가능)

결론은 jsonp를 이용했을 때 https에서 http로의 호출을 제외하곤 모두 연동 가능하다는 것이다.