Ad Blockers and why your innocent files may be getting blocked

The other day I noticed a new image was not displaying on a site I was working on. Doing an inspection of the image, I could see that the img src path was correct, and the file was loading fine. But there was also a style="display: none !important;"  which was being added to this <img> tag. Removing that style resulted in it coming back instantly.

I also noticed a Failed to load resource: net::ERR_BLOCKED_BY_CLIENT message in the console.

Turns out the ad blocker I was using, AdBlock Plus, blocks anything here:

/media/ad/*

The path to my blocked file happened to be here:

/media/ad/76/ad763f1c400bea2c54c3d14008a968d331720090.jpg

That path was generated automatically by a class in a bundle I created for managing file names and paths in Symfony: MassMediaBundle

It creates a filename using a hash algorithm, and splits letters off the first part of the name to create folders. In this case, it just happened to create one which started with the letters “ad”, causing AdBlock Plus to filter it when preceded by a folder named: /media/

It seems that /media/ad/ was a popular enough destination for advertisements that it got added to the AdBlock filter list, which you can have a look at here:

https://easylist-downloads.adblockplus.org/easylist.txt

I see 3 possible options:

1) Ignore the problem, and allow AdBlock users (millions of people) to not view your images.
2) Tell your users to whitelist your site in their ad blocker, and hope they will comply.
3) Rename the filtered folder(s) to something unlikely to be blacklisted.

Option 3 is the route I ended up taking in this case.

Just a friendly reminder to test your websites in popular ad blockers, and to consider the effect your upload paths can have on files being filtered by them.