![[Javascript] 브라우저 팝업 차단으로 인한 문제와 해결책](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcvhYyL%2FbtsK2oa0BmV%2FvCOtbQW29hHJtDY1mdX8kk%2Fimg.jpg)
브라우저 차단 팝업 문제
각 블로그의 포스트가 있는 컴포넌트를 클릭 하게 되면 조회수 API를 보낼 수 있도록 구현했다.
클릭 후 해당 포스트 페이지로 이동하는 것은 잘 됐지만, 이상하게 조회수가 올라가는 API는 잘 작동하지 않았다.
대부분의 브라우저들은 UX와 보안을 위해 팝업 차단 정책이 존재한다. 사용자의 직접적인 클릭 이벤트가 아닌 경우나, window.open() 메서드를 통한 접근에 제한을 두고 있다.
MDN 문서를 보면 아래와 같이 나와있다.
null is returned if the browser fails to open the new browsing context, for example because it was blocked by a browser popup blocker.
브라우저 팝업 차단기에 의해 차단되는 등의 이유로 브라우저가 새 브라우징 컨텍스트를 열지 못하면 null이 반환됩니다.
https://developer.mozilla.org/en-US/docs/Web/API/Window/open
새 창에 대한 참조를 얻지 못한다는 의미이지, 실제로 창이 열리지 않는다는 의미는 아니다.
브라우저는 사용자의 클릭 이벤트에 의한 window.open() 호출은 허용하고 새 창은 열어주지만, 보안상의 이유로 그 창에 대한 코드적인 접근(Window 객체)은 제한하는 것이다.
따라서 창은 열리지만 window.open()은 null을 반환하고 그로 인해 우리의 isWindowOpened가 false가 되어 API 호출이 이루어지지 않는 상황이 발생했던 것이다.
해결책
window.open()과 <a> 태그
브라우저에서 새 창을 여는 방법으로 window.open() 메서드와 <a> 태그를 사용하는 방식이 있다. window.open()은 JavaScript API로, 프로그래밍적으로 새 창을 열 수 있게 해주지만 앞서 이야기한대로 브라우저의 팝업 차단 정책의 영향을 많이 받는다. 브라우저 설정에 따라 차단되거나 팝업 차단 알림이 발생할 수 있으며, 브라우저마다 동작이 달라질 수 있다는 단점이 있다.
반면 <a> 태그는 HTML 표준 요소로, 브라우저의 기본 동작을 사용한다. 팝업으로 간주되지 않아 브라우저의 차단 정책에서 자유롭고, 사용자의 브라우저 설정을 자연스럽게 따르게 된다. HTML 표준을 따르기 때문에 모든 브라우저에서 일관되게 동작하며, 모바일 브라우저와의 호환성도 보장된다.
물론 window.open()의 반환값을 무시하고 항상 true를 반환하도록 수정하는 방법도 있지만, 웹 표준을 따르고 브라우저의 기본 동작을 활용하는 <a> 태그 방식이 더 안정적인 해결책이라고 생각했다.
요약
- window.open()이 보안상의 이유로 null을 반환할 수 있다.
- 브라우저의 팝업 차단 정책이 예상치 못한 동작을 유발할 수 있다.
- 브라우저 API를 사용할 때는 보안 정책과 제약사항을 먼저 확인하고, 공식 문서를 통해 정확한 동작 방식을 이해하는 것이 중요하다.
references
https://developer.mozilla.org/en-US/docs/Web/API/Window/open
'Web, Front-end' 카테고리의 다른 글
[React] useEffect의 내부적인 동작 (3) | 2024.12.13 |
---|---|
[Typescript] 사진과 영상을 FormData로 서버에 전송하기 (6) | 2024.09.19 |
[Javascript] 이벤트 전파 (1) | 2024.08.27 |
[Javascript] 이벤트 핸들러 등록 (0) | 2024.08.27 |
[Javascript] const 키워드 (0) | 2024.06.05 |
컴퓨터 전공 관련, 프론트엔드 개발 지식들을 공유합니다. React, Javascript를 다룰 줄 알며 요즘에는 Typescript에도 관심이 생겨 공부하고 있습니다. 서로 소통하면서 프로젝트 하는 것을 즐기며 많은 대외활동으로 개발 능력과 소프트 스킬을 다듬어나가고 있습니다.
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!