Anti Spambot

ホームページからメールアドレスを収集あるいはスパムを送信してくるボット（spambot）を防ぐJavaScriptです。onclick()を受け取ると、動的にリンクやメールドレスを作成し、移動や表示をします。対象のアドレスは、JavaScriptあるいはhtmlの<script>タグにアドレスを難読化して記述します。

単純な方法ですが、この方法にしてからお問合せフォーム経由のスパムは一通も届いていません。

実行画面

「お問い合わせフォームに移動」をクリックすると、本サイトのお問い合わせフォームに移動します。また、「メールアドレスを表示」をクリックするとメールアドレスが表示されます。

お問合せフォームに移動

メールアドレスを表示

ブラウザでソースコードを表示させてみてください。本ページは、<script>タグにJavaScriptを記述しましたが、移動先とメールのアドアドレスが分からないようになっています。

移動版・ソースコード

const targetに移動先のアドレスを代入します。この時、アドレスを簡単に解析されないよう整数（ASCII）で記述します。外部JS（JavaScript）の場合と内部JSの場合をそれぞれ紹介します。

外部JavaScript

// move_href.js
function main {
  const target = String.fromCharCode(
    46,46,47,46,46,47,99,111,110,116,97,
    99,116,47,99,111,110,116,97,99,116,
    95,102,111,114,109,46,104,116,109,108
    );

  document.getElementById("target").onclick = function() {
    window.location.href = target;
  };
}

main();

例では、同じディレクトリにJavaScriptを設置しています。また、defer属性を付けているので、ページ読み込み後に実行されます。

<!-- HTML -->
<head>        
  <script defer src="./target.js"></script>
</head>        

<body>
  <div id="target">お問合せに移動</div>
</body>

内部JavaScript

<!-- HTML -->
<head>
  <script>
    function moveTarget() {
      const target = String.fromCharCode(
        46,46,47,46,46,47,99,111,110,116,97,
        99,116,47,99,111,110,116,97,99,116,
        95,102,111,114,109,46,104,116,109,108
        );
      
      window.location.href = target;
    }
  <script>
<head>

<body>
  <div id="target" onclick="moveTarget()">お問合せフォームに移動</div>
</body>

表示版・ソースコード

const targetに表示したいアドレスを代入します。この時、アドレスを簡単に解析されないよう整数（ASCII）で記述します。外部JS（JavaScript）の場合と内部JSの場合をそれぞれ紹介します。

外部JavaScript

// show_mail.js
function main(){
  const str = String.fromCharCode(
    101,120,115,109,112,108,101,64,112,115,
    105,112,115,105,110,97,46,106,112
    );

  const target = document.getElementById("target");
  target.onclick = function() {
    target.innerText = str;
  }
}

main();

内部JsvaScript

<!-- HTML -->
<head>
  <script>
    function showTarget(){
      const str = String.fromCharCode(
        101,120,115,109,112,108,101,64,112,115,
        105,112,115,105,110,97,46,106,112
        );

      document.getElementById("target").innerText = str;
    }
  <script>
<head>

<body>
  <div id="target" onclick="showTarget();">メールアドレスを表示</div>
</body>

CSSの一例

CSSを紹介しますがあくまでも一例です。

/* target.css */

#target {
  display: inline-block;
  background: white;
  cursor: pointer;
  line-height: 1.8em;
  padding: .5em 2em;
  margin: 2em;
  border: 1px solid #333;
  border-radius: 2em;
  word-break: break-all;
}

#target:hover  {
  background: ghostwhite;
}

更新情報

作成日：2023-03-11