Cloudflareがメールアドレス難読化スクリプトを修正（私がきっかけだったかもしれません）

Cloudflareのメールアドレス難読化とは

CloudflareのEmail Address Obfuscationは、人間の訪問者には通常どおり表示しながら、収集ボットからページ上のメールアドレスを隠すScrape Shieldの機能です。すべてのCloudflareゾーンでデフォルトで有効になっています。

Arjen Karel による最終確認: 2026年4月

2026年4月追記: Cloudflareが修正しました。 CloudflareのプロダクトマネージャーからLinkedInで連絡がありました。この記事を読み、email-decode.min.js に defer 属性を追加したとのことです。Cloudflareの公式ドキュメントでも明記されています。このスクリプトはもはやレンダリングをブロックしません。

defer の追加はわずか1行の変更です。当初適用されていなかったのは、DOMContentLoaded の前にアドレスがデコードされる前提のサイトを壊さないか、Cloudflare側で確認したかったからでしょう。チームの担当者がしっかりと対応しました。評価すべき仕事です。

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

少し前まで、このスクリプトには async も defer も指定されていませんでした。レンダリングをブロックしていたのです。大半の訪問者が気づきもしない、必要ともしていない機能のために。これが、この記事で当初指摘していた状況であり、Cloudflareが修正を行った理由です。

.

Cloudflareのメールアドレス難読化がかつてCore Web Vitalsに与えていた影響

.

defer による修正前、email-decode.min.js は render-blocking リソースとして挿入されていました。ブラウザはページのレンダリングを続行する前に、このスクリプトをダウンロードし、パースして実行しなければなりませんでした。これによって、次の3つの影響が生じていました:

1. クリティカルなレンダリング期間中にネットワーク帯域を奪い合い、Largest Contentful Paint を遅延させていました。
2. main thread をブロックし、Interaction to Next Paint を「改善が必要」の領域へと悪化させる要因になっていました。
3. Lighthouseの監査で最大5つの警告（render-blocking リソースの排除、main thread の long task の回避、JavaScript 実行時間の短縮、クリティカルなリクエストチェーンの回避、効率的なキャッシュポリシーによる静的アセットの配信）を引き起こしていました。

defer が適用された現在、スクリプトはHTMLのパースと並行してダウンロードされ、ドキュメントのパース完了後に実行されます。render-blocking の警告は解消されました。

修正後も残る課題

修正後も、main thread は1.2 KBの JavaScript をパースして実行する必要があります。デスクトップなら何の影響もありません。しかし、CPUに余裕がないローエンドのAndroid端末では、どんな些細な main thread タスクであっても INP バジェットを削り取ります。すでに残り50 msの INP ヘッドルームを確保するのに苦労しているなら、このスクリプトはキューに並ぶ余計なタスクの1つになります。

より深刻な問題、つまりCloudflareが修正しなかった問題は以下のとおりです。

SEOへの副作用

Cloudflareはメールアドレスを、/cdn-cgi/l/email-protection#[hex] を指すリンクに置き換えます。これらのURLは、Googlebotを含むクローラーに対して404を返します。その結果、Google Search Consoleで「ソフト 404」エラーが発生します。AhrefsやScreaming FrogなどのSEO監査ツールはこれを内部リンク切れとして報告するため、本来対処すべきクロール問題を覆い隠すノイズになります。Cloudflareでメールアドレス難読化を有効にしている場合は、Search Consoleのカバレッジレポートでこうした架空のエラーが発生していないか確認してください。

そもそもCloudflareのメールアドレス難読化は安全なのか？

実のところ、安全とは言えません。Cloudflareが使用しているのは、エンコードされた文字列自体にキーが埋め込まれた1バイトのXOR暗号です。Cloudflareで保護されたサイトはすべて同じデコードの仕組みを使っています。スパマーはデコーダーを1つ実装するだけで、そのすべてのサイトからメールアドレスを抽出できてしまいます。

セキュリティ研究者が実証しているとおり、このエンコードはいとも簡単に復元できます。Spencer Mortensenによる2026年の難読化調査では、ハニーポットのメールアドレスを使い、300以上の異なるスパマーを相手に25種類の手法をテストしました。シンプルなCSSの display:none を使った手法でさえ、収集ボットを100%遮断できています。ボットからメールアドレスを隠すのに、defer した JavaScript など不要です。

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

メールアドレス難読化が必要ないなら（大半のサイトでは不要です）、オフにすることでソフト 404 のクロールエラーを解消し、main thread のわずかな処理時間も削ることができます。設定手順は以下のとおりです:

1. Cloudflareのダッシュボードにログインします。
2. Security > Settings（古いダッシュボード構成の場合は Scrape Shield）を開きます。
3. Email Address Obfuscation をOFFに切り替えます。

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

Configuration Rulesを使ってページ単位で無効化する

問い合わせページではメールアドレス難読化を維持しつつ、トラフィックの多いランディングページでは無効にしたい場合は、Configuration Ruleを使用します:

1. Rules > Configuration Rules を開きます。
2. 新しいルールを作成し、名前を付けます（例: 「Disable email obfuscation on landing pages」）。
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>

メールデコード用スクリプト 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がランキング評価に使用するのは実ユーザーの field data です。