The very nature of the Internet means that content is freely available and there are a number of stalwarts out there who would insist that it's bad form to make areas of your web site inaccessible. But hey we live in the real world and there are legitimate reasons for individuals and businesses may want to protect their web site's content. One such obvious area is copyright protection of images and copy and as we have a number of clients that fall into that category it's something that interests me. So what can be done to protect your web sites content from being stolen? First off let me dash your hopes of finding a bullet proof way of protecting content on freely accessible web pages (those without password protected directories etc) and indeed it would be extremely difficult to scupper the efforts of a sneaky web thief; so what we need to do is to make their lives as difficult as possible.
Most Common Methods of Grabbing web content
There are a many number of ways of grabbing web content and I'm sure you are already familiar with most of the main ones:-
- Straight Copy & Paste - a basic copy and past of text and images
- Drag & Drop - a simple drag of an image or text onto your desktop or program
- Right-Click - a right mouse click to get the save options of an image
- View Source - viewing the HTML documents source to see the reference of the file
So here are some very straightforward ways to combat these:-
Stop Copy & Paste (1) and Drag & Drop (2)
Yep we can solve these two problems in one fell swoop with a tiny bit of code and here it is:-
Stop Right Click (3)
Just don't forget to enclose your script in it's script tags.Worth mentioning is that this script excludes an in your face visible warning such as "This feature is not allowed" as I don't see why you would bombard your valued reader with it, but if you prefer this then simply add it in between your var message="";
Stop View Source (4)
Unfortunately you can't stop people from viewing your source without encrypting it and then using a server side scripting language such as PHP to serve it back up to the server. For the vast majority of people this simply is too much hassle. If you want to make it seem like your code is hidden then you can add a number of return carriages to your code to give the impression that the page is blank when the source is viewed. I'm not sure why you'd bother adding needles blank spaces to your lovely code, but it might be a last resort for some of you.
A Way Forward?
I've experimented with layering a div over content with a blank.gif within it stretched to the width and height of the image/content and in this respect the user grabs the gif, rather than the image beneath. This can be achieved with jQuery too and this is how it can be done:-
Protecting Images with jQuery and blank png
You need jQuery for this, a blank.gif file (basic transparent png) and then simply add the following code to your document and call it with the script at the base.
So your images with the class 'protect' will be covered with a stretched blank.gif making it impossible (almost) to drag & drop and right click the source image as the blank.png is in the top layer. But we do have the same limitation of disabling script and also it relies on the loss of actions surrounding the image such as basic links. However if you are just displaying images it could be what you've been looking for.
Join in the Discussion