Disable Copying of images of content of your blog or website using java script

Share |

Disable Right Click, Use JavaScript to disable right click and disable image toolbar. Stop users leeching your images, viewing your source, hot linking images and stealing bandwidth. Stop them breaching your Copyright.

To know how to Edit blogger template with HTML and Java Script please click here

If you have a blog or website you must be worrying that some one might copy your content or may steal your source and create their own website or blog or somebody might use your images and display it in their own blog or website. To stop this thing, you must go through the steps in this article.

Disable Microsoft Image Tool bar

Use this Markup to disable Image Toolbar for all images on the page ...

<meta http-equiv="imagetoolbar" content="no">

Use this Markup to disable Image Toolbar for individual images ...

<img src="no-more-leeching.gif" width="250" height="250" galleryimg="no">

Next thing you can do is disable context menu or right click menu

Add this attribute to the BODY Tag to disable the context menu everywhere on the page ...

<body oncontextmenu="return false;">

Add this Attribute to an IMG Tag to disable the context or right click menu for individual images ...

<img src="no-more-leeching.gif" width="250" height="250" oncontextmenu="return false">

Disable copy and paste for text and images on your website or blog

Add these attributes to the BODY Tag to disable copy/paste everywhere on the page

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

or better still add this script to the JavaScript section in the HEAD of your page

document.body.ondragstart = "return false";
document.body.onselectstart = "return false";

Do not show your web page or blog if javascript is disabled
Some user might disable javascript on their browser so that your scripts will not execute and they are able to access all the source and images, in this case if JavaScript is disabled redirect the visitor to some other page stating please enable JavaScript to view original page.

Add this Markup to the HEAD section of your page, immediately below the META Tags

<noscript><meta http-equiv="REFRESH" content="0;URL=error-no-javascript.html"></noscript>

Disable Web Browser Cache using JavaScript

It would be pretty useless to take all the steps outlined on this page and then have a 'savvy user' view the contents of their browser's cache from where they would be able to snatch all the images and source Markup on your page. In the first META Tag below, the Pragma header is used to specify information not formally defined in the HTTP specification but the most commonly used value is no-cache. This value disables Web client caching of pages and page content in most Web browsers.

Preventing caching can sometimes be problematic because some browsers do not always bypass the browser cache properly and novel one solution to this problem is to include a second HEAD section at the bottom of your web page, in between the closing BODY Tag and the closing HTML Tag. This second HEAD section should contain a repeat of the Pragma no-cache META Tag. Peculiar maybe but there it is.

Include this META Tag in the HEAD section of your page along with the other META Tags

<!-- MICROSOFT/MOZILLA/NETSCAPE BROWSERS ALL REQUIRE THIS META TAG -->
<meta http-equiv="Pragma" content="no-cache">

<!-- MICROSOFT BROWSERS REQUIRE THIS ADDITIONAL META TAG AS WELL -->
<meta http-equiv="Expires" content="-1">

and then include this second HEAD section between the closing BODY Tag and closing HTML Tag

</body>

<!-- ADD THIS EXTRA HEAD SECTION IF YOU FIND YOUR PAGES ARE STILL BEING CACHED IN SOME BROWSERS -->
<head><meta http-equiv="Pragma" content="no-cache"></head>

</html>

Disable Page Printing using HTML / JavaScript

This is a Microsoft only solution and you should include these Attributes in your BODY Tag

<body onBeforePrint="document.body.style.display='none'"; onAfterPrint="document.body.style.display='';">

This is a CSS cross-browser solution which should be included as a separate section in the HEAD of your page

<style media="print">
<--

BODY {
display:none;
}

-->
</style>

Non-Supporting Browsers

Some of the less popular browsers appear to make a virtue out of not supporting the various methods outlined on this page. Two browsers that spring to mind in this context are Opera and Safari and If you are trying to protect your pages then the only solution to this problem that I can see, is to exclude these browsers from viewing your pages altogether. For some reason, many browsers seem to try to hide their true identity and in the case of both Opera and Safari the only way to check properly is to test their full User Agent string so that you can redirect them to a 'browser-not-supported' page. The scripts provided below use JavaScript Regular Expressions to accomplish this and if the named browser is detected then the user is redirected to a 'not supported' page. Do not forget to provide the 'not supported' page/s.

Opera Browsers

A typical Opera browser User Agent string

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 7.54

Locate this script at or near the top of the JavaScript section in the HEAD of your page

if(navigator.userAgent.match(/Opera/ig)) {
location.replace("opera-not-supported.html");
}

Safari Browsers

A typical Safari browser User Agent string

Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/412 (KHTML, like Gecko) Safari/412

Locate this script at or near the top of the JavaScript section in the HEAD of your page

if(navigator.userAgent.match(/Safari/ig)) {

 location.replace("safari-not-supported.html");
}

Note:
Before we start exploring these different methods we would sound a note of caution. If you are publishing your work on the World Wide Web and you use the methods outlined on this page and elsewhere, then you can stop most of the abuses most of the time but not all of the abuses all of the time. If someone is intent on grabbing your work and they have enough knowledge then they can probably do so.

Related Articles

How to remove links from the images uploaded to blogger post ?

How to embed Adsense code within post (after post title and before post body) for the blogger blog ?

How to have Add a Gadget option for Blog Post section of the blogger’s blog and how to make Blog Post gadget / widget moveable?

How to have Add a Gadget option for Header section of the blogger’s blog and how to make Header gadget / widget moveable?

How to add / Change Header image of blogger’s blog?

How should I restore my blog’s logo after changing to custom template?

How should I change my blog’s logo?

Change the order of the blog post archive

How to enable / disable adsense ads for the blog post widget ?

My blog is lost or forgot username / password of blogger blog

How to change scroll bar color and look and feel for a blog or website / web page?

Blogger Link list with the scroll bar support - link list with large set of links

How to change value of Older Post / Newer Post / Home for the blogger's blog

Enable / Disable receiving comments alert on email for blogger blog