Blog

2021年8月4日

メールアドレスをHTMLにベタ打ちせず、JSで挿入するためのブックマークとスクリプトを作った

メールアドレスをそのまま下記のようにHTMLに入れると、スパムメールがくるという話は聞いたことあるでしょうか。

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

mailtoで直接メーラーが立ち上がるので、お客さんがお問い合わせしやすくなるというメリットがありますが、
一方で、HTMLに直接メールアドレスが埋め込まれるので、自動収集されてスパムメールを送りつけられてしまうというデメリットもあります。

これに対して、文字の一部を★などに変えて、「★を@に変えてくださいね」などの文言を添えておくという対策や、
テキストではなく画像にするという対策があります。

しかし文字を一部変えると、メールを送信するときに、★を@に変えてメールアドレスを変えるという手間が発生してしまいます。画像にすると１からうたなければなりません。

パソコンに慣れていない人が誤送信してしまうリスクがありますし、メーラーを立ち上げるmailtoを実装できません。

そこで、JavaScriptを利用し、ブラウザのロード後にメールアドレスを差し込むという方法で手軽に実装できるように考えました。

１ページに何箇所かあっても大丈夫なように、data属性でJSに文字列を送るようにしました。

メールアドレスをエンコードするブックマークを登録

まず、メールアドレスを文字列じゃないものに変換したものを取得します。

ブックマークレットを作りました。

javascript:(function(){const str=prompt();function henkan(){const arraySplit=str.split('');const ascArray=arraySplit.map(e=>{const num=e.charCodeAt(0);const a=Math.floor(Math.random()*(99+1-1))+1;const b=a+num;return b+'-'+a;});return ascArray;}prompt('',henkan());})()

これをブックマークに追加します。

文字列をアスキーに変換するサイトもあるのですが、「そのサイトで収集されてるかもしれない…」というお客さんが過去にいたので（疑いだしたらキリがないですが、制作者の意図はどうあれ仕組み的には不可ではないので）、ブックマークレットで作ってみました。

エンコードしたメールアドレスを取得する

ブックマークレットを押下し、下記にメールアドレスを入力します。

OKを押して、出てきた数字をコピーしておきます。

HTML側にはdata属性で文字列を指定する

カラの要素を作り、data-ml属性にさっきの数字をペーストします。
classにmladを指定します。

<div class="mlad" data-ml="142-37,148-38,109-7,169-58,105-41,171-72,201-84,134-25,161-64,192-85,60-14,115-5,188-87,196-80"></div>

JavaScriptを記述する

下記をそのまま入れてください。

function mailaddress(){
  const target = document.querySelectorAll('.mlad');
  const mt = String.fromCharCode(120 - 11, 97 + 0, 110 - 5, 89 + 19, 153 - 37, 61 + 50, 76 - 18);
  target.forEach(e =>{
    let str = e.dataset.ml.split(',');
    str = str.map(e => safeEval(e));
    const mad = String.fromCharCode(...str);
    const mailto = '<a href="' + mt + mad + '">' + mad + '</a>';
    e.innerHTML = mailto;
  })
  function safeEval(val) {
    return Function('"use strict";return (' + val + ')')();
  }
}

mailaddress()

body閉じタグ直前に読み込ませるか、HTMLを読んだ後のタイミングで実行してください。