G2 Security Hack: Making Displayed Images a Bit More Secure

cmarshall
cmarshall's picture

Joined: 2005-08-30
Posts: 6
Posted: Tue, 2005-08-30 01:45

This is something I did on a site I am working on now. It is a modification of a technique that I use in my layouts, so that I can completely modify sites using only CSS, yet have complex pages render correctly in multiple browsers.

It's extremely simple, but is really only good for the "tinfoil hat" crowd.

Which describes professional photographers to a tee when it comes to protecting their images.

This hack will prevent casual "click and drag" image downloading. It won't prevent screen grabs, but, when combined with the other security measures in G2, can help to make the gallery system even safer.

I would recommend that this be something that can be switched on in a theme's Smarty code:

{g->image id="%ID%" item=$theme.item image=$image fallback=$smarty.capture.fallback class="%CLASS%" security_level=black_helicopters}

Here's how I implemented it in my site:

I made a change in the /modules/core/classes/GalleryDerivativeImage.class file:

/*	$html = sprintf('<img src="%s"%s', $src, $sizeStr);
	unset($params['fallback']);
	foreach ($params as $attr => $value) {
		if (isset($value)) {
			$html .= " $attr=\"$value\"";
		}
	}
	return $html . '/>';
*/
	// This increases the security by removing the ability to "click-drag" an image.
	// The image is actually displayed as the background of the <img>,
	// but what is displayed for the <img> itself is merely a shim.

		// First, preload the image.
		$html = '<img style="display:none" src="'.$src.'" height="1" width="1" alt="preload" />';
		$html .= sprintf('<img style="margin:auto;padding:0;border:none;background-image: url('.$src.');background-repeat:no-repeat" src="../images/shim.gif"%s', $sizeStr);
		unset($params['fallback']);
		foreach ($params as $attr => $value) {
		if (isset($value)) {
			$html .= " $attr=\"$value\"";
		}
	}
	return $html . ' />';
 
stephenju
stephenju's picture

Joined: 2005-07-05
Posts: 172
Posted: Tue, 2005-08-30 04:59

I haven't tried it. But just to remind you that FireFox has a contextual menu command "View Background Image" which might defeat your code.

 
cmarshall
cmarshall's picture

Joined: 2005-08-30
Posts: 6
Posted: Tue, 2005-08-30 10:12

I don't see it on a Mac. Maybe it is a Windows command. I'll try it later today.

In any case, this isn't meant to be Fort Knox. It can be worked around via a screen grab, and, if they know what they are doing, a View Source.

It is just an additional bit of security that can help photographers to feel a bit more comfortable with G2.

 
valiant

Joined: 2003-01-04
Posts: 32509
Posted: Tue, 2005-08-30 12:41

deactivate css or deactivate js in your browser, and all these attempts to prevent the users from saving your images on their computer won't work.
and as a last instance, just go to the browser cache directory and copy the images from there. these security by obscurity attempts will just disgruntle your visitors and not solve the actual problem.

use watermarking and add a copyright notice, you can't do much more.

 
cmarshall
cmarshall's picture

Joined: 2005-08-30
Posts: 6
Posted: Tue, 2005-08-30 13:06
valiant wrote:
deactivate css or deactivate js in your browser, and all these attempts to prevent the users from saving your images on their computer won't work.
and as a last instance, just go to the browser cache directory and copy the images from there. these security by obscurity attempts will just disgruntle your visitors and not solve the actual problem.

use watermarking and add a copyright notice, you can't do much more.

You are absolutely correct, which was why I suggested that it be an option.

You should spend some time reading forums like ProDig, D1scussion or 1Dscussion to see how these folks think. I work in the industry, and can completely understand the paranoia involved with making your images available online.

Another interesting side project might be a DigiMarc watermarking module. It would probably have to be done in conjunction with the company (or by them), as they would need to provide their algorithm in some kind of executable binary.

 
valiant

Joined: 2003-01-04
Posts: 32509
Posted: Tue, 2005-08-30 13:15

what does digimarc offer what g2 is missing? g2 has already (a very basic) watermarking ability.

 
cmarshall
cmarshall's picture

