メールアドレスをWebに書くときのホスピタリティ

このように書くと、たぶん、きっと、おそらく、、、クロールbotに捕食されにくい。はず。知らんけど。

脆弱性診断などで引っかかった場合、この方法でパスできる。

ポイントは、CSSの content: attr(); を使うこと。

HTML

<a class="email" data-domain="domain" data-user="user" data-subject="タイトル" data-body="本文">@</a>

CSS

.email {
  cursor: pointer;
}

.email::before {
  content: attr(data-user);
}

.email::after {
  content: attr(data-domain);
}

JavaScript

var mailto = document.querySelector('.email')
mailto.addEventListener('click', onClick)

function onClick () {
  var user = event.target.getAttribute('data-user')
  var domain = event.target.getAttribute('data-domain')
  var subject = event.target.getAttribute('data-subject')
  var body = event.target.getAttribute('data-body')
  window.location.href = 'mailto:' + user + '@' + domain + '?subject=' + subject + '&body=' + body
}

DEMO

CodePen
https://codepen.io/YusukeNakaya/pen/LYWqJyW