Did you know that you need just a few lines of code to protect yourself from
- mail address harvesters
- content framers
- URL spoofers and polluters?
I’ve used three tiny JavaScripts for several years and still wonder why most websites don’t. These scripts can also help you improve and track your site.
Coding like it’s 1999
When I built my first website in 1999, I hand coded everything myself in Notepad, the default Windows text editor. We didn’t have WordPress then, WYSIWIG editors and for sure no free website services like Weebly or Jimdo that let you drag and drop everything into place. It was tedious to build a website back then but at least you had some sense of accomplishment when you did.
After mastering HTML in my free time during college, I quickly started learning JavaScript. It was all new and shiny and fun. Over time, JavaScript grew more complex so that programmers (far better than me) finally created libraries, like JQuery and such. By then I wasn’t coding JS anymore, but I still use and code basic scripts myself as if it were 1999.
Despite the rapidly growing popularity of JavaScript in recent years, most sites still don’t use JS basics I implemented 10+ years ago.
It seems the world is again divided into programmers and common people. It doesn’t have to be that way. Anyone can add simple JavaScripts to their sites without a lot of fuss. Today I’d like to show you how to use JavaScript to deal with wide spread annoyances on the web. Don’t let programming intimidate you.
Adding JavaScript To Your Site Is Mere Child’s Play
Ideally, you want to use an external JavaScript file to add scripts to your site, especially in case you use complex ones, like JQuery and other libraries. Most people use JavaScript without even knowing it though. Don’t believe me? Are you using Google Analytics or any other web statistics tool? Then you have successfully added JavaScript code to your site. Congratulations!
The only difference is that you need to add most JavaScripts to the head section of your HTML page while analytics code can usually reside in the footer these days and work properly regardless. The JS I refer to needs to be loaded up front so that your site works from the start not only after everything else is loaded.
In the past, adding JavaScript correctly was a bit redundant as you’ll see below:
<script language="JavaScript" type="text/javascript">
//<!--
//-->
</script>
Rest assured, your script will work with a much shorter HTML tag as well: <script></script> is perfectly fine. Remember, we stress the “tiny” aspect of JavaScript. Not everybody is a natural born web developer.
Mail address harvesting solution
Take a look at this partial screen shot of my 10-year-old legacy Home page I coded myself:
It appears that I publish my mail address in plain text on it so that spammers can simply spider my site and grab it. View the source code, and you will realize that there is not even an @ visible so that bots can’t even guess that there is an actual mail address somewhere. I use a neat little function (or two) I wrote a decade ago:
//Preventing mail address harvesting
function display(id, name, domain, tld)
{
document.getElementById(id).innerHTML = name + "" + "@" + "" + domain + "." + tld;
}
function send(name, domain, tld)
{
location.href="mailto:" + name + "" + "@" + "" + domain + "." + tld;
}
What do these two functions do? The first one, called “display,” takes the parts of my mail address and assembles it from them. I simply tell the browser to display my mail address in the given section of the site, usually a span called “mail.” See the HTML below:
<a href="javascript:send('onreact', 'gmail', 'com');"><span id="mail"><script>
display('mail', 'onreact', 'gmail', 'com');</script></span></a>
The second function “send” takes the parts, assembles the mail address and opens your mail client so that you can add text and hit the “send” button yourself. You just need to replace my mail address with yours.
Take note: I used my Gmail address as an example here because otherwise you won’t see the difference between my nickname and my domain name.
Content Framing Solution
It’s obnoxious but even large websites have used frames over the years. Google did it with Image search for years. Many social media services still do it today. They display your content as part of their site so that the unsuspecting visitor does not know where their site stops and yours starts.
Here’s popular script that prevents framing that’s been around for 15 years.
//Preventing content framing
window.onload=function(){if(top!=window)top.location=window.location;}
What does this one-liner do? It simply checks whether your location is the same as the one the browser shows in its address bar. If not, it breaks out of the frame that encloses it. I still use this mainly to prevent content theft from Google.
In Germany where I live, the law doesn’t allow Google to grab third party image content. When someone tries to view my images inside of Google that person is sent to my blog instead.
How can this improve your site and tracking? For one, you get a visitor you can count and you can keep them engaged on your own web property.
URL Spoofing and Polluting Solution
What is URL spoofing and polluting? All kinds of crap! No really. Many services, like Google Analytics, Buffer, etc. add weird parameters to your URLs, so that the average searcher might even think your site is broken or (at worst) has been hacked. These so-called parameters are usually barely readable gibberish.
It can be also be something you understand but isn’t very flattering. For example, you can add a parameter like ?p=viagra to almost any site and make it appear as if the site sells “male enhancements.”
When I add the parameter to my domain, the page redirects to the proper clean address instead.
What happens in the background? Nothing much! These five lines of code do all the magic:
//Preventing URL spoofing and polluting
var url = location.href;
var p = url.indexOf("?");
if (p >= 1)
{
url = url.slice(0,p);
self.location.replace(url);
}
I simply read the location from the browser address bar and try to find out whether a parameter has been added. A parameter usually starts with a question mark “?”. When the question marks is actually there the parameters gets cut off and the location gets replaced with the clean URL instead. Nothing extravagant here!
This script not only improves the user experience of the site as the clean not only doesn’t look scary but is more shareable.
For example an URL with parameters gets created as a different page on Delicious. You lose out on social proof.
Parameters often are misleading too. For example when I share something that has been send out automatically via Buffer it appears as if the original Buffer sharing has been successful not the secondary share by some else who hasn’t used Buffer at all. I know that’s good for Buffer but it is bad for you.
There is one exception where using this script won’t work: when your site is actually using parameters to work. WordPress sites for example use the “?s=” parameter for searching. Then you’d need to add some exceptions. The script would grow pretty fast and would stop being “tiny” then.
You can download the tiny.js file.
Analyze over 20 different technical SEO issues and create to-do lists for your team while sending error reports to your client.
