ツッチー
今回はホームページやブログでメールアドレスを掲載する際に気をつけたい「HTMLに直書きしない工夫」についてお話します。
Table of Contents
メールアドレスをHTMLに直書きするとどうなる？
ホームページのHTMLにメールアドレスをそのまま書くと、悪意あるスパムメール送信ロボット（スパムボット）がそれを読み取り、メールアドレスを収集して迷惑メールの標的にされてしまうリスクがあります。
スパムメールを避けるために、メールアドレスをHTMLソースに直接書かない工夫が必要です。
JavaScriptを使ったメールアドレスの難読化方法
そこでおすすめしたいのが、メールアドレスを文字コードのHTMLエンティティ（例：A）に変換し、さらにJavaScriptで動的に表示する方法です。この方法では、メールアドレスをいくつかのパーツに分けて保持し、ページ読み込み時にJavaScriptで組み合わせて表示・リンクを生成します。
例えば、以下のコードのように実装します（WordPressのElementorでページを編集する際は「HTML」ウィジェットの中に以下のコードを書き込みます）。
続きを読むには無料会員登録またはログインが必要です。
「SIGN IN / JOIN」ボタンから登録してください。
<span id="email-obfuscated"></span>
<noscript>Please enable JavaScript to view the email address.</noscript>
<script>
(function(){
// メールアドレスのパーツを別々に保持
var user = ['i', 'n', 'f', 'o'];
var domain = ['e', 'x', 'a', 'm', 'p', 'l', 'e', '.', 'c', 'o', 'm'];
var at = '@'; // @は普通の文字で保持
// 配列を文字列に変換
function arrayToString(arr) {
return arr.join('');
}
// 表示用のメールアドレスを作成（＠も普通の文字）
var displayEmail = arrayToString(user) + at + arrayToString(domain);
// mailtoリンクは分割して作る（mailto: + user@domain）
var mailto = 'mailto:' + arrayToString(user) + '@' + arrayToString(domain);
// 文字列をHTMLエンティティに変換して難読化（表示部分のみ）
function encodeEntities(str) {
var encoded = '';
for(var i = 0; i < str.length; i++) {
encoded += '&#' + str.charCodeAt(i) + ';';
}
return encoded;
}
// 表示用メールアドレスをHTMLエンティティ化（@も含む）
var encodedDisplayEmail = encodeEntities(displayEmail);
// メールリンクのHTMLを生成（表示部分はエンティティ化したものを使う）
var link = '<a href="' + mailto + '">' + encodedDisplayEmail + '</a>';
// 表示部分に挿入
document.getElementById('email-obfuscated').innerHTML = link;
})();
</script>
なぜコード冒頭にspanとnoscriptのタグを使うのか？
このコード冒頭の2行には重要な役割があります。
<span id="email-obfuscated"></span>
<noscript>Please enable JavaScript to view the email address.</noscript>
spanタグの役割
JavaScriptで組み立てたメールアドレスのリンクをこの空の<span>に差し込みます。
あらかじめHTMLにメールアドレスを直書きせず、JavaScriptで動的に表示するための場所です。
noscriptタグの役割
JavaScriptを無効にしているユーザー向けに「JavaScriptを有効にしてください」というメッセージを表示します。
最近はほとんどのブラウザでJavaScriptが有効ですが、念のためのフォールバック表示です。
Elementorなど編集画面でJavaScriptが原因で問題になる場合の注意点
WordPressのElementorなどライブ編集画面では、document.write()を使ったJavaScriptは既存HTMLを消してしまい、編集画面が真っ白になるトラブルがあります。
私は最初JavaScriptでメールアドレスを動的生成しようとした際、document.write()を使ったコードを書いていたのですが、ページを下書き保存後にWordPressのElementorのライブ編集画面がメールアドレスの1行のみを残して真っ白になり、ページ全体の編集が不能になるトラブルが発生しました。
幸いコードを編集するタブがブラウザ上に残っていたため、そこからコードを修正して命拾いしましたが、非常に焦った経験でした。
– 悪いコード例（HTMLエンティティの部分は省略しています） –
<script>
var user = "info";
var domain = "example.com";
var email = user + "@" + domain;
document.write('<a href="mailto:' + email + '">' + email + '</a>');
</script>
<noscript>Please enable JavaScript to view the email address.</noscript>
document.write()はページ読み込み後に実行されると、既存のHTMLを全部上書きしてしまいます。そのため、Elementorのライブ編集画面や他の編集環境では使わない方が安全です。
今回ご紹介したinnerHTMLで挿入する方法は、この問題を回避しています。
ブラウザの検証ツールでメールアドレスが見えるのは問題ない？
「JavaScriptで隠しているはずなのに、ブラウザの検証ツール（F12キー）でメールアドレスが普通に見えるのは安全なの？」という疑問も多いです。
安心してください。これは正常な挙動です。
JavaScriptはブラウザ上でHTMLを動的に生成します。
そのため、ページがレンダリングされた後はメールアドレスが普通のリンクタグとして存在し、検証ツールでも見えます。
しかし、スパムボットが解析するのはサーバーから送られてくる「生のHTMLソース」です。
JavaScriptを実行しない単純なスパムボットは、元のHTMLにメールアドレスがなければ取得できません。
ただし100％スパムを防げるわけではない
高度なスパムボットの中にはJavaScriptを実行してメールアドレスを取得するものもあります。
そのため、今回の方法はスパム対策の一つの手段であり、絶対に防げるわけではありません。
それでもメールアドレスを生のHTMLに直書きするよりは、迷惑メールリスクをかなり下げることが可能です。
まとめ
- メールアドレスをHTMLに直書きするとスパムリスクが高まる。
- メールアドレスをパーツに分けてJavaScriptで動的に表示し、HTMLエンティティ化すると収集されにくくなる。
<span>タグに動的表示し、<noscript>でJavaScript無効時のメッセージを用意する。- Elementor等の編集画面では
document.write()を使わない方法が安全。 - ブラウザ検証ツールでメールアドレスが見えても元HTMLにないためスパムボットは見つけにくい。
- 完璧な防御策ではないが、迷惑メール対策として有効。
