안녕하세요.
지도 SDK를 동적으로 로딩하기 위해 아래 코드와 같이 코드를 작성하였습니다.
loadScript = (): Promise<void> =>
new Promise((resolve, reject) => {
try {
const scriptUrl = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.MAP_API_KEY}&autoload=false`
let script: HTMLScriptElement | null = document.querySelector(`script[src="${scriptUrl}"]`)
if (script) {
script.parentNode?.removeChild(script)
}
script = document.createElement("script")
script.type = "application/javascript"
script.src = scriptUrl
script.async = true
document.body.appendChild(script)
const handleLoadScript = () => {
script?.removeEventListener("load", handleLoadScript)
script?.removeEventListener("error", handleErrorScript)
resolve()
}
const handleErrorScript = () => {
script?.removeEventListener("load", handleLoadScript)
script?.removeEventListener("error", handleErrorScript)
reject("load daum script error.")
}
script.addEventListener("load", handleLoadScript)
script.addEventListener("error", handleErrorScript)
} catch (e) {
reject(e)
}
})
그러나 센트리 로그를 통해 간헐적으로 sdk.js 파일을 로딩하지 못하는 이슈를 발견하여 원인 파악중에 있습니다.
로그 중에 일부는 광고 차단 프로그램을 통해 referrer를 변조하여
request header의 referer가 현재 서비스하고 있는 저희 사이트의 origin이 아니라 -H ‘referer: https://dapi.kakao.com/’ 로 변조된 것을 확인하였습니다.
referer가 https://dapi.kakao.com/ 인 경우는 authrization이 실패된것을 확인하였습니다.
curl 'https://dapi.kakao.com/v2/maps/sdk.js?appkey=XXX&autoload=false'
-H 'accept: /'
-H 'accept-language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7'
-H 'cache-control: no-cache'
-H 'cookie: XXX'
-H 'dnt: 1'
-H 'pragma: no-cache'
-H 'referer: https://dapi.kakao.com/'
-H 'sec-ch-ua: "Chromium";v="124", "Google Chrome";v="124", "Not-A.Brand";v="99"'
-H 'sec-ch-ua-mobile: ?0'
-H 'sec-ch-ua-platform: "macOS"'
-H 'sec-fetch-dest: script'
-H 'sec-fetch-mode: no-cors'
-H 'sec-fetch-site: cross-site'
-H 'sec-gpc: 1'
-H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36'
그래서 위 코드에서 referer policy를 "no-referer"로 변경하였더니 정상 동작하는 것을 확인하였습니다.
...
script = document.createElement("script")
script.type = "application/javascript"
script.src = scriptUrl
script.async = true
**script.referrerPolicy = "no-referrer"**
...
여기서 문의드리고 싶은 것은, referrerPolicy가 “no-referrer” 여도 문제가 없을지, 만약에 문제가 있다면 다른 방법으로 해결할 수 있을지 확인 부탁드립니다.
감사합니다!