갑자기 Cross site 이슈가 발생합니다.

[BangShinChul]

안녕하세요.
다음 우편번호 서비스를 유용하게 잘 사용하고 있습니다.
좋은 서비스를 무료로 사용할 수 있도록 오픈해주셔서 감사합니다.
다만 최근에 한 가지 문제를 발견했습니다.
제 웹 애플리케이션에서만 발생하는 문제인지는 잘 모르겠지만, cross site 이슈가 발생합니다.

아래는 관련 warning 문구입니다 :

The SSL certificate used to load resources from https://ssl.daumcdn.net will be distrusted in M70. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information.

A parser-blocking, cross site (i.e. different eTLD+1) script, https://t1.daumcdn.net/cssjs/postcode/1522037570977/180326.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.

------------

이 문제의 해결방법을 문의드리고 싶습니다.
감사합니다.

[daumPostcode]

@BangShinChul
네~ 안녕하세요~

위 현상 모두 현재 존재하는 것들이고 해결방법을 말씀드리겠습니다.

첫번째 SSL 인증서 관련문의는 크롬의 시만텍 인증서 관련 문제로 인해 발생한 것으로 이것에 대해서는 걱정안하셔도 됩니다. 크롬측이 제시한 일정대로 현재 전사 대응을 하기 때문에 자연스럽게 없어질 것이며, 저 오류가 뜬다고 보안이슈가 생기진 않습니다.

두번째의 경우 저희 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처리때문에 모든 다큐먼트가 파싱된 이후에 처리하는게 기본이므로, 페이지 렌더링 흐름이 자연스럽게 연결이 됩니다. 다만 애초에 페이지 설계를 이렇게 하지 않고 중간중간 스크립트를 삽입하여 비지니스 로직을 설계하셨다면 안맞는 방법일 수도 있습니다.

즉 한번 BangShinChul님의 설계 구조에 따라 동적로딩 또는, body 하단에 넣는 방식중에 골라서 사용하시면 될것 같아요. 물론 바디 하단에 넣는다고 해당 오류가 없어지진 않으나, 저희 코어스크립트의 용량이 매우 작기 때문에 페이지 블락을 하는 경우는 거의 없습니다 (현재까지 제보된 적은 없습니다.)

한번 확인 부탁드립니다.

[BangShinChul]

안녕하세요.
회신주신대로 동적로딩방식을 이용해서 수정했더니 warning이 뜨지않습니다.
감사합니다! :)

[daumPostcode]

@BangShinChul
동적로딩으로 해결하셨다니 다행입니다 ^^

2번 해결책에서 깃허브가 정보를 없애버렸는데요.
본문에서 없어진 부분이 < / b o d y > 입니다. ㅎㅎ;; 본문 수정해 두었습니다.;;;