[javascript] KCP 본인인증 모바일 window.opener 작동 문제 해결

개발 환경 : PHP + 그누보드

테스트 환경 : IOS 사파리, 크롬

문제점 : 모바일 브라우저에서 그누보드 본인확인 플러그인 kcpcert의 window.opener, window.parent 가 작동 안 됨

( window.parent.$ is not a function .. 오류 발생 )

해결 방법 : window.opener, window.parent.$(~) 를 opener.document.getElementById(~) 로 변경

( rel noopener를 적용해야한다는 글도 봤는데 이번 경우에는 rel로 해결되지 않았다.. )

변경 파일

: /mobile/skin/member/basic/register_form.skin.php (회원가입 / 회원정보 수정 페이지)

/plugin/kcpcert/kcpcert_form.php

/plugin/kcpcert/kcpcert_result.php

변경 내용

1-1) register_form.skin.php 변경 전

<input type="hidden" name="cert_type" value="<?php echo $member['mb_certify']; ?>">
<input type="hidden" name="cert_no" value="">
<input type="hidden" name="veri_up_hash" value="" >
<input type="text" name="mb_name" value="<?php echo $member['mb_name'] ?>">
<input type="text" name="mb_hp" value="<?php echo $member['mb_hp'] ?>" >

1-2) register_form.skin.php 변경 후

: id 추가

<input type="hidden" name="cert_type" id="cert_type" value="<?php echo $member['mb_certify']; ?>">
<input type="hidden" name="cert_no" id="cert_no" value="">
<input type="hidden" name="veri_up_hash" id="veri_up_hash" value="">
<input type="text" name="mb_name" id="reg_mb_name" value="<?php echo $member['mb_name'] ?>">
<input type="text" name="mb_hp" id="reg_mb_hp" value="<?php echo $member['mb_hp'] ?>" >

2-1) kcpcert_form.php 변경 전

<script>
window.onload = function() {
    cert_page();
}

// 인증 요청 시 호출 함수
function cert_page()
{
    var frm = document.form_auth;

    if ( ( frm.req_tx.value == "auth" || frm.req_tx.value == "otp_auth" ) )
    {
    	...생략
    }

    else if ( frm.req_tx.value == "cert" )
    {
        if( ( navigator.userAgent.indexOf("Android") > - 1 || navigator.userAgent.indexOf("iPhone") > - 1 ) ) // 스마트폰인 경우
        {
            window.parent.$("input[name=veri_up_hash]").val(frm.up_hash.value); // up_hash 데이터 검증을 위한 필드
            self.name="auth_popup";
        }
        else // 스마트폰 아닐때
        {
            window.opener.$("input[name=veri_up_hash]").val(frm.up_hash.value); // up_hash 데이터 검증을 위한 필드
            frm.target = "auth_popup";
        }

        frm.action="<?php echo $cert_url; ?>";
        frm.submit();
    }
}
</script>

2-2) kcpcert_form.php 변경 후

: window.parent -> opener.~ 로 변경

<script>
window.onload = function() {
    cert_page();
}

// 인증 요청 시 호출 함수
function cert_page()
{
    var frm = document.form_auth;

    if ( ( frm.req_tx.value == "auth" || frm.req_tx.value == "otp_auth" ) )
    {
    	...생략
    }

    else if ( frm.req_tx.value == "cert" )
    {
        if( ( navigator.userAgent.indexOf("Android") > - 1 || navigator.userAgent.indexOf("iPhone") > - 1 ) ) // 스마트폰인 경우
        {
            //window.parent.$("input[name=veri_up_hash]").val(frm.up_hash.value); // up_hash 데이터 검증을 위한 필드
            opener.document.getElementById("veri_up_hash").value=frm.up_hash.value; 
            self.name="auth_popup";
        }
        else // 스마트폰 아닐때
        {
            window.opener.$("input[name=veri_up_hash]").val(frm.up_hash.value); // up_hash 데이터 검증을 위한 필드
            frm.target = "auth_popup";
        }

        frm.action="<?php echo $cert_url; ?>";
        frm.submit();
    }
}
</script>

3-1) kcpcert_result.php 변경 전

<script>
$(function() {
    var $opener;
    var is_mobile = false;

    if( ( navigator.userAgent.indexOf("Android") > - 1 || navigator.userAgent.indexOf("iPhone") > - 1 ) ) { // 스마트폰인 경우
        $opener = window.parent;
        is_mobile = true;
    } else {
        $opener = window.opener;
    }

    // up_hash 검증
    if( document.form_auth.up_hash.value != $opener.$("input[name=veri_up_hash]").val() ) {
        alert("up_hash 변조 위험있음");
    }

    // 인증정보
    $opener.$("input[name=cert_type]").val("<?php echo $cert_type; ?>");
    $opener.$("input[name=mb_name]").val("<?php echo $user_name; ?>").attr("readonly", true);
    $opener.$("input[name=mb_hp]").val("<?php echo $phone_no; ?>").attr("readonly", true);
    $opener.$("input[name=cert_no]").val("<?php echo $md5_cert_no; ?>");

    if(is_mobile) {
        $opener.$("#cert_info").css("display", "");
        $opener.$("#kcp_cert" ).css("display", "none");
    }

    alert("본인의 휴대폰번호로 확인 되었습니다.");

    window.close();
});
</script>

3-2) kcpcert_result.php 변경 후

: window.parent -> opener.~ 로 변경

