parser-blocking via document.writhe 관련 문제 해결 방법

안녕하세요.

워드프레스에서 코스모스 회원관리 플러그인을 사용합니다. 인 앱 브라우저를 통하여 홈페이지로 접속하여 결제 창에서 주문을 할 때 주소 창이 뜨질 않습니다.

console 에는 이런 문제가 언급되어 있습니다.

postcode.v2.js?ver=2.0.0:1 A parser-blocking, cross site (i.e. different eTLD+1) script, http://t1.daumcdn.net/cssjs/postcode/1522037570977/180326.js, is invoked via document.write.

그래서 이후 열려야하는 창도 열리지 않습니다.

IOS 모바일 인 앱 브라우저에서만 작동이 안됩니다.

어떻게 해결 할 수 있는지 아시면 답변 부탁드립니다.

감사합니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    ios 보안 정책 때문인지 XSS(cross-site scripting) 공격으로 판단되어 스크립트 실행이 중단된 듯합니다.

    유사한 다른 내용도 참고 해보시겠어요?

    https://devtalk.kakao.com/t/topic/37341

    http://ohgyun.com/714

    저희가 iso 쪽으로는 도움을 드리기가 어려운데요.

    카카오(다음)쪽 포럼 혹은 ios 개발자 커뮤니티에도 이와 같은 내용을 올려서 도움을 요청해보시는게 좋을 듯합니다.

    고맙습니다.

  • 주신 링크로 들어가보니 cross site 이슈에 대한 답변이 있었습니다. 

    두번째의 경우 저희 API의 기본적인 로딩 방식은 postcode.v2.js 파일을 불러올때 코어스크립트의 로딩 동기화를 위해 document.write방식을 사용하고 있습니다. 바로 이점 때문에 나오는 경고 메세지인데요. document.write의 경우 페이지가 순차적으로 렌더링 되다가 이 로직을 만나면 블락이 되고 이 부분이 모두 완료되기 전까진 페이지 로딩 맟 파싱이 정지됩니다. 그래서 poor network coonnectivity 라는 부분처럼, 느린 네트워크 환경에서 document.write를 통해 이용하면 페이지가 멈춘것처럼 보여 서비스 장애처럼 보이니 주의하라는 것인데요.
    이것에 대한 해결책은 두가지가 있습니다.

    1. 저희 가이드 페이지의 동적로딩 방식을 이용한다 (가이드 페이지 기본 사용법 참고)
    2. < / b o d y > 바로 위에 script src=postcode.v2.js를 넣는다. 이 방식은 보통 서비스 개발시 통상적으로 head에 스크립트 로딩을 넣는 것으로 알려주는데요, 이것은 document.write가 아니더라도 부르는 스크립트 수가 늘어나면 페이지가 좀 늦게 뜨게 됩니다. 그래서 이에 대한 트릭으로, 스크립트 로딩이나 사전 프로세싱이 필요한 것들은 < / b o d y > 바로 앞, 즉 페이지의 맨 하단에 위치시키는데요. 이 경우 본문 페이지는 페이지대로 로딩이 다 되고 스크립트의 경우에는 보통 DOM처리때문에 모든 다큐먼트가 파싱된 이후에 처리하는게 기본이므로, 페이지 렌더링 흐름이 자연스럽게 연결이 됩니다. 다만 애초에 페이지 설계를 이렇게 하지 않고 중간중간 스크립트를 삽입하여 비지니스 로직을 설계하셨다면 안맞는 방법일 수도 있습니다.

    동적로딩 방식은 이와 같이 사용할 수 있다는데, 

    <!--autoload=false 파라미터를 이용하여 자동으로 로딩되는 것을 막습니다.-->
    <script src="http://dmaps.daum.net/map_js_init/postcode.v2.js?autoload=false"></script>
    <script>
        //load함수를 이용하여 core스크립트의 로딩이 완료된 후, 우편번호 서비스를 실행합니다.
        daum.postcode.load(function(){
            new daum.Postcode({
                oncomplete: function(data) {
                    // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
                    // 예제를 참고하여 다양한 활용법을 확인해 보세요.
                }
            }).open();
        });
    </script>

     

    이 코드를 코스모스팜 플러그인의 어디에 넣으면 되는건가요? 제가 컴퓨터를 잘 모르는 사람이라 도움주시면 감사하겠습니다. 

  • [+]

    추가로 아이폰의 인스타그램, 카톡의 웹뷰에서 이용하실때, open() 함수를 이용하여 팝업형태로 띄우시나요?
    웹뷰의 경우 브라우저의 전체적인 기능을 구현하지 않은 버전이 매우 많습니다. 즉 제일 기본적인 기능만 구현해두고 실제 브라우저가 지원하는 복합적인 기능은 구현을 안한것들이 많아서 발생하는 문제입니다.

    해당 모바일웹뷰에서의 팝업이슈는 open을 이용한 팝업모드가 아닌, embed를 이용한 레이어 모드를 추천드립니다.

    첫번째로는 레이어팝업 형태로 DIV 랩퍼를 화면 전체로 잡아서 띄우는 방법이 있으며, 또는 레이어 팝업이 아니라 본문 페이지에 삽입을 시키는 방법이 있습니다. 이 삽입을 시키는 방법이 스크롤이 꼬이지 않아 더 안정적입니다.

    두번째로는 조금 번거롭지만, 저희 open메소드가 일반적은 방식으로 window.open함수를 호출하는 것이 아니라서 문제가 되는 것이기(PC+mobile 호환성 때문에 어쩔 수가 없었습니다;) 때문에, 팝업은 직접 window.open을 이용해서 hyjjo123님의 페이지를 띄우시고 그 안에서 저희 우편번호 서비스를 embed를 이용해서 화면에 꽉차게 띄운다음에, oncomplete함수에서 데이터를 받으면, 팝업을 직접 띄우신 것이기 때문에 opener객체를 통해 부모페이지로 전달 시키시면 될것 같아요.
    즉, 팝업으로 띄우실 페이지에 우편번호 서비스를 embed로 띄우고, 팝업이 데이터를 받으면 opener객체를 이용하여 데이터를 본페이지로 전달 시키는 방법입니다.

     

     

    이런 답변을 받았습니다. 저는 레이어 모드를 이용하고 있는데도 불구하고 인앱브라우저에서 주소창이 뜨지 않는 문제가 발생합니다. 그럼 본문 페이지에 삽입 시키는 방법으론 어떻게 적용시키면 될지 알 수 있을까요?

    이곳에 물어보는게 적절한가 싶지만.. 그래도 도움 부탁드릴게요!!

  • 안녕하세요~^^

    확실치는 않지만 아래 코드를 테마의 functions.php 파일에 추가해주세요.

    그런데 회원관리 플러그인쪽에도 이미 다음 우편번호 검색 js 파일이 추가되어 있습니다.

    다른 문제가 발생된다면 아래 코드는 제거를 해주세요.

    wp_register_script('my-daum-postcode', 'http://dmaps.daum.net/map_js_init/postcode.v2.js?autoload=false', array(), '2.0.0', true);

     

    그리고 필요하다면 코스모스팜 회원관리 플러그인의 파일도 편집을 해줘야할 듯합니다.

    /wp-content/plugins/cosmosfarm-members/assets/js/script.js 파일에 cosmosfarm_members_open_postcode 함수 코드가 있으니 확인 부탁드립니다.

    고맙습니다.

  • 레이어로 띄우기라면 embed 방식으로 주소 검색 창이 뜹니다.

    또한 cross site 이슈는 open 혹은 embed 방식의 차이와는 무관한 브라우저 혹은 운영체제의 보안 정책과 밀접한 관련이 있을 듯합니다.

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기