[Solved] Failed to Load Resource 'net::ERR_BLOCKED_BY_CLIENT' Mean and How Can You Fix It?

Chris Love

Last Updated - Sat Jan 09 2021

Have you ever had issues with web assets, like style sheets or images, not loading?

Are you seeing 'Failed to Load Resource net::ERR_BLOCKED_BY_CLIENT' in the developer console?

You may also see a similar message: 'requests to the server have been blocked by an extension'.

This is bad because it can break your web app or at least not make it look right.

Typically, this is due to either a file missing from the server or a typo in the URL. There are edge cases where the request is not missing (status 404) but something else is blocking the request.

There are many levels a request can be blocked. The cause could be in the network transport layer, a proxy server or router between you and the server. It might also be something in the browser.

Last night I received an e-mail from a reader who wanted to let me know that some images on the blog post were not rendering. He and I both assumed it was a 404 issue.

As I begin troubleshooting the problem I realized the images were not a missing or typo. The images rendered in Microsoft Edge. In Chrome, the images were nowhere to be found.

FRUSTRATING!!!!

Upon further investigation, I notice the request to those images were not 404. but an obscure error message in the network waterfall,

'Failed to Load Resource net::ERR_BLOCKED_BY_CLIENT'

All sorts of crazy scenarios went through my head. I wondered if there was a header issue, a server configuration error or possibly malformed image that Chrome that did not like.

So, I did what any good developer or system admin does...

>I Bingled (looked it up in the search engines LOL) the problem. Low and behold I found several StackOverflow questions about the 'net::ERR_BLOCKED_BY_CLIENT' issue.

Solving the Problem

It turns out when the network waterfall list this error, it means a browser extension blocked the request. The most common culprit is an ad blocker like AdBlock Plus.

In short your requests to server have been blocked by an extension. Specifically AdBlock Plus was blocking my image.

But how can I fix it?

I optimize all my images by creating a responive image array. I place meta-data in their names to differentiate each size.

The array is generated by a responsive image optimization service I am building. As the images are generated the image width and height is appended to the file name. We do this so it is easier for humans to know how large the image is and help software parse images by their name.

Fortunately, the blocked images all have the same dimensions, 300 x 600 pixels. The service appended '-300x600.' to their file names.

While this normally would not pose an issue, that particular text pattern matches a pattern in the AdBlock Plus the expression list.

Beating AdBlock Plus

If you're not familiar with the way the AdBlock extensions, "browser saftey" extensions or spam filters work, they use regular expressions to look for text patterns. When they find a match, they block the request or the e-mail.

I was unsure how to determine what was causing the problem. Fortunately, AdBlock Plus provides a window into how the extension processes requests.

In the Chrome developer tools, when AdBlock plus is installed, you'll notice an extra panel called AdBlock. This will list all the network requests just like the network waterfall panel, except the list visually shows you how the AdBlock extension processed that particular request. Because these images were blocked the list shows what causes the assets to be blocked.

As you can see in the images were blocked because of the '-300x600.' pattern in the name. According to the Filter column the match is part of the EasyList criteria AdBlock Plus uses. My solution is to adjust the naming algorithm so the image dimension pattern does not match the AdBlock Plus pattern.

Consumers can disable extensions like AdBlock Plus, but it is doubtful they will. They are using it for a reason.

Instead it is up to us, developers, devops and site owners to catch these sorts of issues. Rename our files to avoid unnecessary censorship.

That is how the bad guys get around these extensions. You are not doing anything bad, right???

So make this part of your routine audit. Make sure your page loads correctly in browsers with popular extensions enabled.

The next time you see this obscure error message in your network tree and can't figure out why, it might be due to a browser extension. Hopefully you've your issues is in an extension like AdBlock Plus that will let you know why the request was blocked.

Now that I know the '-300x600.'' character string is causing the Failed to Load Resource ERR_BLOCKED_BY_CLIENT problem I will go back and adjust my naming logic to adjust the pattern with something slightly different so that does not match the extension's algorithm.