2
\$\begingroup\$

I'm creating a new website, so I am thinking about how to protect my email address and phone number against crawlers, I actually mean email harvesters (most of which I suppose don't have JavaScript enabled, but I don't have any proof of it). What I do now is definitely security by obscurity or obfuscation (I might be confusing the two terms), as I want the email address to be normally visible and clickable by the user.

I started with resurrecting my 10+ years old code and editing it a little. The basics remain the same as 10+ years ago when I first coded this principle.

My question for Code Review SE - as I already posted Is this a valid option? in Security SE question - is rather clear. Primarily, I am interested in a review of this piece of code:


HTML part

<span id="m_link">test [a.t] example [d.o.t] com</span>
<span id="t_link">+444 444 6[eight]6 6[eight][eight]</span>

JavaScript part

function fix_m_link()
{
    var item1 = '@'; var item2 = '.'; var m_clear_text = 'test' + item1 + 'example' + item2 + 'com';
    document.getElementById('m_link').innerHTML = '<a href="mai' + 'lto:' + m_clear_text + '">' + m_clear_text + '</a>';
}

function fix_t_link()
{
    var item8 = '8'; var t_with_spaces = '444 6' + item8 + '6 6' + item8 + item8; var t = t_with_spaces.replace(/\s+/g, '');
    document.getElementById('t_link').innerHTML = '<a href="tel:+444' + t + '">' + '+444 ' + t_with_spaces + '</a>';
}

These functions I then call in the body's onload.

\$\endgroup\$
1
\$\begingroup\$

First of all, ES2015+ onwards have template literals forw easier interpolation of string and data. For instance:

function fix_m_link(){
  var item1 = '@'
  var item2 = '.'
  var m_clear_text = `test${item1}example${item2}com`
  document.getElementById('m_link').innerHTML = `<a href="mailto:${m_clear_text}">${m_clear_text}</a>`
}

Also, JavaScript uses camel case for naming. So you might want to change fix_m_link and m_clear_text.

Putting code in one line makes it hard to read. If you have a build step, let a minifier do this. If the code is very short (like in your question), the extra kilobytes saved from omitted newlines is not worth making the code unreadable. Write code for humans to read.

Now if you really want to obscure your email, use a contact form instead. Some CMSes support this out of the box. And if your site is static, there are third-party services that allow you to embed a contact form. Most of them also support captchas, which will deter automated form submissions.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.