How to detect if HTTP requests are blocked by a browser extension?

Question

I am trying to detect if a user is using some kind of extension in his browser that could prevent my site from working properly and if so, display a message for the user.

I am testing with an extension called uMatrix, but there are others with a similar approach.

My problem is, that kind of extension will block my HTTP request, but that doesn't return a proper status code (like 403, 404, 500, etc). Instead, when I catch my request, I just get a

Error: Network Error

at [my file name and line number here]

at XMLHttpRequest.handleError (xhr.js:83)

I believe this same error would be thrown in other circumstances, like lack of internet connection, so I can't assume this Network Error means that the user has a "HTTP request blocker".

I was reading a lot about identifying AdsBlocker on this thread and other places, but I don't think it applies to my issue.

Any ideas on how to identify that a user is blocking my HTTP Requests? (Either on purpose or through a browser extension)

Answer 1

I thought I would share here the solution I found, even though I don't think that's the best answer yet.

I am using Axios for my API requests and I found this thread here:

https://github.com/axios/axios/issues/383#issuecomment-234079506

What they suggest it's to check if the response has a status (but in latest Axios, they don't even return a response). If not, it means the server was never reached. That could still mean that there is no internet connection, not necessarily an extension blocked the request. So I adjusted my message to cover both scenarios.

My final code was something like this:

// Note the use of "HEAD", since that will be faster than a "GET"
axios.head(server_url_for_testing).catch(function(error) {
  if (!error.response) {
    // Display my warning message
  }
})