브라우저 차단 팝업 문제

각 블로그의 포스트가 있는 컴포넌트를 클릭 하게 되면 조회수 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 표준을 따르기 때문에 모든 브라우저에서 일관되게 동작하며, 모바일 브라우저와의 호환성도 보장된다.