Split and collect email for spam protection-CodePudding

In our footer we have an email that we are pulling from the database, in php blade it will look like this:

<a href="mailto:{{ $email }}">{{ $email }}</a>

I need to protect him from spambots.

I heard that in php it can be split and then assembled through a javascript, and it will look something like this:

<a href="" data-first="" deta-second="">{{ $email }}</a>

Where data is the parts of the email itself. But I didn't understand how to separate it and then collect it. Can someone tell me how to do this?

Or tell me similar features, how to protect against spambots.

CodePudding user response：

Web scrapers will usually only download plain HTML response.

In this case you will be protected as long as your code doesn't contain email as plain text and email is put back together onload

Some might even execute JS when scraping your page.

To avoid this you can require user to press something to put email together. I made a quick example:

function showEmail (element) {
    const infoData = document.querySelector('[data-target="' element.id '"]').dataset;
    const mail = infoData.p1   '@'   infoData.p2   "."   infoData.p3;
    element.href = "mailto:"    mail;
    element.text = mail;
}

<a href="" id="mailOutput1" onclick="showEmail(this)">Send Email</a>
<!--p1, p2, p3 are filled in PHP -->
<span data-target="mailOutput1" data-p1="john.doe" data-p2="example" data-p3="com"></span>

CodePudding user response：

there are nothing to do with PHP with that as PHP is a server-side language.

you can do this with Javascript ( will use jquery here to simplify it )

this will append the email which is stored in data-mail to the href attribute and once your client clicks it the attribute will be removed again.

<a class="email" data-mail="{{ $email }}">{{ $email }}</a>

$('.email').click(function () {
    let t = $(this);

    t.attr('href', 'mailto:'   t.data('mail'));

    setTimeout(() => t.removeAttr('href'), 1);
});