この記事で記載していることの要約

AdBlockはファイル名に「ad」等の広告系の名前がついた画像ファイル等のリクエストを送信しないようにしている。
対策として以下２つを私は考えた
- 広告以外の画像にも「ad」などの文字を入れ、一緒に転送させないようにする
- JavaScriptで広告の表示が失敗した時にHTMLのbody要素を変更する。
２つ目の対策をしても、ブラウザのJavaScript実行を無効にされたら意味がない。。。

はじめに

Webサイトを閲覧した時に広告をブロックするAdBlockはどうやって広告をブロックしているのか気になった。
あやつは「ad」とかの広告っぽい文字列が入った画像ファイルのリクエストをさせないようにしていると聞いたので確かめてみる。
ついでに、adblockによって広告の表示が無効となった場合の対処も未熟ながら考えたので軽い気持ちで読んでいただければと思います。

AdBlockが動作する環境を作る

つかうもの

f:id:pzdl-HIRAKU:20191212214043p:plain — chrome

f:id:pzdl-HIRAKU:20191212213808p:plain — adblock

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>あどテスト</title>
</head>
<body>
<main>
  <div class="main-content">
    <p>Hello World</p>
    <img src="./img/ad_1.png" alt="広告がここに表示される" />
    <p>Hello World</p>
  </div>
</main>
<script>
</script>
</body>
</html>

＜ブラウザの動作＞

ブラウザはhtmlを読み込んでパースを行う。
パース後、表示する画像である「ad_1.png」が必要だとわかる。
再度リクエストを送り画像を取ってこようとする。
しかし「ad」という広告っぽい文字が含まれているためadblockがリクエストをブロックしている。

動作

ほーん。。。AdBlockを有効にすると確かに「ad_1.png」取得のリクエスト阻止されており、ブラウザが画像を取ってこれず描画されていない。

AdBlock無効時

AdBlock有効時

対策をしてみる

対策と言っても大したことじゃないです。。。
img要素でエラーが発生したら、上記ソースのmainタグ内をごろっと無くすだけです。
img要素でエラーが発生した場合、問答無用でbodyをすげ替えるのでそのままは使えません。

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>あどテスト</title>
</head>
<body>
<main>
  <div class="main-content">
    <p>Hello World</p>
    <img src="./img/ad_1.png" alt="広告がここに表示される" />
    <p>Hello World</p>
  </div>
</main>
<script>
  let adImageElement = document.querySelector("img");
  // img要素でエラーが発生した場合にmain要素を削除し、bodyへp要素を挿入する。
  adImageElement.addEventListener("error", () => {
    console.log("エラーが発生しました。")
    // main要素の取得と削除
    let mainElement = document.querySelector(".main-content");
    mainElement.parentNode.removeChild(mainElement);

    // 挿入するp要素の生成
    let pElement = document.createElement("p");
    pElement.innerHTML = "AdBlock active!";

    // bodyへp要素の追加
    let bodyElement = document.querySelector("body");
    bodyElement.appendChild(pElement);
    console.log("body要素内を全て削除しました。")
  });
</script>
<noscript>
    JavaScriptが無効です
</noscript>
</body>
</html>

動作

img要素でエラーが発生するとmain要素を削除し、bodyへ「AdBlock active!」だけを挿入します。

結果

ブラウザ上でJavaScriptを実行しないようにした結果

対策はJavaScriptで行なっているので、ブラウザ上でJavaScriptを行わせないようにすれば対策自体が無効となってしまう。

終わりに

調べる前は調べてもわからないんだろーなーと思っていましたが、実際に動かしてみると、広告系の要素のリクエストをブラウザが送らないようにブロックしてるんだなーとざっくり理解できました。
気になることを調べて何となくでも理解できるのは気持ちがいいものですね。

Out Of My Memory

雨垂れ石を穿つ

AdBlockの仕組みと対策について