Joined: 2005-08-30
Posts: 6
Posted: Tue, 2005-08-30 13:37
valiant wrote:
what does digimarc offer what g2 is missing? g2 has already (a very basic) watermarking ability.

This Puppy. It is expensive and rather arcane, but it seems to work quite well.

 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Tue, 2005-08-30 16:00

valiant, while you are of course correct that this does not provide image security, people do ask about features like this from time to time.. maybe down the road we can have an "download deterrent" module that lets you pick from among various css/js techniques to make it less trivial to download images. Definitely "deterrent" in the name and not "security" so we don't imply real security (like this forum topic).

 
RwD
RwD's picture

Joined: 2005-01-09
Posts: 383
Posted: Wed, 2005-08-31 08:45

Well, I actually did some stuff for a project I did. Basically it wasn't a requirement but I was just testing how far I could get.

These are the things I did that come to mind at the moment, you could add them later on as extra options I guess...

Having the image retrieved by a php file
So the image src attribute looks like this: src="img.php". As long as the php file is returning the image code I am obscuring the actual path, since all images are returned by the same php file. The other thing -that might be considered a downside- is that it disables caching of the images because only the last image is stored.

Disable caching
The php file also disables caching of the file by setting the apropiate headings so also the image just opened is not cached.

I also set meta tags in the HTML header and body to disable caching there as well even though I did it in the php file itself. It was just an extra measure.

Disable right clicking
Very annoying but it does help. By design all images opened in the same pop-up for this website, so I disabled right clicking (without showing a message). Later on I made right clicking show my self made context menu so copy/paste and veiw source and regular stuff could still be done.

Disable printscreen
One thing I would have liked to do was disabling printscreen. Unfortunately I didn't manage. I tried doing the thing that media player does (try making a screenshot there) but that simply wasn't possible. And I also didn't find out how to disable the printscreen keystroke.

Unfortunately one could always simply copy the screen image and since what you see is what you are getting I finally also put in visible watermarks, not the digimarc invisible ones although I am still planning of doing it sometime in the future. Those watermarks work really well!!

 
gilrim

Joined: 2005-08-28
Posts: 32
Posted: Wed, 2005-08-31 12:10

RwD: most of what you said here is already applied in g2, [image firewall etc]. disabeling cache in headers should prolly be enabled thru a module, I guess. as for showing the image itself, another way [to avoid the show background 'problem'], would be to put a div with a transparent gif inside over the image. [RemoveItPermanently, adBlocker and it's likes are going to kill that in no-time, but anyways..]

as for DigiMarc, I don't think your getting the point... The idea behind digimarc, is to embed a *seamless* psydo-random noise pattern over the image. This pattern is generated partly from your license with Digimarc, so you, as the owner of the image can be identified and contacted. The pattern is 'inisible' [that is, a bit-by-bit comparison would show it, but to the naked eye there's no difference between the original and the protected image]. They even claim that this pattern is identifyable after alterations to the image [cropping, leveling etc] - how true this is I don't know but it's plausible. What's more, Digimarc have bots that spider the internet looking for copyrighted material [again, I think that's a sales trick, but plausible: yes].

So to sum up digimarc, it's not about preventing downloading of images. It's to retain the owners copyright, and make sure pro's get paid.

now, as for implementing this in g2... Adobe have struck a deal with Digimarc for PS [Filters->Digimarc->Embed Watermark], so that you can check it out and see how it works etc without buying a license from them. If you open a image in PS and tries embedding a watermark, it gives you a dialog box, saying [among other things], that you'll embed the Digimarc ID "ImageBridge Demo" [guess what - you can register for the full version]. The durability setting goes to define how visible the watermark will be - the higher durability, the more visible it'll be.

I guess where I'm going with this is to say, that I agree with cmarshall, that this'll have to be done in conjunction with Digimarc. The algorithm is [afaik] closed source, and I doubt they'll open their treasure chest for free. A optional non-free digimarc module probably would attract a lot of pro's so it should be looked at, I guess...

 
RwD
RwD's picture

Joined: 2005-01-09
Posts: 383
Posted: Thu, 2005-09-01 08:30
gilrim wrote:
So to sum up digimarc, it's not about preventing downloading of images. It's to retain the owners copyright, and make sure pro's get paid.

