Protecting your content

Protecting your content Protecting your content code corner

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 doen 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:-

  1. Straight Copy & Paste – a basic copy and past of text and images
  2. Drag & Drop – a simple drag of an image or text onto your desktop or program
  3. Right-Click – a right mouse click to get the save options of an image
  4. 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:-

<body ondragstart="return false" onselectstart="return false">

So we are simply adding the ‘ondragstart’ and ‘onselectstart’ to the body tag of our document and hey presto you will see that you can no longer  copy text or drag and drop images.

Stop Right Click (3)

The right click is perhaps the best known of the approaches to grab image content from a web site, but the following Javascript disables the facility:-

var message="";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
document.oncontextmenu=new Function("return false")

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 “<your warning here> ”

Stop View Source (4)

I’ve added this one in, but really 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.


Don’t say I didn’t warn you. The limitations of techniques 1,2&3 is that they rely on Javascript to work. This means that if the viewer has Javascript disabled then they’ll be able to circumvent our approaches and your images and text will be under threat once more.

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

You need the wonderful jQuery library for this, a blank.gif file (basic transparent gif) and then simply add the following code to your document and call it with the script at the base.

Here’s you go:-

jQuery.fn.protectImage = function(settings) {
settings = jQuery.extend({
image: '/blank.gif',
zIndex: 10000
}, settings);
return this.each(function() {
//var position = $(this).position();
var position = $(this).offset();
var height = $(this).height();
var width = $(this).width();
$('Protecting your content Protecting your content').attr({
width: width,
height: height,
src: settings.image
//border: '1px solid #f00',
left: position.left,
position: 'absolute',
zIndex: settings.zIndex

/* sample usage

$(window).bind('load', function() {


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.gif is in the uppermost 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.

About the Author
Protecting your content Protecting your content 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g


A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.