Safari 브라우저 window.open block 이슈

 

📌 1:1 문의하기가 safari 에서만 동작을 안해요!

얼마전에 항공쪽 QA 중에 다음과 같은 이슈가 있었습니다.

 

 

원인을 파악하기위해 safari 브라우저에서 동선을 파악해보니,

문의 버튼 클릭 시 새창으로 열기 대신 팝업 차단 알럿이 뜨는 것을 확인할 수 있었습니다.

 

🤔 원인이 뭘까?

safari 브라우저에서 다음과 같은 코드는 정상적으로 동작하지 않습니다.

<button onClick={async () => {
  await asyncJob()
  window.open('url', '_blank'); // ❌
} />

이는 safari 브라우저에서 새창을 열때, 사용자의 입력에 곧바로 반응할 수 없는 상황이라면

window.open 액션을 막기 때문입니다.

(대표적으로 비동기 요청을 수행한 뒤 리다이렉트 하는 것이 있겠네요)

 

📌 어떻게 고치면 될까?

🐛 문제가 발생한 코드

기존에는 새창으로 열기 전에 API 호출을 통해서 고객 ID 를 불러와

이동하려는 고객문의 페이지 URL에 삽입하는 로직이 있었습니다.

const handleRedirectToCsPage = async () => {
	const { uid } = await fetchUserId()

	window.open(`cs/${uid}/...`, '_blank')
}

<button onClick={handleRedirectToCsPage}>고객문의</button>

 

🔨 리팩토링하기

근데 uid 는 사실 호출하는 시점에 불러올 필요가 없습니다.

특정 조건에 따라 동적으로 바뀌는 값이 아니기 때문에, 페이지 로드 시점에 불러와 설정하면 되는 것입니다.

다만 uid 를 불러오지 않은 상태에서는 고객문의 페이지에 접근을 막아야하기에

방어 로직만 추가해주는 방향으로 코드를 변경했습니다.

 

const [uid, setUid] = useState() // ✅ cs user id 를 저장할 상태값추가

const handleRedirectToCsPage = () => {
	if (uid) {
		window.open(`cs/${uid}/...`, '_blank') // ✅ 일반 함수로 변경하고 uid 체크!
	}
}

useEffect(() => {
	const fetchAndSetUid = async () {
		const { uid } = await fetchUserId()
		setUid(uid) // ✅ 페이지 로드 이후에 비동기로 설정
	}

	fetchAndSetUid()
}, [])

<button onClick={handleRedirectToCsPage}>고객문의</button>

 

💡 그외에 알아두면 좋은 다른 방법

이러한 문제를 우회하는 다른 방법은 비어있는 새창을 열고, 비동기 로직 수행이 끝나기를 기다린 뒤에

해당 비어있는 창에 이동할 주소를 할당해주는 방법도 있습니다.

이번에는 이렇게 하지 않아도 리팩토링으로 간단하게 해결이 되는 문제였기 때문에

나중에 비슷한 이슈가 생긴다면 고려해봐야겠네요.

on('click', () => {
	const open = window.open('about:blank', '_blank')
	
	setTimeout(() => open.location.href == '<https://somepath.com>', 500)
})

여기서는 예시를 위해 비동기 동작을 setTimeout 으로 했지만,

API 호출이나 기타 다른 로직들로도 대체할 수 있을 것입니다.

 

📌 참고자료

https://github.com/microsoft/vscode/issues/118731

Why open link is not working inside a async handler on iPad Safari?

Problem related to window.open() on Safari

window.open(url, '_blank'); not working on iMac/Safari