ろぼいんブログ
更新：

Cloudflareのメールアドレス難読化でスパムメール対策

CloudflareのScrape Shieldの設定画面のスクリーンショット

インターネット上で活動する上で避けては通れないのが、スパムメールの問題です。とくにWebサイトにメールアドレスを掲載すると、爆速でボットが飛んできてスパムメールを送り付けてきます。

このような問題に対して、Cloudflareのメールアドレス難読化機能を利用することで、人間の訪問者には影響を与えずに、メールアドレスを保護できます。今回は、Cloudflareのメールアドレス難読化機能について解説します。

Cloudflareメールアドレス難読化機能とは？

Cloudflareのメールアドレス難読化機能を利用することで、Webページ上に表示されるメールアドレスをボットから隠蔽し、人間の訪問者にのみ表示させることが可能になります。この機能は、訪問者には一切の変化を感じさせることなく、自動的にメールアドレスを保護します。

この機能を有効化することで、Webページのデザインや操作感に影響を与えることなく、セキュリティ対策を講じることができます。

難読化機能のメリット

メールアドレスを狙うハーベスターやボットはインターネット上にあふれており、見つけたメールアドレスをスパムメールのリストに追加します。これが原因で多くの不要なメールが送信されてしまいます。

Webサイトの管理者は、メールアドレスを``hoge★example.com``と書き換えるなど、さまざまな方法でこの問題に対処してきました。しかし、これらの方法ではメールアドレスをクリックして直接メールを送信するという便利さが失われてしまいます。

Cloudflareのメールアドレス難読化機能を使えば、このようなデメリットなく、メールアドレスを保護できます。

設定方法

Cloudflareに登録すると、メールアドレス難読化機能は自動的に有効になります。しかし、何らかの理由でこの機能を無効にしたい場合は、Cloudflareのダッシュボードから簡単に設定変更が可能です。

  1. Cloudflareダッシュボードにログインします

  2. 複数のアカウントにログインしている場合は、対象のアカウントを選択します

  3. Webサイトを選択します

  4. サイドバーからScrape Shieldを選択します

    Cloudflareのダッシュボードのスクリーンショット

  5. ［メールアドレス暗号化］のトグルスイッチをオンまたはオフにします

    CloudflareのScrape Shieldの設定画面のスクリーンショット

特定のメールアドレスの難読化を防ぐ

上記の手順で、サイト全体でメールアドレスの難読化を無効にできます。一方で、サイト全体では難読化を有効にしつつ、特定のメールアドレスの難読化を無効にすることもできます。メールアドレスではないものが誤って難読化され、[email protected]と表示されてしまう場合も、この方法で対処できます。

もっとも手軽なのは、HTMLのコメントを使ってメールアドレスを囲む方法です。次のように、メールアドレスをemail_offというコメントで囲むことで、そのメールアドレスの難読化を無効にできます。

try{(()=>{function a(e){if(!e)return;let t=e.getAttribute("tabindex")!==null,n=e.scrollWidth>e.clientWidth;n&&!t?e.setAttribute("tabindex","0"):!n&&t&&e.removeAttribute("tabindex")}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),i=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,n,r;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),n&&clearTimeout(n),r&&i(r),n=setTimeout(()=>{r&&i(r),r=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function d(e,t){e.querySelectorAll?.(".expressive-code pre > code").forEach(n=>{let r=n.parentElement;r&&t.observe(r)})}var s=l(a);d(document,s);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(n=>{d(n,s)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{d(document,s)});})();}catch(e){console.error("[EC] tabindex-js-module failed:",e)}try{(()=>{function i(o){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand("copy")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\u007f/g,` `);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}function s(o){o.querySelectorAll?.(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();}catch(e){console.error("[EC] copy-js-module failed:",e)}
<!--email_off-->[email protected]<!--/email_off-->

他にも、AJAX通信でメールアドレスをJSON形式で返し、サーバーがapplication/jsonというコンテンツタイプを返すようにする方法や、 構成ルール を作成する方法などがあります。

デフォルトで難読化されないもの

意図しない挙動を防ぐため、次のような場合はデフォルトで難読化されません。

  • href属性以外の属性の値
  • 特定のHTMLタグ内（<script>、<noscript>、<textarea>、<xmp>、<head>タグ）
  • MIMEタイプがtext/htmlまたはapplication/xhtml+xmlでないページ
  • Cache-Control: no-transformヘッダーを使用している場合
  • Cloudflare Worker によって追加されたHTML/JSコード

まとめ

Cloudflareのメールアドレス難読化機能を利用することで、Webページ上に表示されるメールアドレスをボットから隠蔽し、人間の訪問者にのみ表示させることが可能になります。この機能を有効化することで、Webページのデザインや操作感に影響を与えることなく、セキュリティ対策を講じられます。

また、サイト全体で難読化を有効にしつつ、特定のメールアドレスの難読化を無効にできます。このようにCloudflareのメールアドレス難読化機能を使えば、スパムメール対策を実施しつつ、メールアドレスの利便性を損なうことなく、Webサイトを運営できます。

参考

#Cloudflare#プログラミング#解説#Web開発#セキュリティ#プライバシー

おすすめアイテム

※このリンクを経由して商品を購入すると、当サイトの運営者が報酬を得ることがあります。詳細はこちら。

このサイトを支援する

Buy Me a CoffeeまたはGitHub Sponsorsで支援していただけると、サイトの運営やコンテンツ制作の励みになります。定期的な支援と一度限りの支援がありますので、お間違いのないようにお願いします。

Buy me a coffee

著者のアイコン画像
ろぼいん
XMisskeyGitHubQiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。

関連記事

注目記事

最新記事