先日、とあるWebページを開くと一部の画像やCSSが読み込まれず、壮大にレイアウト崩れを起こしていた。

Chromeのデベロッパーツールを開くと、大量の画像ファイルなどが以下のエラーにより読み込み失敗となっていたのだ。

GET xxxx.png net::ERR_BLOCKED_BY_CLIENT

このエラーについて、サーバー側に問題はなく、メッセージにあるとおりクライアント側に問題があるようで、調べたところChromeプラグイン「Adblock Plus」が読み込みを邪魔しているようだ。

Adblock Plusは、目障りなディスプレイ広告などをブラウザ閲覧時に表示しないようにしてくれるChromeプラグインで、大変便利なものなのだが、今回なぜか広告とは一切関係のないWebサイト内の画像やCSSファイルをブロックしてしまっていた。

さらに調べると、ファイルのパスに原因があるらしく、今回ブロックされたファイルのパス内に「ad」というディレクトリパスが含まれており、どうやらこれがブロックされた原因のようだ。

GET https://hoge.com/img/ad/xxxx.png net::ERR_BLOCKED_BY_CLIENT

この問題の解決法としては、AdblockPlusにホワイトリストの設定を追加すれば良い。

まず、ブラウザ右上にあるのプラグインアイコンをクリックし、歯車メニューを選択する。

すると設定画面が開くので、サイドメニューから「ホワイトリストに登録されているウェブサイト」を選択する。

ここに閲覧したいサイトのドメインを追加すれば先ほどのエラーは解消される。

今回のことを踏まえて、今後Webページを作る際はフォルダやファイル名に「ad」を入れないように気をつけなければならない。