Tuesday, August 5th, 2008

MooTools 1.2 Image Protector

It always makes me laugh a little when people try to “protect” things on the Internet. The dwProtector tries to “protect” your images with you just having to:

javascript

  1. window.addEvent('domready', function() {
  2.     var protector = new dwProtector({
  3.         image: '/blank.gif',
  4.         elements: $$('.protect')
  5.     });
  6. });

How does it protect?

  • Prevents right-click “Save Image As”.
  • Prevents dragging an image to the desktop.
  • Prevents right-click “Save Background As”.
  • Prevents right-click “View Background Image”

Check out the example and try to copy it. Of course, a simple print screen / apple-shift-4 does the trick, let alone a view-source.

Posted by Dion Almaer at 5:23 am
34 Comments

+++--
3.1 rating from 116 votes

34 Comments »

Comments feed TrackBack URI

Protects images from 99% of Internet users, I would guess. Sometimes that’s all you need.

Comment by PresenceLayer — August 5, 2008

Useless :)

Comment by qingbo — August 5, 2008

Firebug is your friend, I can drag/drop from that fine. Flickr uses a similar technique (spaceball.gif) which is just a easily got around.

Comment by maccman — August 5, 2008

i tried it but it didnt work for me.

Comment by Apotheke — August 5, 2008

Another way ’round: use FF zoom plugin to zoom the ‘protector’ image to 50% and expose the ‘protected’.

Comment by Tonto — August 5, 2008

In Opera right click and use “Save image” works fine, as always.

Comment by robbertbroersma — August 5, 2008

For Opera-users

Block the URL (Block Content) to the protector:
http://davidwalsh.name/dw-content/blank.gif

Opera has no right-click event. After the protector is blocked, the protected image is as unprotected as images on the rest of the web.

Comment by TValand — August 5, 2008

@All: It’s important to realize that this WAS NOT MEANT AS THE BE-ALL-END-ALL of image protecting. I know you can view-source, or print-screen, or use Firebug, etc. — my article states that clearly.

This is meant to prevent the rookie web user. They don’t have Firebug, they don’t know how to view-source, and probably don’t know print-screen.

Comment by davidwalsh83 — August 5, 2008

If you have firefox 2 with firebug you can just delete the “blank.gif” image and then you can simply right click and “save as” and it all works fine.

Comment by AntonioCS — August 5, 2008

Regardless of how effective this thing is (it isn’t very), I’m not quite sure I understand the general idea. What do you mean by “protecting” the image? If anything, a watermark would provide far more “protection” than this silly hindrance.

BTW, is David Walsh the original author of the photo he uses in his example? The model looks a lot like Christina Ricci, and the photo looks very professional, yet he didn’t attribute it.

Comment by Pies — August 5, 2008

Very easy to circumvent with Firefox: Tools, Page Info, Media, find the image (6.jpg), Save As…

However it will block almost every non technical guy out here.

Comment by pmontrasio — August 5, 2008

@pmontrasio :

It will block nobody using something else than IE.

I have done a little dirty test, I’ve called my mother and asked her to get the image. She is not a technical guy for sure, but she got the image in 1 little right click with her Firefox 3 with it’s default configuration.

Same test with my brother, another non technical guy (probably worst technical than my mother I can assure you), and same result. 1 little right click and he got the “protected” image.

Useless stuff. The only effective way as we all know, is quite simple : Do not drop anything you want to protect on the www.

Comment by Laurent V. — August 5, 2008

lol poor guy got no positive comment :(

Comment by maike — August 5, 2008

People who don’t know much technical stuff (and/or still use their trusty IE6) will wonder what’s going on. But for the rest – there’s multiple techniques: opera, firebug, blocking javascript, or looking at the source code and getting the image from there.

Comment by maike — August 5, 2008

Create a batch process to convert the image to a massive array of colored periods squished together…. It would be interesting to see at least. lol

Comment by TNO — August 5, 2008

I can’t believe no one has mentioned the obvious one – Web Developer Toolbar -> Disable -> Javascript. Right-click till your heart’s content.

Comment by xmlblog — August 5, 2008

FF3/Linux:
protection worked for me (as long as I activated JS ;))
It’s a nice idea, which will protect ist from a lot of ppl. but… why putting it on the web, when you don’t want to share it? ;)

Comment by SkaveRat — August 5, 2008

Safari 3.x: the protector does not let you drag, but it enables save as.

Comment by Adam Nemeth — August 5, 2008

You guys are great at “solving” the problem with an image protection script, however you all fail horribly at READING THE ARTICLE.

These scripts are all easy to step around when you’re a developer, but that’s not who this is for. I can tell you’re all new to this, because no real dev would waste time posting what everyone else already knows.

/troll

Comment by MichaelThompson — August 5, 2008

I can’t help but feel that this post misses/misinterprets the purpose of the dwprotector. I agree that it is important to emphasize that JS is ultimately powerless to protect client side content (as the original article already confesses), however, I believe that there is still a place for scripts like this. Often times people will download an image without even giving a thought to copyright or other IP concerns, in which case there is something to be said for making it clear that you don’t want people ripping your content. In this case, you can’t stop the determined, but you can at least make your intentions crystal clear.

Comment by jmar777 — August 5, 2008

It’s a very neat solution that will work 99% of the times it used, depends on the viewer/audience.
On FireFox 3 all image downloading is easy by clicking on the favico than ‘More information…’, than select ‘Media’ and you are able to select all graphics on the page and press ‘Save As…’. So even a regular user could do this IF he knows this feature.

