After working hard on a design, image or article you may want to protect it by using a JavaScript that disables right-click while optionally warning a visitor that the content is copyrighted.
It might sound ok, but this isn’t generally a good idea. Why not?
It’s annoying!
You don’t realise just how much you use right-click until you can’t use it! There are a lot of useful features in the short menu that it opens up. While most are also available in the main browser menu, it’s often much quicker to use the right-click menu — this is usually the closest menu you have available.
It’s pointless!
If you think disabling right-click will protect your source code or images, think again! Anyone who’s determined to copy your content or code will do so regardless of his or her ability to bring up a browser context menu. If they want your source code then it’s as simple as selecting ‘view source’ from the main menu. Article text can be highlighted and copied, images and media presentations can be retrieved from the cache, and streaming media can be recorded.
Disabling right-click will only make people more determined to learn exactly what it is you’re hiding. And this could end up being counter-productive, as your images and source code attract unwanted attention. Not only that, but you can only disable right-click on browsers that have JavaScript enabled: a visitor only has to turn off JavaScript in their browser’s options to be able to ignore the script altogether!
It’s disabling!
Mouse gestures that enable quicker navigation are starting to become a feature of browsers: Opera has them, Mozilla has just added support, and it’s only a matter of time before Internet Explorer adopts them. Disabling right-click on pages viewed in these browsers also disables the ability to use mouse gestures, so you won’t be popular with those that use them frequently!
Even when you don’t make use of mouse gestures, their absence can still seriously affect your ability to browse the Internet. I tend to open any links from a page I like in a new window from the right-click menu, so that I can read and compare both pages and return without having to use the back button. While you can open a link in a new window by holding down shift while clicking on it, many find it easier to use the option from the right-click menu. Disable right-click and you’ll alienate these users pretty quickly.
It’s unprofessional!
Ask yourself this: would you buy something from a site that reminds you its images are protected by copyright every time you go to use right-click (even when your pointer is nowhere near an image)? I thought not! Disabling right click suggests a lack of professionalism to users.
It’s insulting!
Most of your visitors will come to your site looking to buy something, or to find information. Only a small percentage of your visitors will land at your site with the intention to steal from it. By trying to protect yourself from the minority, you effectively insult the majority, who will use the right-click menu for legitimate reasons. Do you really expect your visitors to trust you when you offer them "helpful reminders" that imply you can’t trust them?
Granted, some people will want to view your source code — but don’t assume that everyone who looks at it will want to use it on their site! Savvy visitors that are aware of deceptive techniques used by some unscrupulous site owners may just want to check that a link is going to take them where they think it will take them. Does that make them a thief?
Solutions for Content Protection
There are other, less controversial alternative solutions available to the problem protecting your images or source code.
Protecting your Images
1. Disable Right Click on Images only
If you really must disable right-click, then limit the aggravation and use a script that disables it on images only (some scripts also prevent the IE6 image toolbar from appearing). Of course there will be times when people want to use right-click and have their mouse over an image, so I’d recommend you change the message slightly to reflect the fact that only images are affected.
2. Mark Images
Another way you can identify images as your own is to mark them in some way. The best way to deter the would-be thief is to make a visual mark on the most interesting part of the image. Marks such as your logo, your site address or even the word "sample" in either a solid or translucent colour make it obvious that an image is not intended for general distribution. This graffiti-style tactic works well on sites that offer artistic services, and can also help to discourage hotlinking.
3. Digital Watermarks
Digital watermarking is the practice of embedding identifiable information into a file. Typically this is a unique ID code or the image creator’s contact details. This embedded information is invisible to the average surfer but can be viewed with the aid of graphic program plug-ins or specialist stand-alone decoders. A digital watermark is typically stronger than a physical mark, because it is not obvious when you look at an image whether it has additional information. Having said that, this method provides no deterrent to a thief, although in theory it should make tracing your work (and in some cases derivative works) much easier.
4. The Window
If you want to show the level of detail in your high quality images without giving away too much "for free", then you could use what I refer to as the "window" method. Imagine you were looking at the full image through a square inch hole in a piece of paper; you wouldn’t be able to see much of the final image, but you will be able to see the quality and detail in the image without having to display the full image. I’ve seen this approach implemented in Java at some image galleries (allowing you to move the viewable window), although it is probably simpler (and quicker for your visitors) to use a cropped image based on the original.
Protecting your HTML
Using a script to disable right-click is not the most effective way of making your source code difficult to read. Most of the techniques used to protect HTML source code use JavaScript, so if visitors happen to have it switched off, the site becomes unusable.
There are three main JavaScript techniques used to protect the source code of a page:
- Encode the source code to make it unreadable without decoding
- Put the bulk of the source code in a JavaScript include
- Open the page in a new window with all menus disabled (not recommended)
The only way to make it more difficult for curious people to decipher your HTML source code without having to resort to using JavaScript is to remove needless white space. The effect is to turn your code into one or more long lines of code so that anyone using the view source function in a browser finds it difficult to read without taking the time to tidy it up.
What Will You Protect?
Obviously, the alternatives you choose to use will depend on what you need to protect and how important its protection is. You should bear in mind that anyone who’s determined to steal your stuff will find a way to steal it — even if this means taking a screen capture or typing out an article you’ve disabled text highlighting on!
Of course, there is a much easier way to protect your content from would-be thieves without ever having to disable any browser functions. If you want to protect something that badly, don’t put it on the Web in the first place! For more information, see:
- Disable Images Click – details of a script that disables right click on images only.
- Digital Watermarking Links – includes links to various audio, image and video watermarking resources.
- Samples of Watermark Techniques – ideas on how to create a visible watermark.
- HTML Guard, How Secure? – detailing tricks used to protect source code and images along with their drawbacks.
- Using JavaScript Includes to Manage Content – how to use JavaScript includes.