📧 メールアドレス難読化
Webページに載せるメールアドレスを、スパム収集ボット(メールハーベスタ)に拾われにくくするための難読化コードを生成します。HTML実体参照のmailtoリンク、JavaScriptでの分割組み立て、[at]/[dot]置換、CSS方向反転の4方式に対応。入力はすべて端末内で処理し、どこにも送信しません。
入力
生成コード(貼り付け用)
プレビュー(訪問者からの見え方)
⚠ 難読化の限界について
- 難読化は完全な対策ではありません。実体参照の復号やJavaScriptを実行できる高度なボットは、いずれの方式も解読しえます。
- 本当に迷惑メールを避けたい連絡先は、問い合わせフォーム+reCAPTCHA/Turnstile などのボット対策と併用することを推奨します。
- 「JavaScript組み立て」方式は、JavaScript無効環境ではリンクが表示されません。重要な連絡先には実体参照方式や代替表記も併記してください。
- 「CSS方向反転」方式はリンクにならず、コピーすると文字が逆順になります。あくまで簡易的な目くらましです。
解説
Webページにメールアドレスを平文(name@example.com のような生の文字列)で書くと、スパム業者の「メールハーベスタ」と呼ばれる収集ボットに自動で拾われ、迷惑メールが増える原因になります。難読化(オブフスケーション)は、アドレスを人間には普通に読めるまま、機械には拾いにくい形で書く工夫です。本ツールは代表的な4方式のコードをその場で生成し、実際の見え方をプレビューできます。処理はすべてブラウザ内で完結し、入力したアドレスはどこにも送信されません。
「HTML実体参照」方式は、アドレスの全文字を数値文字参照(&#NN; または &#xNN;)に置き換えた mailto リンクを作ります。ブラウザは実体参照を自動的に元の文字へ復号するため、表示・クリック・可逆性は普通のリンクと同じで、しかもJavaScriptが無効でも機能します。単純な正規表現でソースを見るボットには拾われにくい一方、実体参照を復号できる収集ボットには読まれるため万能ではありません。「JavaScript組み立て」方式はアドレスを文字コード配列に分解してリンクを生成し、HTMLソースに平文が残らないのが強みですが、JavaScriptを実行しない環境ではリンクが出ません。
「[at]/[dot] 置換」方式は @ を [at]、. を [dot] に置き換えた表示テキストを作ります。リンクにはなりませんが、HTMLを書けないSNSプロフィールや掲示板に手軽に貼れます。人間は容易に元へ戻せますが、[at]/[dot]を機械的に置換するだけのボットには通用しません。「CSS方向反転」方式は文字列を逆順で書き、CSSの unicode-bidi で見た目だけ正しい向きに戻す手法です。ソース上の並びが逆になるため素朴なボットを惑わせますが、リンクにならず、コピー時に逆順になる欠点があります。
大切なのは難読化に過剰な期待をしないことです。いずれの方式も、実体参照を復号したりJavaScriptを実行したりする高度なボットには解読されえます。難読化は「単純なボットを減らすための一枚の防護」に過ぎず、確実にスパムを止めたい連絡先は、問い合わせフォームにreCAPTCHAやCloudflare Turnstileなどのボット対策を併用するのが安全です。用途に応じて、可読性重視なら実体参照、平文を残したくないならJavaScript、手軽さ重視なら[at]/[dot]置換、と方式を使い分けてください。
よくある質問
難読化すればスパムメールは完全に防げますか?
いいえ。難読化は単純な収集ボットを減らすための手段で、完全な対策ではありません。実体参照を復号したりJavaScriptを実行したりする高度なボットには解読されえます。確実に避けたい連絡先は、問い合わせフォームとreCAPTCHA/Turnstileなどのボット対策の併用を推奨します。
HTML実体参照のリンクは、普通に見えてクリックできますか?
はい。ブラウザは &#NN; のような数値文字参照を自動的に元の文字へ復号するため、表示もクリックも通常のmailtoリンクと変わりません。元のアドレスに正しく戻る(可逆な)出力になり、JavaScriptが無効な環境でも機能します。
JavaScript方式が一番安全ですか?
HTMLソースに平文が残らない点は強みですが、JavaScriptを実行しないボットや、JS無効のブラウザ・一部のメールクライアントではリンクが表示されません。到達性が重要な連絡先では、実体参照方式や代替表記の併記を検討してください。
生成したコードはどこに貼り付ければよいですか?
HTML実体参照・JavaScript・CSS方向反転の各コードは、HTMLを書ける場所(自作サイトのソース、ブログのHTML編集モードなど)の本文に貼り付けます。[at]/[dot]置換のテキストは、HTMLを書けないSNSプロフィールや掲示板にもそのまま貼れます。
件名や本文を入れると何が変わりますか?
mailtoリンク(実体参照・JavaScript方式)のURLに件名(subject)と本文(body)があらかじめ入った状態になります。訪問者がリンクを押すと、その件名・本文が入力済みのメール作成画面が開きます。値は自動的にURLエンコードされます。
16進数の実体参照(&#xNN;)とは何ですか?
数値文字参照には10進数(@)と16進数(@)の2表記があり、どちらもブラウザは同じ文字に復号します。難読化としての効果はほぼ同じで見た目が変わるだけです。HTML実体参照方式のときにチェックで切り替えられます。
CSS方向反転はなぜコピーすると逆順になるのですか?
この方式は文字列を実際に逆順で書き、CSSで見た目の向きだけを反転しています。表示は正しく見えますが、コピーされるのはソース上の並び(=逆順)です。可読性やクリック性が必要な場面には向かない、あくまで簡易的な手法です。
入力したメールアドレスはサーバーに送られますか?
送られません。生成処理はすべてブラウザ内で完結し、入力したアドレス・件名・本文はどこにも送信されません。オフラインでも利用できます。