CloudflareはEmail Obfuscationスクリプトを修正した（私が原因かもしれない）

Cloudflare email obfuscationとは何か？

Cloudflare Email Address Obfuscationは、ページ上のメールアドレスを人間の訪問者には表示させたまま、メールハーベスターやボットから隠すScrape Shieldの機能である。すべてのCloudflareゾーンでデフォルトで有効になっている。

最終レビュー：Arjen Karel（2026年4月）

2026年4月更新：Cloudflareによる修正 CloudflareのプロダクトマネージャーがLinkedInで私にメッセージを送ってきた。彼はこの記事を読み、email-decode.min.jsにdefer属性を追加した。Cloudflareの公式ドキュメントでも、このスクリプトがレンダリングをブロックしなくなったことが確認できる。

deferの追加は1行の変更である。最初から設定されていなかった理由は、おそらくCloudflareが、DOMContentLoadedの前にアドレスがデコードされることに依存するサイトを壊さないことを確認したかったからだろう。チームの誰かがその作業を行った。功績は彼らにある。

仕組みはシンプルだ。Cloudflareのエッジプロキシは、HTMLをスキャンしてメールアドレスのように見えるものを探す。各アドレスをXORエンコードされた16進数の文字列に置き換え、ブラウザでアドレスをデコードするためにemail-decode.min.jsという小さなスクリプトを注入する。このスクリプトは約1.2 KBで、現在はdeferで読み込まれ、実行後にDOMから自身を削除する。

最近まで、このスクリプトはasyncやdeferで読み込まれていなかった。レンダリングをブロックしていたのだ。しかも、ほとんどの訪問者が気づかない、あるいは必要としない機能のためにこれを行っていた。これがこの記事で当初説明した状況であり、Cloudflareが修正した理由である。

.

かつてCloudflare email obfuscationがCore Web Vitalsに与えていた影響

.

deferの修正前は、email-decode.min.jsスクリプトはレンダリングブロックリソースとして注入されていた。ブラウザはページのレンダリングを続行する前に、このスクリプトをダウンロード、解析、実行しなければならなかった。これには3つの結果があった。

1. 重要なレンダリングウィンドウ中にネットワーク帯域幅を奪い合い、Largest Contentful Paintを遅延させた。
2. メインスレッドをブロックし、Interaction to Next Paintを「改善が必要」の領域に押しやる可能性があった。
3. 最大5つのLighthouse監査警告を引き起こした：レンダリングブロックリソースの排除、メインスレッドの長いタスクの回避、JavaScript実行時間の短縮、クリティカルなリクエストチェーンの回避、効率的なキャッシュポリシーでの静的アセットの提供。

deferが設定された現在、スクリプトはHTMLの解析と並行してダウンロードされ、ドキュメントの解析後に実行される。レンダリングブロックの警告は消えた。

修正後に残された問題

メインスレッドは依然として1.2 KBのJavaScriptを解析し、実行しなければならない。デスクトップでは何でもないことだ。しかし、CPUがビジーなローエンドのAndroidスマートフォンでは、メインスレッドの小さなタスクがINPの予算を削り取る。INPのヘッドルームの最後の50ミリ秒をすでに争っている場合、このスクリプトはキューに追加されるもう1つのタスクとなる。

Cloudflareが修正しなかったより大きな問題は以下の通りだ。

SEOへの悪影響

Cloudflareはメールアドレスを/cdn-cgi/l/email-protection#[hex]を指すリンクに置き換える。これらのURLは、Googlebotを含むクローラーに404を返す。その結果、Google Search Consoleで「ソフト404」エラーが発生する。AhrefsやScreaming FrogなどのSEO監査ツールは、これらを壊れた内部リンクとして報告し、実際のクロールの問題を隠すノイズを生み出す。Cloudflareでemail obfuscationを有効にしている場合は、Search Consoleのカバレッジレポートでこれらのファントムエラーを確認すること。

Cloudflare email obfuscationはそもそも安全か？

