광고차단 익스텐션 사용여부 판단은 어떻게 해야 될까?

adblock, ublock origin 같은 광고 차단 extension을 활용하여 페이지에 표시되는 광고들이 로드되지 않도록 하여 페이지를 좀 더 빠르게 로딩받아 사용 할 수 있게 할 수 있다.

하지만 개발자 혹은 페이지를 운영하는 입장에서는 트래픽이 수익으로 이어지지 않게 되니 어떻게 처리해야 될지 고민이 되는 녀식이다.

그 고민을 어떻게 하면 해소 할 수 있을지, 광고차단 사용 탐지 처리를 어떻게 하면 좋을지 알아보고자 한다. (물론 우회할 수 있는 방법은 많을거라 생각이 되어 100% 감지를 보장하지는 않을거라고 생각되자만 말이다)

각 extension는 웹페이지에 어떤 요소를 차단하고 숨겨야 되는지 rule을 통해 결정하게 되는데. 이 rule은 filterList라는 컬렉션으로 부터 제공이 된다. 대표적으로 많이 사용되는 필터리스트는 다음과 같습니다.

https://meeco.kr/Review/34896256 사이트에 들어가서 익스텐션 사용시 요청이 어떻게 처리가 되는지 확인해보겠습니다.

adblock을 사용할 경우 adsbygoogle.js에 대한 요청이 정상 처리가 되지 않는것을 확인 할 수 있습니다.

adsbygoogle.js에 대한 요청이 정상처리되지 않음

이번에는 adblock이 아닌 ublock origin을 사용해보겠습니다. 기대와 달리 adsbygoogle.js 에 대해서 307 응답값을 던지지만 g.js 에 대한 요청은 정상 처리가 되지 않네요.

adsbygoogle.js에 대한 요청에 307 응답을 줌

흠...뭔가 공통으로 filter에 들어가 있을 만한 url에 대하여 요청을 보내보는 방식으로 감지를 해야보는게 좋겠다라는 생각이 듭니다. 테스트를 좀 해봐야 겠습니다.

우선 간단하게 프로젝트를 생성합니다, 저는 vite를 활용해 생성하겠습니다

프로젝트 생성이 됬다면 이제 테스트를 진행해봅시다. 그냥 간단하게 요청에 대한 응답이 정상적으로 들어오는지만 확인하면 되기 때문에 상태값과 header 정보만을 반환하는 HEAD 요청을 보내도록 코드를 작성해줍니다.

추가적으로 여기서는 2개의 url에 대해서 요청을 보낼것이고 각 요청에 대한 응답이 들어오는것을 기다려야 되기 때문에 promise.allSettled 사용합니다.

위 코드를 실행해보면 adblock, ublock origin 혹은 다른 광고 차단 익스텐션 사용시 화면에 Ad Block is detected 라는 문구가 출력되는것을 확인 할 수 있습니다.