Protecting images from copying without the "watermark" - protection against a fool

Most web programmers sooner or later face the issue of protecting images from being copied for distribution. Usually, this is solved with the help of GD - modeling a large transparent inscription like “ www.% Sitename% .ru ” on the desired pictures or a strong decrease in image quality, less often - by locking the context menu, and even less - by pressing the Ctrl keys.

At one time, when I had a similar question, but the options "watermarks" or "quality deterioration" were unacceptable, I was confused and came up with some solution. This, of course, is not a panacea (for whom it is necessary — it will all the same be dragged out anyway), but as a “protection against a fool” he does it with a bang.

Who cares, welcome under cat.
')
In order not to be unfounded, I will immediately give an example, which I will analyze in detail later: an example

Immediately make a reservation: unfortunately, it does not save, if you save the page in Safari, as a web-archive.

Debriefing

Js
Lock the context menu and the Ctrl key:

 document.oncontextmenu = new Function("return false"); //    $(window).keypress(function(event){blockKey(event);}); //     $(document).keypress(function(event){blockKey(event);}); //     function blockKey(event){ keyCode = event.keyCode; if (keyCode == '155'){ //  , .. PrintScreen     ,     -       alert('printscreen'); } if (keyCode == '17'){ //  Ctrl alert(' .'); } } 
 

document.oncontextmenu = new Function("return false"); // $(window).keypress(function(event){blockKey(event);}); // $(document).keypress(function(event){blockKey(event);}); // function blockKey(event){ keyCode = event.keyCode; if (keyCode == '155'){ // , .. PrintScreen , - alert('printscreen'); } if (keyCode == '17'){ // Ctrl alert(' .'); } }

* for convenience, I almost always use jQuery.

HTML
We tell the browser that we do not need to cache anything, and the relevance of the content ended in the last century:

 <meta http-equiv="Expires" content="Fri, Jan 01 1997 05:00:00 GMT"> <meta http-equiv="Pragma" content="no-cache"> 
 

<meta http-equiv="Expires" content="Fri, Jan 01 1997 05:00:00 GMT"> <meta http-equiv="Pragma" content="no-cache">

The image we want to protect is displayed as the background of the div, inside which we insert the img tag with a 1x1 pixel transparent image:

 <div style="width: 1000px; height: 70px; background:url(index.php?showImg=84f5452a1fb1625ba0e251646049a60a) no-repeat;"> <img src="fail.gif" alt="" style="width: 1000px; height: 70px;" oncontextmenu="return false;"> </div> 
 

<div style="width: 1000px; height: 70px; background:url(index.php?showImg=84f5452a1fb1625ba0e251646049a60a) no-repeat;"> <img src="fail.gif" alt="" style="width: 1000px; height: 70px;" oncontextmenu="return false;"> </div>


Php
I think that you noticed the parameter “showImg = 84f5452a1fb1625ba0e251646049a60a”, which is transferred to our index file. Let us turn to the php code to understand how it is formed and what it is for:

 <?php session_start(); if (!$_GET['showImg']){ //     $_SESSION['imageId'] = md5(date('ymd H:i:s').rand()); //      Header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); //   Header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1 Header("Pragma: no-cache"); // HTTP/1.1 Header("Last-Modified: ".gmdate("D, d MYH:i:s")."GMT"); //   ?> // ...  html- <?php } if ($_GET['showImg']){ //       "   " include_once('./hana_kartinke.php'); echo hana($_GET['showImg']); } ?> 
 

<?php session_start(); if (!$_GET['showImg']){ // $_SESSION['imageId'] = md5(date('ymd H:i:s').rand()); // Header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1 Header("Pragma: no-cache"); // HTTP/1.1 Header("Last-Modified: ".gmdate("D, d MYH:i:s")."GMT"); // ?> // ... html- <?php } if ($_GET['showImg']){ // " " include_once('./hana_kartinke.php'); echo hana($_GET['showImg']); } ?>

The contents of the script "hana_kartinke.php":

 <?php session_start(); function hana($code){ if ($code == $_SESSION['imageId']){ //      session_destroy(); //   $_SESSION['imageId'] = 'fail'; //      $assa = file_get_contents('./habr.jpg'); //      ,    }else{ $assa = 'Epic fail! =)'; //     ,    } return $assa; //       } ?> 
 

<?php session_start(); function hana($code){ if ($code == $_SESSION['imageId']){ // session_destroy(); // $_SESSION['imageId'] = 'fail'; // $assa = file_get_contents('./habr.jpg'); // , }else{ $assa = 'Epic fail! =)'; // , } return $assa; // } ?>


Result

The user sees the picture, but cannot save it using the context menu (it is locked), or copy-paste (block on Ctrl), or as File \ Save page, and when you try to view the picture, follow the link from the html sources, it will see a significant inscription “Epic fail! =) ".

In principle, this method can also be used in conjunction with GD (watermarks and quality cuts). But this is already paranoia, in my opinion.

I hope that this information will be useful to someone.

UPD
I repeat - this is not a panacea, this is protection against a fool.

UPD 2
For critics and minuses, I want to clarify the point: I worked for a long time in marketing and programming online surveys, and in the marketing world there is one authoritative organization - ESOMAR, whose requirements (regarding online surveys) include a content protection item (pictures, video, etc.) from being saved by users, while visually this should not be noticeable (i.e., no watermarks or quality cuts).

It is clear that it is impossible to protect anything on the Internet (especially if it ALREADY got to the end user - the same cache), but nobody canceled these requirements and had to somehow get out. The article describes the solution to this situation.