Tips, News and Comments on HTML Guard


July 17th, 2009, by Andreas

Ideas for Anti-Right Click Actions

Introduction

To follow up on my last article on how to use JavaScript to block right-clicks in the browser, I will now share some ideas on spicing up the script a bit. The goal is not to just silently disable the context menu, but also to give the user one of the following forms of feedback:

  • Display a message box window with a custom text
  • Display an inline message right under the cursor
  • Redirect the browser to another website
  • Bookmark a page
  • Send an email to a specified address

The presented solutions are more of a proof-of-concept than something I would actually recommend using. Please decide for yourself what to make of the code.

All code samples can be downloaded here as a ZIP file.

Display a message box window with a custom text

To show a message box every time a user right-clicks on your page, just add the following line of code to the original script’s “cancelContextMenu” function:

alert("Please respect our copyright. Thank you!");

A sample page is available here.

Display an inline message right under the cursor

A slicker and less intrusive way to present a message to a user is to display it as a div popup inside your page. Please click here to see what I mean.

Right Click Popup

The popup is displayed right under the mouse cursor’s current position and disappears after one second.

Redirect the browser to another website

Another possible reaction to a right click is to redirect the user’s browser to a different web page – for example, a page which explains what
‘copyright’ means. This can be accomplished with the following line of code:

location.href = "http://www.wipo.int/copyright/en/general/about_copyright.html";

Bookmark a page

When adding the following code to the original script, the user will be prompted to add your website to the Favorites list everytime he/she tries to open the context menu:

function bookmarkSite(url, title){
  if (isIE5)
    window.external.AddFavorite(url, title);
  else if (isMoz)
    window.sidebar.addPanel(title, url, "");
}
 
bookmarkSite("http://www.website.com/", "Website Title");

An example of the code can be found here.

Send an email to a specified address

Although not really advisable, you can also make the browser open the user’s email client every time a right-click is detected. To do so, just add this code to the original anti-right click script:

location.href = "mailto:test@test.com?subject=Subject goes here&body=Body goes here";

Please click here to see a sample page.

June 15th, 2009, by Andreas

Disable Right-Clicks on your Website

About Anti-Right-Click Protection

Disabling the browser’s context menu is a classic method to prevent the theft of web page content. With the help of JavaScript, it’s quite easy to block right-clicks by cancelling “oncontextmenu” events (see the code below). Although there are many ways to bypass this kind of protection, and although the solution doesn’t work in all browsers, implementing the solution is often better than doing nothing to prevent content theft.

The Script

To disable right-clicking on your web page, simply copy and paste the following code to the <head> (or <body>) section of your pages’ HTML code:

<script language="JavaScript" type="text/javascript">
<!--
 
  // Setting "onlyOnImages" to "true" will disable right-clicking only for
  // images
  var onlyOnImages = false;
 
  // Detect the browser
  var isIE5 = document.all && document.getElementById;  // IE 5 or higher
  var isMoz = !isIE5 && document.getElementById;  // Mozilla/Firefox
 
  function cancelContextMenu(e) {
    // Here you can add additional code that is executed when the context menu
    // is blocked. For instance, you can use the following code to display a
    // message to the user:
    // alert("Right-click disabled!");
 
    return false;
  }
 
  /* This function is fired every time a user clicks the right mouse button to
     open the browser's context menu. */
  function onContextMenu(e) {
    // Depending on the "onlyOnImages" variable the context menu is either
    // blocked for the complete page or only for <img> tags.
    if (!onlyOnImages
      || (isIE5 && event.srcElement.tagName == "IMG")
      || (IsMoz && e.target.tagName == "IMG")) {
      return cancelContextMenu(e);
    }
  }
 
  if (document.getElementById) {
    // Register event handler
    document.oncontextmenu = onContextMenu;
  }
 
-->
</script>

The script allows you to choose whether or not to disable right-clicks only on images (onlyOnImages = true) or for the complete page (onlyOnImages = true).

Script Demo

Click here to see a demo page that uses the “Anti-Right-Click” script listed above.

Right Click Protection with HTML Guard

By the way, a very easy way to add right-click protection to your web pages is to use HTML Guard, our software solution for preventing websites from being copied. HTML Guard not only allows you to disable the browser’s context menus but also provides protection features such as encrypting HTML source code, preventing text selection or blocking the print function. Please click here to download a fully functional demo version.

May 25th, 2009, by Andreas

Dynamic Image Watermarks with PHP

Introduction

An effective way to protect the images of a web page from being copied or linked from other websites is to visually mark them with a logo, a copyright notice, or any other identifying marker. In this article, I will explain how PHP can be used to quickly and dynamically watermark images on a web server without having to modify the original image files.

Watermark Sample

The following two images provide an example of what an image looks before and after watermarking it with the PHP script:

Original image:
Sample Image: Central Park

Watermarked image:
Watermarked Sample Image: Central Park

As you can see, the watermark is discreetly placed in the lower right corner without inhibiting the viewer from seeing the image.

Download and Installation

Please click here to download the watermarking script (including a sample page and the SVG sources for the watermark image).

To install the script, just upload the “watermark.php” file to your web server and change image tags in your HTML code from something like this:

<img src="sample1.jpg" />

to this:

<img src="watermark.php?image=sample1.jpg&watermark=watermark.png" />

Instead of linking an image directly, pass the image’s file name to the PHP script and additionally reference a watermark file. Supported image types are JPEG, PNG, and GIF. Image files can also be placed in subfolders relative to the folder of the script file:

<img src="watermark.php?image=folder/sample1.jpg&watermark=folder/watermark.png" />

The Code in Detail

First, the script opens both the original image and the watermark image using one of the imagecreatefrom(jpeg/gif/png) functions. Like many other functions used in the script, these functions are provided by the GD library that has been bundled with PHP since version 4.3.

function imagecreatefromfile($image_path) {
  // retrieve the type of the provided image file
  list($width, $height, $image_type) = getimagesize($image_path);
 
  // select the appropriate imagecreatefrom* function based on the determined
  // image type
  switch ($image_type)
  {
    case IMAGETYPE_GIF: return imagecreatefromgif($image_path); break;
    case IMAGETYPE_JPEG: return imagecreatefromjpeg($image_path); break;
    case IMAGETYPE_PNG: return imagecreatefrompng($image_path); break;
    default: return ''; break;
  }
}

Next, the intended position of the watermark in the output image is calculated (the watermark is placed in the lower right corner).

$watermark_pos_x = imagesx($image) - imagesx($watermark) - 8;
$watermark_pos_y = imagesy($image) - imagesy($watermark) - 10;

Now the source image and the watermark are being merged:

imagecopy($image, $watermark,  $watermark_pos_x, $watermark_pos_y, 0, 0,
  imagesx($watermark), imagesy($watermark));

The result is outputted to the browser as a JPEG image with the best quality (100):

header('Content-Type: image/jpeg');
imagejpeg($image, '', 100);

Finally, we free the memory allocated for the images:

imagedestroy($image);
imagedestroy($watermark);
May 25th, 2009, by Andreas

What This Is All About

This is the introductory post in a series of articles on protecting websites against illegal copying. My mission is to:

  • provide you with code snippets to protect your web page contents and code.
  • show you how to extend HTML Guard’s protection features.
  • provide you with general copyright information.
  • keep you up-to-date on changes to HTML Guard.
  • show you how to experiment and have fun with browser and server technologies.

I hope you enjoy the articles!

Newer Entries »