Prevent Image Theft and Email Harvesting
Written by Amatocianmonk
2009-06-15
Prevent email address harvesting, image downloading, and image theft by using CSS Pseudo Elements in conjunction with the Content property. This is a pure HTML/CSS solution to the problems of email harvesting and image theft with one common method.
There is a little known feature of CSS called Pseudo Elements that allows for some special effects to be applied to elements. Using pseudo elements it is possible to add content before or after an element. Pseudo elements can also be used to modify the first letter and first line of the text in an element, but that is beyond the scope of this article. This article will focus on the ability of pseudo elements to add content to a webpage.
How can adding content before or after an element in CSS hide the content?
There is a nifty aspect about adding content using pseudo elements; The content added in with CSS does not appear in the source code of the webpage where it appears. It only exists in the style sheet.
How is that helpful to hide content?
This prevents email addresses from being captured by spam bots as most spam bots do not open external stylesheets when scanning for email addresses. Also, when images are added by this method, the "Save Image" option does not appear the image is right clicked on. There is no <img> tag.
Notice: This will only work in browsers that support the content attribute in CSS. Sorry Internet Explorer Users.
If your browser supports the content attribute you will see the word SUCCESS! written to the right:
To add content before an element, you use the pseudo element :before
To add content after an element, you use the pseudo element :after
Here is how:
<style type="text/css">
/*Div layer*/
.demodiv{
display:inherit;
}
/*Pseudo element to add content before div*/
.demodiv:before{
content:"myemail@example.com";
}
</style>
<div class="demodiv"> </div>
This example will place the email address before the div layer wherever the div is called in the source code, but the div will only be visible to the human eye. It cannot be copied and pasted like normal text, nor does it appear for spiders or email harvesting programs.
Here is a demonstration:
You will notice that you cannot highlight the text and copy it. You should also notice that if the style was in an external stylesheet, the address would not appear in the source code.
This trick works to prevent images from being stolen as well. Here is an example of the code to do so:
<style type="text/css">
/*Div layer*/
.demodiv{
display2:inherit;
}
/*Pseudo element to add content before div*/
.demodiv2:before{
content:url('someimage.jpg');
}
</style>
<div class="demodiv"> </div>
You should notice here that instead of just using a string as the argument for the content attribute, i use the value url(). Here is the resultant output:
Here you cannot right click and "Save as..." the image, and again there is no <img> tag in the source code.
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
A final note
There are a few things that should be mentioned about the content of this article.
- This is not a 100% effective way to prevent content from being stolen.
- A very advanced email harvester may have the feature of scanning stylesheets. But this is rare
- Experianced users may be able to find the URL of the image in the CSS and then download it. Again however, this is rare
- It is also possible for users to take a screen shot of the page and steal the image this way. That is some dedication...
- The use of the content tag is not something that I would personally encourage. Cascading style sheets were not implemented to add content to webpages, they were provided to modify the style of the content.
- Not all browsers support the content property and in such browsers (like IE) simply nothing will be displayed at the location
If you would like more information on the material used in this article, please visit the following links:
2009-08-01
right click, view source, control + f, search for "url" to find "..//images/logo_star.gif" now you know that the image is at "http://amatoc.com/images/logo_star.gif" now our not so "experianced" (experienced) users can "steal" all the images they want! image theft, what a ridiculous concept, the internets are ours, what ever you put on it belongs to us!! piracy is not theft, it's piracy, which unlike theft makes a copy and leaves the original. image theft would involve removing the sites copy of the image. piracy is sharing, remember kindergarten, sharing you greedy bastard!