hyperlink mailto on button

Question

I have an HTML hyperlink to send an email through the mailto: <a href="mailto:[email protected]?Subject=Hello%20again" target="_top">Send Mail</a>

The problem is that in the source code it is possible to view the mail. How can I change to a button to not see the mail.

Answer 1

A possible solution is to use Javascript:

document.getElementById('sendmail').addEventListener('click', function(event){
  event.preventDefault();
    document.location.href = 'mailto:[email protected]';
});

<button id="sendmail">Send</button>

The same thing with jQuery:

$('#sendmail').on('click', function(event){
  event.preventDefault();
    document.location.href = 'mailto:[email protected]';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="sendmail">Send</button>

Now, if the problem is not displaying the email in the source code, the solution is to make a request via AJAX:

PHP file:

<?php

   if($logado)
      exit(json_encode('email'=>'[email protected]');

Javascript:

$('#sendmail').on('click', function(event){
  event.preventDefault();
    $.ajax({
      url: 'email.php',
      dataType: 'json',
      success: function(data){
        document.location.href = 'mailto:' + data.email;
      }
    });
});

So the email will not be visible in the source, but nothing prevents the user from accessing the page email.php and view the email. You can do security checks, but it would be meaningless, because from the moment the user clicks on the button, he will have access to the email. This can be a good solution against spam robots, that’s all.

Answer 2

In Javascript and HTML, the information will be available to be viewed via source code. You would need to use some other language (PHP, for example), and pass the information via POST.

Answer 3

I just don’t understand why the secrecy, when the user clicks will open the default email manager with the email, but follows a code so that when passing the mouse under the button the link does not appear

<form action="mailto:[email protected]" method="GET">
    <input name="subject" type="text" />
    <textarea name="body"></textarea>
    <input type="submit" value="Send" />
</form>

Reference source:

https://stackoverflow.com/a/12627093/3130590

It is possible fire email using the phpmailer https://github.com/PHPMailer/PHPMailer

• In that case the source code would be hidden and the email secrecy would be preserved.

Answer 4

as Sneeps pointed out very well, when the user clicks he will see the email.

But I believe that your problem is not to expose your email to a user of the page, but to Bots that do the email collection for sending spam.

In this case you can confuse these bots by scrambling things a bit. One way to do this is to turn the email into a Base64 string, and for this we can use the following functions

var encodeBase64 = function (string) {
    var bytes = string.split("").map(function (char) {
        return char.charCodeAt(0);
    });
    return btoa(bytes);
}

var decodeBase64 = function (base64) {
    var bytes = atob(base64).split(",").map(function (number) {
        return parseInt(number);
    });
    return String.fromCharCode.apply(String, bytes)
}

below is an example of your email:

var encodeBase64 = function (string) {
    var bytes = string.split("").map(function (char) {
        return char.charCodeAt(0);
    });
    return btoa(bytes);
}

document.getElementById("base64Prefixo").textContent = encodeBase64("mailto:");
document.getElementById("base64Email").textContent = encodeBase64("[email protected]");

<label id="base64Prefixo" ></label>
<label id="base64Email" ></label>

now a second example with a link to send the email, note that I put the string Base64 that we just got as a custom data.

var prefixo = "MTA5LDk3LDEwNSwxMDgsMTE2LDExMSw1OA=="
var inputsEmail = document.querySelectorAll("[data-email]");

var decodeBase64 = function (base64) {
  var bytes = atob(base64).split(",").map(function (number) {
    return parseInt(number);
  });
  return String.fromCharCode.apply(String, bytes)
}

var sendEmail = function (event) {
  location.href = decodeBase64(prefixo) + decodeBase64(this.dataset.email);
}

inputsEmail = [].slice.apply(inputsEmail);
inputsEmail.forEach(function (inputEmail) { 
  inputEmail.addEventListener("click", sendEmail)
});

<a id="sendMail" href="#" data-email="MTE1LDExMSwxMDksMTAxLDExMSwxMTAsMTAxLDY0LDEwMSwxMjAsOTcsMTA5LDExMiwxMDgsMTAxLDQ2LDk5LDExMSwxMDk=" >Enviar Email</a>