Protecting email address • TBlog

Introduction

Sharing email address as a plain text is not the best idea as it can be parsed by web crawlers. Unfortunately our email inboxes get bombarded with spam every day, often because we share our email address on so many places. So why would I make it easier for spamers. I will show you quite simple way how to make it harder to steal your email address programatically.

Solution

Solution is to write email backwards and then revert it with css direction property so it renders normaly. On top of that I use javascript to write this reversed email, because basic crawlers do not support javascript 😉

In snippet bellow you can see css class, that reverses text and because the reversed text is just rendered backwards, but "physically" is still writen backwards, it’s good to disable user from selecting or right clicking our email address using user-select: none.

.reverse {
    unicode-bidi: bidi-override;
    direction: rtl;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.reverse {

unicode-bidi: bidi-override;

direction: rtl;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

-o-user-select: none;

user-select: none;

}

In followning html snippet I write our email address link using javascript document.write. As I sad it’s just protection againts bots. Bot without js or user with javascript disabled browser would see message enclosed in <noscript> tags: Email address is protected by javascript. Please activate javascript in your browser..

<script type="text/javascript">
    document.write('<a href="#" class="reverse">zc.aduobsamot@liame</a>');
</script>
<noscript>
    <i>Email address is protected by javascript. Please <a target="_blank" href="http://enable-javascript.com/cz/">activate javascript</a> in your browser.</i>
</noscript>

document.write('<a href="#" class="reverse">zc.aduobsamot@liame</a>');

</script>

<i>Email address is protected by javascript. Please <a target="_blank" href="http://enable-javascript.com/cz/">activate javascript</a> in your browser.</i>

</noscript>

Output in Chrome DevTools:

Enable email copiing

One problem with email protected like this is that user can’t copy it. Solution is again very simple. I’ve used cotext menu and bit of a javascript to "unreverse" my email address.

Example output(you can see it live on tomasbouda.cz):

First you need to install jQuery and jQuery contextMenu, here are instructions – https://swisnl.github.io/jQuery-contextMenu/#getting-startedOptionaly you can install toastr to show notifications to user – https://github.com/CodeSeven/toastr.

After that you need to add following javascript to your website. It registers context menu on reversed email address link a.reverse. When user clicks context menu, it reverses given email address and copies it into clipboard. See code comments for further info.

Full example:

(function ($) {
    "use strict";

    // Reverses given string
    function reverseString(str) {
        return (str === '') ? '' : reverseString(str.substr(1)) + str.charAt(0);
    }

    // Copy given text to clipboard
    function copyToClipboard(id) {
        var copyText = document.getElementById(id);

        copyText.select();
        copyText.setSelectionRange(0, 99999);

        document.execCommand("copy");

        // Optionally uncomment to show toast notification to user(requires toastr)
        // toastr.info('Text was copied into clipboard.');

        return false;
    }

    // Setup context menu for email address
    $.contextMenu({
        selector: 'a.reverse', // Selector for reversed email address
        trigger: 'left',  // Register left mouse button
        items: {
            copy:{
                name: 'Copy',
                // icon: "fas fa-clipboard", // Icon from font-awesome library, uncomment if you are using it
                callback: function(key, opt) {
                    var email = reverseString($(opt.$trigger[0]).html())
                    // Append dummy textbox so we are able to copy it's value
                    $('body').append('<input type="text" id="clipboard-dummy" value="'+email+'">');
                    // Copy textbox value
                    copyToClipboard("clipboard-dummy")

                    // Remove dummy/helper textbox
                    $('#clipboard-dummy').remove();
                }
            }
        }
    });
})(jQuery);

(function ($) {

"use strict";

// Reverses given string

function reverseString(str) {

return (str === '') ? '' : reverseString(str.substr(1)) + str.charAt(0);

}

// Copy given text to clipboard

function copyToClipboard(id) {

var copyText = document.getElementById(id);

copyText.select();

copyText.setSelectionRange(0, 99999);

document.execCommand("copy");

// Optionally uncomment to show toast notification to user(requires toastr)

// toastr.info('Text was copied into clipboard.');

return false;

}

// Setup context menu for email address

$.contextMenu({

selector: 'a.reverse', // Selector for reversed email address

trigger: 'left', // Register left mouse button

items: {

copy:{

name: 'Copy',

// icon: "fas fa-clipboard", // Icon from font-awesome library, uncomment if you are using it

callback: function(key, opt) {

var email = reverseString($(opt.$trigger[0]).html())

// Append dummy textbox so we are able to copy it's value

$('body').append('<input type="text" id="clipboard-dummy" value="'+email+'">');

// Copy textbox value

copyToClipboard("clipboard-dummy")

// Remove dummy/helper textbox

$('#clipboard-dummy').remove();

}

});

})(jQuery);