Neither will a normal visible watermark, so how exactly am I not getting the point.

By the way, I tried to remove a watermark after putting one in. They are pretty durable.... I also read a claim ones stating this can survive printing and scanning again. I didn't try that as it seemed too unlikely to me back then.

 
Pinguin

Joined: 2005-09-27
Posts: 210
Posted: Fri, 2005-09-30 16:59

I don't mind if an individual downloads a picture, but at the moment I do some tests and found out, that I can download the whole gallery with wget. In this case it doesn't help to store the file outside of the "www-directory"

Any ideas, how I can prevent this?

 
TvE
TvE's picture

Joined: 2004-07-03
Posts: 76
Posted: Fri, 2005-09-30 17:59

As long as the user can SEE the image in the browser there will be a possibility to DL it - individually as well as programatically.

The ONLY thing that will work is to PASSWORD protect (via .htaccess etc.) the images so that ONLY registered users will be able to se (hence DL) the images.

As pointed out before "security by obscurity" has nothing to do with "real" security.

 
valiant

Joined: 2003-01-04
Posts: 32509
Posted: Fri, 2005-09-30 22:38

TvE: there's no need to password protect images with .htaccess in G2.
all files are served by the application (G2) and not the webserver directly. that's what we call an image firewall.

 
TvE
TvE's picture

Joined: 2004-07-03
Posts: 76
Posted: Sat, 2005-10-01 15:37

Vailiant: I know - i was just trying to emphasize that *some kind* of pasword-protection is nessecary.
But since this feature is one of the big differences between G1 and G2 I probably should have mentioned that all you need is to disable public acces and use G2 ,-)

 
jarwey

Joined: 2005-11-11
Posts: 7
Posted: Tue, 2005-11-15 04:33

btw, the application way of serving images doesn't protect images. offline explorer can download the whole photo gallery easily. try to believe *lol*

 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Tue, 2005-11-15 06:12

um, sure it does.. it means when you remove public permissions on a photo you are really blocking the ability to download it, unlike G1 where you can still get it with the direct image url.

 
jarwey

Joined: 2005-11-11
Posts: 7
Posted: Tue, 2005-11-15 06:33

i guess i wasn't clear with my statement. i mean there is no way to protect images as long as the person has the password in this case or rights in the file folder case.

 
valiant

Joined: 2003-01-04
Posts: 32509
Posted: Tue, 2005-11-15 12:27

well yeah, but that's an old story and contradictory to your last statement.
what you see is what you download.

 
christoph_s

Joined: 2005-07-17
Posts: 26
Posted: Thu, 2005-11-17 02:20

btw, the people who think disabling right-clicking could change a thing should take a look at the "media" tab of firefoxes "Page Info" function. A godsend for downloading embedded video/flash/pictures...

 
ckawalek

Joined: 2005-01-25
Posts: 104
Posted: Sun, 2005-11-20 05:04

Aside from all the comments about how to totally secure images, has any1 tried cmarshall's script and got it working?? I edited the GalleryDerivativeImage.class and created a shim.gif file and put it in the gallery/images directory but it would just show the images really really small. Is there something that I'm missing?

 
nad13

Joined: 2005-11-19
Posts: 53
Posted: Mon, 2005-11-21 23:47

Hello,

I tested the script of cmarshall, and script photo.tpl; "document.oncontextmenu = new false Function("return"); "; then I erased the mask of the templates in the admin, impossible to find the security offered? same by replacant in ftp the files?
thank you for your assistance

Nadine
French

 
nomad76

Joined: 2006-01-03
Posts: 6
Posted: Fri, 2006-01-13 13:14

Can anybody please explain exactly what to do to disable right click and exactly where do I insert the code......I added the above stated passage to the script and didnt get posisitive results.....

For the record....I'm in agreement that "Locks are for Honest People" I dont have statitics, but I bet that 80% of computer users are exactly that..."Users"....They have litle desire to know anything about code, scripts, and the such. They just want to point and click and see results. For these people, the disabled right click is more than adequate. It's like trying to password protect MS Windows. Anyone can get the code, but the people who need it the most, pay the big bucks for the license (I.e. corporate america) or else Bill Gates would be broke.

Thanks in advance