<script>
$(function() {
    var $opener;
    var is_mobile = false;

    if( ( navigator.userAgent.indexOf("Android") > - 1 || navigator.userAgent.indexOf("iPhone") > - 1 ) ) { // 스마트폰인 경우
        $opener = window.parent;
        is_mobile = true;
		// up_hash 검증
		if( document.form_auth.up_hash.value != opener.document.getElementById("veri_up_hash").value ) {
			alert("up_hash 변조 위험있음");
		}

		// 인증정보
		opener.document.getElementById("cert_type").value = "<?php echo $cert_type; ?>";
		opener.document.getElementById("mb_name").value = "<?php echo $user_name; ?>";
		opener.document.getElementById("mb_hp").value = "<?php echo $phone_no; ?>";
		opener.document.getElementById("cert_no").value = "<?php echo $md5_cert_no; ?>";
    } else {
        $opener = window.opener;
		// up_hash 검증
		if( document.form_auth.up_hash.value != $opener.$("input[name=veri_up_hash]").val() ) {
			alert("up_hash 변조 위험있음");
		}
		
		$opener.$("input[name=cert_type]").val("<?php echo $cert_type; ?>");
		$opener.$("input[name=mb_name]").val("<?php echo $user_name; ?>").attr("readonly", true);
		$opener.$("input[name=mb_hp]").val("<?php echo $phone_no; ?>").attr("readonly", true);
		$opener.$("input[name=cert_no]").val("<?php echo $md5_cert_no; ?>");
    }
    
    if(is_mobile) {
        $opener.$("#cert_info").css("display", "");
        $opener.$("#kcp_cert" ).css("display", "none");
    }

    alert("본인의 휴대폰번호로 확인 되었습니다.");

    window.close();
});
</script>

if(is_mobile) { .. } 안의 $opener 도 필요한경우 변경해주면 된다..

+ 추가

위의 내용 외에 본인인증 창 자체를 팝업이 아니라 내부로 붙이는게 더 좋을 것 같다. ( 팝업창은 앱 적용 시 문제 생길 수 있음 )

/js/certify.js 변경 전

// 본인확인 인증창 호출
function certify_win_open(type, url)
{
    if(type == 'kcb-ipin')
    {
        var popupWindow = window.open( url, "kcbPop", "left=200, top=100, status=0, width=450, height=550" );
        popupWindow.focus();
    }
    else if(type == 'kcb-hp')
    {
        var popupWindow = window.open( url, "auth_popup", "left=200, top=100, width=430, height=590, scrollbar=yes" );
        popupWindow.focus();
    }
    else if(type == 'kcp-hp')
    {
        var return_gubun;
        var width  = 410;
        var height = 500;

        var leftpos = screen.width  / 2 - ( width  / 2 );
        var toppos  = screen.height / 2 - ( height / 2 );

        var winopts  = "width=" + width   + ", height=" + height + ", toolbar=no,status=no,statusbar=no,menubar=no,scrollbars=no,resizable=no";
        var position = ",left=" + leftpos + ", top="    + toppos;
        var AUTH_POP = window.open(url,'auth_popup', winopts + position);
    }
    else if(type == 'lg-hp')
    {
        var popupWindow = window.open( url, "auth_popup", "left=200, top=100, width=400, height=400, scrollbar=yes" );
        popupWindow.focus();
    }
}

/js/certify.js 변경 후

function certify_win_open2(type, url,event)
{
    if(type == 'kcb-ipin')
    {
        var popupWindow = window.open( url, "kcbPop", "left=200, top=100, status=0, width=450, height=550" );
        popupWindow.focus();
    }
    else if(type == 'kcb-hp')
    {
        var popupWindow = window.open( url, "auth_popup", "left=200, top=100, width=430, height=590, scrollbar=yes" );
        popupWindow.focus();
    }
    else if(type == 'kcp-hp')
    {

		if( navigator.userAgent.indexOf("Android") > - 1 || navigator.userAgent.indexOf("iPhone") > - 1 )
        {

		 var $frm = $(event.target.form);
			
            if($("#kcp_cert").length < 1) {
                $frm.wrap('<div id="cert_info"></div>');

                $("#cert_info").append('<form name="form_temp" method="post">');
            } else {
                $("#kcp_cert").remove();
            }

            $("#cert_info")
                .after('<iframe id="kcp_cert" name="kcp_cert" width="100%" height="700" frameborder="0" scrolling="no" style="display:none"></iframe>');

            var temp_form = document.form_temp;
            temp_form.target = "kcp_cert";
            temp_form.action = url;
            document.getElementById( "cert_info" ).style.display = "none";
            document.getElementById( "kcp_cert"  ).style.display = "";

            temp_form.submit();

		}
        else
        {
            var return_gubun;
			var width  = 410;
			var height = 500;

			var leftpos = screen.width  / 2 - ( width  / 2 );
			var toppos  = screen.height / 2 - ( height / 2 );

			var winopts  = "width=" + width   + ", height=" + height + ", toolbar=no,status=no,statusbar=no,menubar=no,scrollbars=no,resizable=no";
			var position = ",left=" + leftpos + ", top="    + toppos;
			var AUTH_POP = window.open(url,'auth_popup', winopts + position);
        }
    }
    else if(type == 'lg-hp')
    {
        var popupWindow = window.open( url, "auth_popup", "left=200, top=100, width=400, height=400, scrollbar=yes" );
        popupWindow.focus();
    }
}

'개발하는 '정' > JS' 카테고리의 다른 글

[JQUERY] datalist change 값 받아오기 (0)	2022.09.07
[JQUERY] An invalid form control with name='' is not focusable. 원인 (0)	2022.08.08
[Javascript] 팝업창 하루 동안 보지 않기 구현 (5)	2020.12.16
[javascript] 결제 시 포인트 적용 기능 구현 (0)	2020.12.07
[jquery] jquery로 a 태그 target 변경하는 방법 + 보안 문제 (0)	2020.11.19

주&정 | 공부하는 일상

[javascript] KCP 본인인증 모바일 window.opener 작동 문제 해결