そうでもない。Cloudflareは、キーがエンコードされた文字列自体に埋め込まれているシングルバイトのXOR暗号を使用している。Cloudflareで保護されたすべてのサイトは同じデコードメカニズムを使用している。スパマーは、すべてのサイトからメールアドレスを抽出するためにデコーダーを1つ実装するだけで済む。

セキュリティ研究者は、エンコードが簡単に元に戻せることを実証している。Spencer Mortensenの2026年の難読化の調査では、ハニーポットのメールアドレスを使用して、300以上の異なるスパマーに対して25の異なる方法をテストした。単純なCSSのdisplay:noneというテクニックでさえ、ハーベスターに対して100%のブロック率を達成した。ボットからメールアドレスを隠すために、deferされたJavaScriptは必要ない。

それでも無効にすべきか？

email obfuscationが必要ない場合（そしてほとんどのサイトでは必要ない）、これをオフにすると、ソフト404のクロールエラーとメインスレッドの最後の数ミリ秒の作業が取り除かれる。方法は以下の通りだ。

1. Cloudflareのダッシュボードにログインする。
2. Security > Settings（または古いダッシュボードレイアウトの場合はScrape Shield）に移動する。
3. Email Address ObfuscationをOFFに切り替える。

これだけだ。スクリプトはすぐに消える。Cloudflareのパフォーマンス設定の完全版については、Core Web Vitalsに合格するための最適なCloudflare設定を参照すること。

Configuration Rulesでページごとに無効にする

コンタクトページにはemail obfuscationを適用したいが、トラフィックの多いランディングページには適用したくない場合は、Configuration Ruleを使用する。

1. Rules > Configuration Rulesに移動する。
2. 新しいルールを作成し、名前を付ける（例：「ランディングページでのemail obfuscationの無効化」）。
3. 一致基準（ホスト名、URLパス、またはその両方）を設定する。
4. Email Obfuscation設定を追加し、Offに設定する。
5. デプロイする。

また、HTML内の個別のメールアドレスをコメントで囲むことで除外することもできる：<!--email_off-->email@example.com<!--/email_off-->

難読化が必要な場合：自分で実装する

ボットからメールアドレスを隠したい場合は、ユーザーが興味を示す前にスクリプトを配信することを含まない、はるかに優れた方法がある。最適なアプローチは、IntersectionObserverをアタッチし、メールがスクロールして表示されたときにジャストインタイムでデコードすることだ。これは、YouTubeの埋め込みからGoogle Mapsに至るまで、あらゆるものに使用しているのと同じdefer until neededパターンである。

難読化されたメールを作成する

<a
 class="email-hidden"
 href="#"
 data-email="aW5mb0BleGFtcGxlLmNvbQ==">
 [email-hidden]
</a>

IntersectionObserverをアタッチする。このJavaScriptの一部をページの下部に配置する。

<script>
const emailtag = document.querySelector('.email-hidden');
let observer = new IntersectionObserver((entries) => {
  entries.map((entry) => {
    if (entry.isIntersecting) {
      let script = document.createElement('script');
      script.onload = function () {
        emaildecode(entry.target)
      };
      script.src = 'decode-email.js';
      document.head.appendChild(script);
    }
  });
}).observe(emailtag);
</script>

email-decodeスクリプトdecode-email.jsをアップロードし、メールのデコード機能を自分が選んだデコーディングライブラリに置き換える。

const emaildecode = (e) => {
	let email = atob(e.dataset.email);
	e.href = 'mailto:'+email;
	e.innerHTML = email;
}

結果を確認する

<a href="mailto:info@example.com">info@example.com</a>

メールは、訪問者がスクロールして表示させたときにのみデコードされる。INPへの影響はゼロで、Googlebotのソフト404エラーもなく、base64エンコーディングはCloudflareのXOR暗号と比べて安全性が劣ることはない。実際の訪問者による改善を検証するには、Real User Monitoringを設定すること。Lighthouseスコアはデバッグには役立つが、Googleがランキングに使用するのは実際のユーザーからのフィールドデータである。