Comment by IvoLimmen — August 5, 2008

@Laurent V., robbertbroersma, Adam Nemeth, – Congrats you just saved the blank.gif :)

I think this script is effective at its target audience, before flaming the guy, give his article a good read, and give his example a spin :)

Dion did you post with the intention of public ridicule?
Your comment sure did call in the trolls. Meh.

Comment by jdalton — August 5, 2008

This is a totally different way to protect images, but I think it works a lot better… instead of trying to keep the user from saving the image, it instead relies on CSS to reorder a previously scrambled image. Scrambling is a simple two-liner in ImageMagick (if only I had written it down :) , I’ll post again if I can find it). The big plus is that it needs no JS and only minimal CSS. The downside is that somebody without any CSS support won’t be able to view it.

Of course, this does’t keep anybody who is dedicated enough to write a quick script to reassemble the image or take screenshots, but it’s quite good at preventing bots from copying the images.

http://www.tapper-ware.net/devel/js/HTML.ImageProtection/

Comment by Hans Schmucker — August 5, 2008

In many cases, “protecting 99% of the cases” is not sufficient. If I am serious about protecting my work, I wouldn’t use this solution since I can simply use File -> Save Page As to make a copy of all the resources. When I saved the sample page, the main image was saved as 6.jpg. So, I don’t know if the statement, “protects 99% of the cases” is even true since the above is a straightforward action.

On the positive side, this work might make people jump into the bandwagon, so some time down the line, we may see a more complete solution.

Comment by ragjunk — August 5, 2008

The author states in the article: “This isn’t meant to be THE image protector. Print-screen or a quick view-source will get the user the image.”

You’d be surprised how many people this would thwart and I think there are other uses for this technique, just put your mind to it!

Comment by emwendelin — August 5, 2008

Does not work for me :) (I have firebug but did nothing special, just right-clicked)

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

Comment by Jeph — August 5, 2008

“Often times people will download an image without even giving a thought to copyright or other IP concerns, in which case there is something to be said for making it clear that you don’t want people ripping your content. In this case, you can’t stop the determined, but you can at least make your intentions crystal clear.”
.
If you make it available to download in my browser, you are giving implicit permission for me to download it to a directory of my choosing, not just the browser’s cache directory. This is only expressing conflicting intentions. Once it’s in my cache (or memory in the case of caching being blocked, which is not a great idea for most images), it’s already downloaded on my computer. While not every user might understand that and be able to articulate it, it’s certainly clear to most users that having access to content shouldn’t be artificially restricted.
.
Moreover this restriction has exactly nothing to do with IP, and everything to do with what the owner wants you to be able to do with the property.
.
While I’m opposed to the idea on principle, I will say that the implementation on Flickr is effective. I have had to get links to images for the owners so that they could use them, because they couldn’t figure out how to circumvent the protection on their own accounts.

Comment by eyelidlessness — August 5, 2008

Everyone keeps talking about what browser plug in can get around that script – there’s something even more obvious. Just peek at the source and find the image. Remove the image-protector.php and replace it with ‘preload-images/6.jpg’ so you have ‘http://davidwalsh.name/dw-content/preload-images/6.jpg’ Copy at will…

There is no real javascript solution to protect images on the internet.

Comment by SarcasticBaldGuy — August 5, 2008

OK, understood and agreed: the script doesn’t aim at keeping your images in a vault; it’s HTML for God’s sake! But there’s a much simples way around this: turn off CSS styling. It will enable dragging, right-clicking and what-not, and you may still continue to navigate the site and do the same to all the images.

I’m writing not to prove the author wrong, but perhaps to show that if there’s enough will, perhaps a more sophisticated way of ‘protecting’ those images can be conceived. Not that they *should* be protected anyway.

Comment by brunobe — August 5, 2008

If we’re talking about non-techie users, I suppose File > Print is sufficient to “beat the protection”.

I’ll say that this is helpful nonetheless: sometimes your clients just don’t understand their customers (or the web for that matter). As Schneier would call it, this is good security theater for them.

Comment by LeoHorie — August 5, 2008

It’s fabulous how people try to protect their photos from usage by the harmless.. people who want to really abuse your copyrighted material badly are the ones who laugh about all image protector BS. I’m a photographer myself and seriously; if people really want to download my photos I can’t stop them anyway. I don’t deliver high quality high resolution photos so no one can do anything harmful with it anyway.

“If you don’t trust the people, you make them untrustworthy.”

(Tao Te Ching, Chapter 17)

Comment by Yereth — August 6, 2008

Silly & useless protection.

Have a look to the source, use firebug or greasemonkey to locate/disable the script, open the cache folder to get the image, use adblock to get the url of the image (since it list all images on the page)

Comment by Paquerette — August 6, 2008

@Jeph
I don’t know if that’s an entirely fair statement. I think that IP is at the very heart of the matter. A copyright holder can place the same restrictions on how their online content is used/distributed/reproduced as they can in printed content. The medium of the content is irrelevant. It just so happens that downloading a picture off the internet is far easier than photocopying a gallery from the library – but ultimately you’re dealing with the same issue. It is true that 99% of browsers will cache images to a temporary directory, but as far as the spirit of the law is concerned, that’s hardly a violation.

Comment by jmar777 — August 6, 2008

Works in Firefox 3But you know, From Tools | Page Info, [Media] You can see the image, and you can “Save As…”

Comment by kevintrio — August 7, 2008

Leave a comment

You must be logged in to post a comment.