[네아로 오류 해결] www와 non-www(naked) 도메인 구별

안녕하세요. 

 

네이버아이디로 로그인기능을 사용하는데

 

이상하게 정상적으로 작동할 때가 있고 안할때가 있어서 어디에서 차이가 있는건지 삽질하며 찾아보니

 

www가 붙을때와 안붙을때의 차이가 있었습니다. 

 

 

var naverLogin = new naver.LoginWithNaverId(
			{
				clientId: "클라이언트 아이디",
				callbackUrl: "http://myWeb.com/callbackUrl",
				isPopup: false,
				callbackHandle: true
			}
		);

 

저는 자바스크립트 sdk를 통해 네아로를 사용하는데 위와 같은 형식으로 보통 콜백url 을 설정합니다. 

 

 

지금 위의 코드에서 설정되어 있는 callbackUrl을 보면 www가 없는 non-www 도메인입니다. 

 

callbackUrl을 non-www로 지정하면 non-www 도메인에서만 접속이 가능합니다. 

 

 

 

예를 들면

 

 

 

non-www 페이지에서는 non-www callbackUrl에 요청을 해야하고

 

www 페이지에서는 www callbackUrl에 요청을 해야합니다. 

 

 

 

 

 

 

 

위의 사진처럼 non-www에서 www callbackUrl로 요청을 하면 서로 다른 페이지로 인식되어 요청이 거부됩니다. 

 

같은 도메인이더라도 www와 non-www는 다른 페이지로 인식됩니다. 

 

그렇기 때문에 www로 접속했는지 non-www로 접속했는지를 구분해서 callbackUrl을 설정해야합니다. 

 

 

그런데 어떤 경우에는 www페이지에서 non-www 콜백url로 로그인 요청을 했는데 로그인이 성공하는 경우가 있습니다.

 

개념상으로 말이 안되죠.

 

이는 정상적으로 로그인이 성공된것이 아닙니다. 

 

이런 경우에는 non-www페이지에서 non-www 콜백url로 로그인 성공했던

 

캐시정보가 남아있어서 로그인이 성공한것입니다.

 

정상적으로는 www에서 non-www콜백url로 로그인 요청을 하면 로그인이 거부되어야 하지만

 

그전에 non-www를 통한 로그인 성공 캐시정보가 남아있어 로그인이 승인된것입니다. 

 

그리고 실제로 로그인 이후 생성되는 쿠키정보가 있으시다면 쿠키의 도메인을 보면 www가 아닌

 

non-www 로 설정되어 있을 것입니다.  이또한 남아잇는 캐시정보를 바탕으로 쿠키가 생성되서 그렇습니다.

 

이 경우 이 쿠키는 전혀 쓸모가 없는 쿠키입니다.

 

www로 접속했는데 non-www로 설정된 쿠키가 생성됬다 이건 잘못 설정된 쿠키입니다. 

 

브라우저 종료후 다시 들어오면 만료일이 지나지 않아도 이 쿠키는 삭제될 것입니다.

 

혹시 무슨 얘기인지 잘 이해가 되지 않고 정말 그런지 확인해보셔야겠다면

 

non-www로 콜백url을 설정후 www와 non-www로 번갈아가면서 로그인을 시도해보세요.

 

그리고 생성되는 쿠키의 도메인값을 확인해보시고

 

캐시정보도 2-3차례 시도해봤다면 지워보면서 시도해보세요. 

 

차이점을 알게 될 것입니다. 

 

 

 

자 이제 www와 non-www의 차이도 어느정도 알게됬고 그로 인해 어떤 이슈들이 생겨날 수 있는지에 대해서도

 

알아봤으니 이제 네아로에서 생긴 이슈를 해결해보겠습니다.

 

 

 

www 접속을 non-www로 리다이렉트 시키거나 non-www를  www로 리다이렉트 시켜

 

callbackUrl을 하나로 통일하는 것도 방법이 될 수 있습니다. 

 

하지만 저는 www와 non-www를 다 사용할 예정이며, 접속경로에 따라 callbackUrl을 다르게 설정했습니다.

 

		var currentUrl = window.location.href;
		var callbackUrl = '';
		if(currentUrl.indexOf("www.myWeb.com") != -1){
			  callbackUrl = "https://www.myWeb.com/callbackUrl";
		}else{
			  callbackUrl = "https://www.myWeb.com/callbackUrl";
		}

 

위처럼 www로 들어왔는지 확인후 www 이면 www가 있는 callbackUrl로 없으면 non-www 콜백url로 지정되도록

 

설정을 했습니다.

 

 

생각보다 간단하게 설정을 했습니다.

 

 

해결 방법은 쉽지만

 

어떻게 보면 너무 사소한 개념이라 쉽게 간과할수 있는 부분이었습니다. 

 

www와 non-www 의 차이는 사소했지만 이로인해 쿠키의 사용 문제까지 생겨났으니

 

개발을 할때 이러한 사소한 문제 또한 깊게 공부하며 개발해야겠네요.

 

 

 

 

----------추가---------------

 

 

개발을 하다 또 이와 관련된 이슈를 겪어 이슈내용을 추가로 적어봅니다.

 

소켓통신을 구현해놓은 하이브리드앱이 아이패드에서 정상적으로 작동하지 않는 이슈가 있엇습니다.

 

모바일웹에서는 잘 작동하는데 아이패드 앱에서만 작동이 잘 되지 않더라고요.

 

저의 프로젝트는 모바일 페이지와 웹페이지를 분기하여 구현되어있습니다. 

 

모바일로 접속하면  m.도메인.com  모바일 외의 환경에서는 도메인.com 으로 접속하고

 

뷰도 모바일용 페이지와 pc용 페이지가 따로 구현되어있죠.

 

그런데 앱은 m.도메인.com으로  로 웹뷰를 띄우니 아이패드에서도 도메인이 m.도메인.com 으로 

 

설정이 된것이죠.

 

그렇지만 아이패드는 사실 pc화면을 보여줍니다. 

 

태블릿pc는 pc환경으로 접속을 합니다. 

 

그렇다보니 소켓통신을 할때 m.도메인.com과  과 도메인.com 이 cors 문제를 일으켜

 

채팅이 정상적으로 작동되지 않은 것입니다. 

 

해결하는거야 어렵지 않았지만 이슈를 파악하는게 꽤나 까다로웠던 작업이었습니다.