MooTools 1.2 Image Protector: dwProtector
Image protection is a hot topic on the net these days, and why shouldn't it be? If you spent two hours designing an awesome graphic, would you want it ripped of in matter of seconds? Hell no! That's why I've created an image protector class to help designers and artists protect their images. Here's how it helps:
- 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"
All I needed was a small MooTools script.
The MooTools JavaScript Class
//protector class
var dwProtector = new Class({
//implements
Implements: [Options],
//options
options: {
image: 'blank.gif',
elements: 'img',
zIndex: 10
},
//initialization
initialize: function(options) {
//set options
this.setOptions(options);
this.options.elements = $$(this.options.elements);
//make it happen
this.protect();
},
//a method that does whatever you want
protect: function() {
//for each image that needs be protected...
this.options.elements.each(function(el) {
//get the element's position, width, and height
var size = el.getCoordinates();
//create the protector
var p = new Element('img', {
src: this.options.image,
width: size.width,
height: size.height,
styles: {
'z-index': this.options.zIndex,
'left': size.left + 'px',
'top': size.top + 'px',
'position': 'absolute'
}
}).inject($(document.body),'top');
},this);
}
});
The class is so simple it has only one working method! The protect() method places the "blank" image over the image you need to protect.
The Usage
window.addEvent('domready', function() {
var protector = new dwProtector({
image: '/blank.gif',
elements: $$('.protect')
});
});
Not a whole lot in the way of usage. Simply instantiate the class and pass in the image path and the elements to protect. Download the blank.gif image here.
One note I'd like to share. You could use a DIV element instead of an image, but using an image as the overlaying element allows you to dupe the user into thinking that they actually are saving an image.
This isn't meant to be THEE image protector. Print-screen or a quick view-source will get the user the image. View source though...maybe I can find a solution to make that harder....Anyways, use as you need to.
Very nice one again !
This seems to be a pretty handy tool to guard against the average user. However, simply by going to Firebug and looking at the pages network transactions you can easily find the URL to the image (it takes 5 seconds, 3 to load the page).
The best way to protect images is with a back-end script that will automatically place a watermark (visible or invisible) in the image before it gets served to the users browser.
matt, do you know where i can get a back-end script to place a watermark in the image before it gets to the users browser, as you described?
thank you
@Matt: Right, there are many ways to get the image. A random user, the person I’m trying to stop, probably doesn’t have Firebug though.
Another thing you could do is whitelist only common browsers’ user agent strings. So people cant use tools like wget to download the content of the entire site. Just be careful you don’t block Google or other bots.
Reading these comments, I would agree that this might work against a “random user” who would likely not have Firebug, or other problem solving abilities to work around this system. However, specifically you’re trying to work against someone looking to rip you off, and in that case, I might give their knowledge a little more credit than that of a random user. Unfortunately, I believe that image protection will always be difficult as long as the “print screen” button is still working.
@Marie: Agreed about PrintScreen. That said, this script is meant to be for the non-technical user. They still try to take images too!
Well that would have worked… except in Maxthon and probably other browsers. I can still save the image from that browser. So….if the image is that valuable to you, you should probably watermark it.
doesnt work in FF 3
@AC: What platform? Works fine on FF3/XP.
When I turn off javascript this snippet doesn’t protect the images on my website… This is the most simple way to get all the images…
Context menu still works in Opera 9.5/Windows. Dragging, however, doesn’t.
Scripts like this are useless. I tried your example in IE7 on WinXP and it didn’t work at all, I could drag it, rightclick it, etc…
You can’t protect images, except with some watermark, otherwise a simple “prt sc” does the trick on every platform/browser.
@iBram: Are you sure you could right-click-save and drag the Christina Ricci image and NOT the blank image? Works in my IE7 perfectly.
Hm. Did my comment disappear because I pointed out how easy it was to subvert in safari, or because I pointed out you were using an image without copyright clearance?
While it’s fun to come up with ideas like this and provide interesting examples of mootools usage, it’s an exercise in mental masterbation. While on one side you say that this targets the “average person”, you fail to apply this rule in context. We are talking about the average person who wants to rip off your images, not the average web surfer.
Print screen, Google image search, Tools -> Page Info -> Media, File -> Save As (my favorite for ease of use). If you truly want to protect images you are SOL. If you want degrees of protection, this approach is certainly the bottom rung. Embedded flash images might be one step up. True protection — not possible.
@Michael: Your comment disappeared because I found it more insulting than anything else. I don’t see many non-technical users doing what you did in Safari. As far as the image without copyright clearance, do this for me: find out who owns the rights to it, let me know, and I’ll give them credit here. You’ve put a good amount of time into ripping me — use it for some good.
@James: My non-technical friends grab images for their own uses all the time, and when I showed them this, they couldn’t figure out how to get the image.
THIS IS NOT AN END ALL, BE ALL SOLUTION! It’s meant as on small bit of protection, that’s all. I AGREE THAT THERE’S NO WAY TO PREVENT YOUR IMAGES FROM BEING STOLEN FROM MOST PEOPLE.
Woah. So you won’t show people what I said but you will say I was insulting and I ‘ripped’ you? For the (incomplete!) record, I don’t think I was insulting.
I pointed out a list of (trivial) steps that could be used with a default browser feature, underscored the futility of what you are suggesting, pointed out that there is a simpler CSS method that achieves what you’re actually getting, and pointed out that it is ironic you’re using a non-cleared image.
I don’t need to trawl round the internet to find the source of the image you are using, because you know you are using it without permission, right?
If you’re not going to display all my comments, delete all of them, and your reply, please. To leave an inference that I insulted you without people being able to see for themselves is pretty poor form.
@Michael: Not one, and I mean that, person I know that doesn’t work in web knows what Safari is. They don’t know what view source is. They don’t know what Firebug is. They don’t know that Firefox’s “NukeAnything” can remove the blank image. Not one. The people around me are my base for writing this article. Those, to me, are the non-technical people. Your Safari steps are not relevant to my idea of the “non-technical user”.
As for a simpler CSS idea, both Firefox and IE allow have a “View Background Image” type of functionality when right-clicking. I wanted to avoid that.
As for the picture, I used Google image search to get it. If I knew how owned the rights, I would give them credit.
Jeez you wouldn’t want to stick your head too far over the parapet ! Might get shot @ :-)
A couple more scenarios you may want to consider if you’re going to keep this one going –
1. FF zoom plugin can zoom the protector image down & expose the protected image.
2. File..Save page as saves both images. Adding the protected image URI as dynamic content (doc.write) may help with this, and have some effect for the ‘view source’ issue (but wouldn’t fix entirely)
Unless I am much mistaken, Google Image Search would find (and offer to display in a new window) images protected by your code.
But it seems to me that with the ‘give them credit’ thing you are arguing for your right to fair use of that image, which it just so happens is essentially all your code will interfere with.
This stuff just writes itself.
@Michael: Yes, Google image search would get the image. You’re clearly not taking my article for what it was for. It was to prevent a non-technical user from saving the image. And that’s what it does.
Pretty silly article then isn’t it…
@James: I don’t believe so, but to each his own.
Keep up the good work :)
I saw this link posted via a commenter on Ajaxian’s post:
http://www.tapper-ware.net/devel/js/HTML.ImageProtection/
It scrambles the image serverside or something and uses css scripts to assemble the image :)
css sprites
Its funny to see how much people doesn’t want understand the feature. I mean as flickr use the same method it can’t be totally useless. By the way wouldn’t it by smarter to create the image object once and clone it in the loop. So you only need to set width, height, top and left.
I’m pretty sure that everyone criticising this fully understands the feature. What we don’t understand is the creation of an ever narrower class of users to spend this effort excluding, when it is doing nothing at all to stop anyone who has mastered File… Save.
Flickr, incidentally, does not stop you dragging an image, or the thumbnail or full-size image, out of the page. Nor does it do anything to stop people just using Google Images to rip off images en masse without even visiting your site.
In all seriousness, encouraging people to employ measures like this to provide ‘protection’ falls into the category of bad advice causing a false sense of security, and I’m really surprised to find it on a blog as professionally produced as this.
And with this, I am done.
(As a complete aside, David, your spam filter thing is occasionally a bit hit-and-miss, and I’m fairly sure I don’t have cookie handling problems here…)
@Michael: Thank you for being done with this.
@Michael
its an flickr feature to “save” your images from downloading using the spaceball.gif:
Most of us reading this blog know this is not the ultimate solution, so I see no point in stating that fact all over again repeatedly.
Unless you can post a constructive solution that surpasses the one posted by David on this particular issue, you should take that criticism elsewhere.
Take the solution for what it is intended by David or leave it.
it’s very esay to save the picture,
just disactivate the javascript into your browser and then right click and choose save the picture
@flashios09: Please read zen’s comment above yours.
“Take the solution for what it is intended by David or leave it.”
What, a demonstration that, using a pre-existing API, one can write a non-solution to an unsolvable problem best ignored? ;)
Problem 1: you’re circularly defining “non-technical” as “someone whom this will fool”
Problem 2: your target audience is not who you think it is. Why guard against those who don’t know how to do something naughty rather than tackle people who are actually trying to?
I find more than enough of my images hot-linked into xanga, myspace et al (quite often by religious freaks who you’d think should know better) than to believe the rubbish about “non-technical users”.
Completely unrelatedly, you’ve totally sold me on MooTools. I’ve been getting by with Prototype.js, but this seems much less likely to cause me to pull my hair out.
So, I have to leave my 2 cents too here.
The thing I really can’t understand is: What is the sense of preventing dummies to save pictures from a website? Will they make the big business with building dummylike websites (with frontpage, or more ugly (yes! ;)) with word) with stolen pictures? Will the going to spend money for this images for their more likley private use?
btw: similar scripts are around since 2k AFAIR, and not one of ’em worked fine on all browsers (e.g. if ECMAscript is deactivated), aside from their practical sense. ;)
AND: domready won’t work correctly on IE (all versions) if doc.write, or innerHTML is used (and some more). Specially with slow internet access!
@zen: I forgot! A solution that works: Watermark you images automated on serverside before they are going out. Lots of CMS can do this nowadays for you, e.g. TYPO3 (which uses OpenSource Imagemagick or graphicsmagick to do this).
@Clemens: That works when the watermark is effectively place. Sometimes the watermark can be cropped out, but if you put the watermark in the middle of the photo, it can ruin the photo too.
@david: yeah, watermarks are knot nice ;) But the best solution will be, just don’t load your photos up to the web. very easy, not cost-intensive and the only “99%-secure-way”. ;) (1% given to trojans or thiefs who take your hardware away).
But: You may watermark your photos with solid image in a corner of the photo (can be cropped out), or you put an semi-transparent png on the whole photo (with imagemagick e.g.). -> not really that nice, but you can see the whole photo and you can’t crop.
@Clemens: Again, this isn’t a bulletproof solution and wasn’t meant to be. It was mean to deter most non-technical people, which I think it does.
@David: it is real cool work for non technical people, i believe how much people can try to hack, that much we can start write a code to protect the image, that may protect from beginners to intermediate programmer, What do you say? Image selling site can give a relax breathe…………… from all side hack. ;)
Just to add, that this feature need not only helps protect the image, you can also use it when using the Sortables plugin, if you’re trying to drag images. Firefox et al does not need this, but IE will prevent you from dragging an image over another image if it thinks you’re dragging an image (sounds complicated I know, but try it and you’ll know). By replacing the image with a div (instead of a blank.gif in the example above), this solves that issue beautifully.
I had to laugh when you said “@Michael: Not one, and I mean that, person I know that doesn’t work in web knows what Safari is.”
So what about all those people using Macs who get Safari by default? They might not know what it is but they are using it, and since a lot of graphic designers use Macs, these are the people you are trying to protect yourself against.
And then you are switching off the entire right click user interface, which cuts off a whole bunch of features.
This just seems like pissing into the wind. Kind of reminds me about that guy who was trying to get a movement of people who would block Firefox because you could block ads with it.
I think the best designers probably don’t worry about lamers ripping off their work.
The problem is, you’re proposing a technical solution to a human problem. If data of any kind is getting sent over the internet, there is ALWAYS a way to intercept it. Pissing people off by mucking with expected web behavior (like disabling right-click) is going to lose you users. Accept that people are going to steal your images. That’s a fact of life. If you’re concerned about it, do them for copyright violation once they do, rather than make life difficult for innocent users.
@Duncan: The above code DOES work in Safari AND I’m doing absolutely NOTHING to the right-click functionality. Absolutely zero. Please check out the script’s example before commenting.
@Grant: Well said, it is a human problem. I haven’t, however, disabled right-click. Please try the example too!
http://davidwalsh.name/dw-content/preload-images/6.jpg
Firefox/Page info/Medias
watermark is the best method to protect your work.
@acms: The Page Info / Medias is what I would consider technical-savvy, so it doesn’t quite fit the bill for the type of user I’m trying to protect the image from.
David, I’m not too sure if it is something that you intend to protect, but by doing the following I can copy the photo without using firebug or view source (my 9 year old daughter learn that at school).
– go to http://davidwalsh.name/dw-content/image-protector.php.
– select some text for example ‘david’ by click and drag. ‘David’ should now by highlighted.
– use ctrl-a. The full page is now highlighted
– use ctrl-c
– Now open word, or outlook in a new document of email and use ctrl-v.
Et Voila
is your javascript designed to stop my 9 year old daughter that don’t look at ‘view source’ and don’t know firebug.
Regards,
Alain
This last comment is maybe the only one that is relevant for this article ! Crazy stuff and sarcastic people
Thanks, works in google chrome too. But (since code in javascript), in firefox if noscript is turned on, u can still download the image.
Anyone who wants the image can easily steal it. View source, print screen, disable javascript, firebug, ie developer tool, etc. Have you made it a little bit harder, yes, but not by much. What you have done is potentially pissed off visitors who rely on right click and other browser features. Why not add a watermark, then you are always protected and you won’t be potentially alienating your visitors.
El script no protege la imagen la imagen se puede descargar desde los temporales =S, script don’t work
Forget all of the tools like firebug etc.. just view the source.. the original pic is there clear as day..
Alt-PrtScr
Paste into Photoshop
Crop and Save
Image stolen
Javascript to prevent image theft is a wasted effort.
Sorry.
For the life of me, I cannot figure out why people keep out-thinking the room and giving me ways to get around this. Firebug is a programmer’s way to get it. My non-programmer friends don’t have photoshop or even know how to print-screen to get the screen in MS Paint for that matter.
What do people not understand about what I said:
And yet people keep citing these reasons. This is for the rookie web user. Are people even reading the article before posting? Honestly.
People keep pointing out it can be broken because this is a TERRIBLE approach.
This doesn’t protect against anyone with a rudimentary knowledge of their browser or even their computer.
This doesn’t protect against hot linking, google image search, etc.
This doesn’t work on alternative browsers, javascript disabled, or other possible configurations.
For each idiot user you are successful blocking you will likely upset someone trying to use the context menu. For many people the context menu is a fast way to create bookmark.
All you have done is block a TINY percentage of your user base and potentially pissed off many more. Scripts like this set beginners back as they find it and think it’s a good solution, never make their way to real/useful solutions like digital watermarks.
It may have been a fun exercise, but anyone wanting to truly protect their images need to learn how to use watermarks, digital or not. These scripts have been around since javascript was invented and they are useless. Nothing more then wasted bandwidth.
This is quite good.
Kudos!
If you’ve manage to avoid everything including Save Page & Prt Scr, I’ll definitely put some donations (if you have one) into it and use the code.
@Andy: You’re joking right?
Despite David pointing out that this approach is a far from foolproof way of preventing image downloads, it was followed up with 100 comments on how futile this exercise is. And then Andy’s comment! LOL.
@Jin: Haha well… maybe the donation part is. Haahaa
But on a serious note, it’s an idea ( maybe a challenge to some ) to actually write a script that will 100% stop visitors from ripping the images on the site, including the two I’ve mentioned earlier.
Think about it, of all the 100 exercises, Andy came to the picture and gave a joke idea on how to advance the script into a next level.
But of all my jokes, a ‘ hat’s off ‘ from a stranger whom first time came here, stumbled upon this code and add a remarks & idea out of a 100 is… priceless.
Hey… if I offended anyone, sorry aite.
This is the way I conversed. Peace no war… haaha :)
David.
Thank-you.
I really can’t understand either (after reading SO many negative comments by some real idiots it seems) why they JUST DON’T GET IT.
This is a solution to stop the casual image-grabber. This will not stop any geeks out there, but will stop all the non-geeks.
Non-geeks outnumber the geeks BY FAR. So that is alot of images saved. And really, the harder you make it for anyone to grab stuff, the less stuff gets stolen. Print-screen/open Photoshop/control-paste/crop/save is a pain in the arse compared to rmb/save image as.
All the music players music stations have put as much as they can in place to stop you from stealing the music they let you listen to….. but of course there are plenty of tools out there to enable you to capture the audio and save it to your drive for free. YouTube etc don’t want you to download the flv’s, but there is software to download and convert those flv’s into avi’s on your hd.
THE POINT IS THE MORE PROTECTION THE BETTER. NOTHING IS EVER INFALLIBLE.
So, until you come up with something that is infallible, shut up and thank the people who are helping just a little bit.
Ungrateful arseholes.
@Storm: Correction…
Until you understood what is the meaning to ‘sorry’ in my last comment… Sit there, Shut up, don’t touch the keyboard, don’t hit ANY key on the keyboard, just stick to your singing (or songwriting or whatever do I give a heck about ripped-off flash template), keep your thoughts to yourself, and be a little more civilized.
Here: : http://www.merriam-webster.com/dictionary/sorry
Talk about a false sense of security. This is like thinking your house will never be robbed because you locked the front door, but left the back/side door wide open. As for the average user thoughts, too often tech people look down on the average user. Give them more credit, they will surprise you.
@Andy, an interesting twist to this extremely long-winded thread expousing the problems with David’s implementation would be to suggest alternatives. Unfortunately, there aren’t any. Watermarks can prove that an image is stolen, but they do not prevent the theft.
So if someone is going to steal an image, your only viable recourse is prosecution or the threat of prosecution. Unless your images are very valuable, that isn’t likely to happen.
Can we declare this thread dead now?
all this talk about preventing the non-techinical user…
sorry but its all bull mate.
the non-techinical user only usually downloads images for their personal enjoyment whereas the “technical user” is the person who will use an image for further creative purposes or possibly generate income from it.
so as usual the inocent person who gets real enjoyment is given a hard time while all other nighthawks walk freely
First off, I wasn’t actually ranting at you Dave, so you can keep your sarcasm to yourself.
Second, it’s my wife’s singing/songwriting, not mine, and her or her site has nothing to do with this discussion.
Thirdly, I kinda agree with chief nighthawk…. it’s a ood point. So let’s say that this partial solution is good for those who really want it.
There is always SnapzPro. There is NO WAY to protect images from someone who wants them bad enough. If I can see it on my screen, I can grab it- I would say that most web designers Do have an idea of what they are doing and have some sort of screen capture utility and mild to expert Photoshop skills-
There are several ways to get that picture. i m not sure if i should say steal :)
as long as i see the source code, i can get it. right.
But but, if u use flash, unless they use screencapture, they cant steal it.
in html ,bottom line is, no javascript would avoid that.
dont waste your time dude.
striving to protect property on the internet is always going to be a struggle and to all the people who think this script is useless… well put it this way if you are on this page or anywhere near it, it’s not aimed at you.
Internet users are lazy… fact, if you place the smallest problem in their way they can’t be bothered. As a designer I face this problem everyday when getting a mook through to the checkout.
Obviously if i can digitally watermark any images on the website, maybe a visual watermark, then stop google bots indexing all the images on the website for it’s own glory… then yeah i’ll do that… but I also want something that’ll stop people like my dad grabbing images.
I also agree with the people who state that progress is made by examples… so if you don’t like this solution bring another to the table… who knows maybe you’ll learn something.
PS. this comment is not start of some debate.
Thanks for the useful code David. While I agree with the reasoning behind most people saying it doesn’t stop people getting the image if they try just a little bit. It will stop the casual user from having easy access to the images.
For one client of mine this is ALL they want. They won’t use watermarks as they don’t want the image ruined. And I’ve explained to them on several occasions how easy it is for users to get the images and how it’s not really effective to block save as etc..
Thanks again for providing this.
No ajax yes Flash :)
No problem to save the pictures in my browser firefox
your class is a joke
although it cant protect advanced user, but it good.
This is undoubtedly the dumbest script ever. If we are just going to start building security oriented scripts with the assumption that the user isn’t smart enough, what the hell is the point of security.
Keep in mind also that the “dumb” user is probably not aware of some secret scheme where they can make money by using these tiny web photos.
doesnt work in FF 3
Works for me.
David:
It’s a good thing it works for you, I guess you won’t be copying your own photos. Too bad the rest of us will be. :D
Very interesting tool, but what about the Print Screen or easily find the root of the image ?
David,
Hi :)
This is a so useful tool .
Is it OK if I use this script for my business?
Hi David,
Your script works as advertised. Against an atypical novice web surfer that uses a standard browser (IE/Opera/FF/etc). It does what you say.
For me as a developer, this was a useful technology example and has given me something to think about and a starting point for a more complete image security system I’d like to pursue.
BTW, for someone like me who uses Minefield (FF SSE2 optimized) 3.0.4 with Adblock/NoScript, this doesn’t work, of course. Not intended to be a criticism, as I said, it works as advertised. :)
I’ll look into this hopefully during the next couple weeks, and if I find a way to improve security against non-novice users, I’d be happy to share. :) I have been looking at using Python/Spyce (so that the work is done on the server side), but have become involved in a project based on Ajax, so I’m back to school learning yet another coding environment (though I have of course used Java).
As you say, it’s a hot topic! :)
Cheers, and thanks.
BTW, I meant to add that the people saying it doesn’t work in FF3 are probably using NoScript or something similar. And then of course, it won’t work. Duh! ;) :D
You can’t protect any images on the web, it is not possible, becouse:
1. you can save as full content with .html then you can get easely that image
2. you can do screenshot
3. you can disable javascript
4. and etc.
So simplest and easest way is using poor HTML.
Here is source code :)
:)
Nice. I tried the example link, and i observed that if you resize the window red mark moves out of the image and if you click on the part of the image that is out of red area you can do things like a normal image. Just an observation ;)
Good work.
(tested in firefox 3.0.1 at Debian Sid)
hmmm…. i’d say thats way too much effort when all you have to do is taking firefox and looking into the page properties (media tab) and there are a.o. all images listed and ready to be saved on disk…
…but granted, not all the average ‘dumb’ internet noobs know about that erm.. ‘trick’ and so they don’t get it in the first place why they cannot save that darn image :D
but a way better solution and ‘unbreakable’ for at least the no-pro user is to encapsulate images inside a flashmovie.
there are ways to decompile swifs, but you can easily make it pretty hard to achieve a proper result so even pros tend to gauge the effort
cheers :)
I downloaded the picture in 2 seconds..disable your js and volia
I’m still amazed by the number of people that still post ways to get around this. True geniuses.
Wow common people! Of course people are going to figure out a way around this but even so its a nice script and perhaps is enough for most people in a hurry. If people have the time and really want the content they can get it. Guess it applies to almost any content.
i like flikr’s more,
in this one if you save the page,you can save the image as well.
David, srsly, you gotta forgive them all :)
They have absolutely no idea how it’s like to own a non-it/geek portal for instance, where no less than 95% of visitors are complete rookies, thus they don’t get your point. They simply can’t understand there are so many people out there whose knowledge about browsers usage is limited to pointing & clicking the mouse and using the back button. So, all you my-friends-would-hack-it-within-seconds people – ask your grandma or grandpa to do so, and you’ll be blessed with clarity about this script’s purpose immediately.
And why preventing your grandma from getting the image on her hdd? Because your gallery is your PRODUCT. 1) It drives your stats (you want your grandma to pass the link rather than just the image), 2) it can be sold (e.g. viewed by still-internet-idiots premium account users), you want to be in control of your content / property (you put hard work into) and variety of other sub-reasons. But the most basic idea is that your photos are meant to be viewed and seen, not downloaded. Do you take your camera along to the cinema? No, you pay, you get in. Ok, you’ve seen it? Then get out :)
So, what you people do is philosophizing. Go on while I’ll be using this very practical script on my upcoming mootools-based portal (along with watermarks for sure, so when it spreads – and surely not via disabled hotlinks – it gets promoted by the transparent site address). Premium users will get access to downloadable full-resolution photos anyway (still watermarked a little). The rest will face an invisible wall they won’t pass no matter how many h4x0r workarounds you post in here.
Bla bla bla, everybody always bitch about what people could do better, instead of appreciate what they did.
Nice job David. I used your technique for the random computer user to protect images. There is no need for any other methods. You could always use this method and call the images through ajax in another file, but ppl could get it anyway by looking through the code or PrtScn the screen, but who cares? We can’t stop them, but we can make it harder for them to reach the goal right? ;)
Keep up the good work and thanks for the code.
It doesnt work, i browse with IE 5.5 on Win98
;-)
Hi Buddy,
But any one can save all tha images or graphics by going to file menu of browser and then save as the page.It will give all the images which jave been using in this page.
Please help us for this buddy.
thanks & regards
Parveen
I also couldn’t get this script to work. Not in IE7 or FF3 (Mac or PC).
It would be helpful to include any the MooTools “more” dependencies (if there are any).
Just one thing discovered recently: adding oncontextmenu=”return false” do the body tag disables all the right-click stuff in all browser except Opera, including images (also ajaxified in lightboxes). I guess that’s easier. Of course turning JS off unlocks the door.
Find a way to make a little more or less the same
<script language="JavaScript"> function protector(){ img = new Image(); img.src = '6.jpg'; document.getElementById("gif").width = img.width; //Ancho; document.getElementById("gif").height = img.height; //Alto; } </script> <body onLoad="protector();"> <div style=" background:url(6.jpg) no-repeat;"> <img id="gif" src="blank.gif"> </div> </body>as already commented above is not really to protect the image ;)
I’ve tried getting this to work for images within a variety of div elements to no avail. I see that on your demo page only the main image is protected, but not your logo image. Is there a way I can be targeting all img elements on the page, not just those img tags not within other elements?
David!!!
This is a great WAY TO PROTECT AGAINST THE AVERAGE USER… MY mother and grand parents had problems trying to Right click and save or copy the image to the desktop… I’m amazed that this scripts works exactly the way you said it would.
However when i had a couple computer/web buddies look at it they got the picture pretty easy. OH wait you SAID THIS WAS FOR THE AVERAGE USER!
Keep up the great work David! Forget about the people that can tell you how to steal the image, but can’t figure out how to read to see what the script is for.
@ryan: just to think about: what is the sense about to protect an image to be downloaded by your mother (or grand parents!!)? Does she make the big business with your image? and, if she reuses e.g. on myspace, wouldn’t it be of more interest for you to have some cheap advertise by having a watermark within the image?
And if an user won’t be able to save the image because of the ‘protection’ through this script, isn’t it most likely that this person won’t be able too to crop a watermark on the top left corner of the image?
As someone said before, and it printed this post out and posted it on the frontdoor of my office:
“A demonstration that, using a pre-existing API, one can write a non-solution to an unsolvable problem best ignored.”
I agree that there is not complete security for the photos..
Congrats to the coders!
What a funny discussion, so many ways to steal images, when you use bookmarklets mypage or even readability, it remove blank.gif also immediately.
Does not work in Google Chrome 2.0.156.1
It seems very cool. I’m gonna try this stuff.
This doesn’t work using safari……on a mac……at all…..
http://davidwalsh.name/dw-content/preload-images/6.jpg
It doesn’t work quite well when resizing the browser frame, the protection gets off.
What you can see in webbrowser it’s not possible to protect: images, javascript, flash, css and etc. There exist lot of methods workaround any protection or remove it. Javascript protection is the bed thing at all.
Context menu still works in Opera 9.5/Windows. Dragging, however, doesn’t.
How do I use this on my wordrpress blog? Where do I put the code?
Hi David. Thanks for your job (and for your patience toward the brilliant people trying to hack it !).
I’ve found another trick to “protect” images : I copy the src attribute of my tag as a background-image of this , and then I put a blank image into the src.
This works without a framework, but one can probably rewrite it for Mootools quite easyly.
More details there : http://sitesweb.abondance.free.fr/copyleft/billet.php?idBillet=20 (all in french !)
Your codes totally don’t work in IE7. I wonder how u have placed such biased.
@Dhruba Jyoti Deka: Well… Yes it does.
I have saved all the images from your demo page, to my desktop. So your script is flop.
This article is nice, but it doesnt work in FF 3
There are several ways to get that picture. BTW: You’re wright. Don’t work in FF 3.
If the protector doesn’t work for you, there are two options:
– set height and width tags within the (i.e. ).
– run the code with
window.addEvent('load', function() {The thing is that Javascript is not getting width and height properties of the image that is being loaded (and for some reason uses instead ones of the parent element) so we can set them explicitly or run the script when the page is completely loaded.
Context menu still works in Opera 9.5. Dragging, however, doesn’t.
I tried on Ubuntu 10.04 with Chrome 5.0.375.70 and FF 3.6.3. I could save image from right-click menu and by draging it.
Anyways, thanks for the effort. Keep up with good work.
Jovica >
I guess that most people who don’t use Windows OS know how to get the images despite any protector. But then I believe the rate of people who use it inappropriately is lower among them.
The other side are BFU’s.
It’s very good.
I like this.
Thanks for share.
And I wrote something to introduce this project for my readers.
You can find the post about this in my website.
If something is wrong,pls figure it out.thanks.
good code thanks
Ummm…Why would a novice steal an image and even if I did, how would you protect an image from me taking a photo from my mobile phone?
I’ve been looking for something to prevent image download
How can I implement this code I have now a javascript thumbnail fading to large image script…
thanks
Wow. I have to say, without a doubt, that the comments on this thread are some of the most oblivious I’ve ever read. The comments are a bit like selling someone a car, warning them five times at the top of your lungs that they need to fill up the gas tank – and then having that person lead an angry mob to your door because they ran out of gas five blocks down the street. NO, you can’t definitively protect any content on the internet, and if it were to be made possible, it would make the web unusable for a lot of casual users and virtually all developers, and people would be screaming about all the things they couldn’t do. But it is a solution that will work for a casual user, or even a more technical one who doesn’t want to be bothered working around it – EXACTLY AS YOU REPRESENTED IT TO BE. Sheesh.
But to add a constructive note to this message of disgust: This comment thread underscores THE main point of failure between technical folks and non-technical folks – the fact that techies have NO clue as to what goes on in the minds of people who aren’t so inclined. Routinely, they will either expect the less-technical to know more than they do (and get condescending and/or angry if they don’t) or give them credit for no intelligence whatsoever (“now go to the lower left corner of your screen and click the button with the four colored boxes…”). Over and over, I have seen miscommunications of this type. Combine this with the fact that most coders, designers and programmers are COMPLETELY unaware of the needs of the people they’re building sites and apps for, and the results can be disastrous.
And now I shall relate a tale from the misty age of the dot-com era, when I was working tech support for a long-gone web hosting company. This was a time when people did actually call tech support to report that their computer’s “cup holder” was broken (don’t tell me it’s an urban legend, okay, because IT HAPPENED TO ME – I put that guy on hold, announced it to the entire tech floor, and put him on speaker so that everyone could hear it for themselves; we were careful not to burst into laughter until after I’d muted the line) and the company mainly targeted these clueless users as customers, offering free sign-ups to new ISP users and such.
Anyway, it’s some odd hour of evening, either just before or just after midnight, the pace of calls has slowed and upper management has long since left the building; the tech floor manager had dimmed the lights, someone else had music playing, a bunch of us were gaming between calls, you know, just kind of chilling and cruising through the last few hours of our shifts.
So I get this call, and I spout the automatic greeting, and a gentleman – a somewhat older gentleman, from the sound of it – says, “Good evening. I’m , and I make eyeglasses.”
This was enough of a non-sequitur to catch my attention. “Um,” I said, “okay…”
“I’ve been making eyeglasses for forty years,” the man went on to say. “No matter what your prescription is, no matter how odd or how strong, I can make it for you.”
“Uhhh,” I said cautiously, “okaaaaay,” wondering where this was going.
“But do you know what I can’t do?” my caller asked me.
“Uhhhhhhh,” I responded, figuring, okay, either it’s a misguided sales call or the type of ‘I’m taking a lingerie survey, what color are your panties?’ calls that we female techs got sometimes. “What can’t you do?”
The man paused, to give proper weight and emphasis to his answer. “I don’t know how to make a web page,” he said solemnly. “Will you help me?”
And after a stunned moment, I burst into laughter. First, because his delivery was awesome (my account of events really doesn’t do it justice) but also because it was such a basic, simple truth. There was, had always been, an unvoiced assumption amongst the tech support folks, tacitly encouraged by the upper-echelon crowd, that ignorance of web technology implied stupidity – and it was at that moment that I realized that this was not merely insulting but utterly false. It was a realization that changed my outlook and attitude toward tech support, and later, programming – and greatly facilitated later projects: instead of assuming I knew the best way to build an application, I realized that my technical knowledge didn’t change the fact that I was as ignorant of my end-users’ needs as I was about how to make eyeglasses, and let the end users tell me what THEY needed the app to be.
Heh. Sorry to write a freakin’ BOOK, here, and one that’s basically tangential to the topic of the post – but boy, did this bring back a string of memories. :)
Anyway, cheers to you for your patience. :)
Yeesh. Sorry about that – I swear, there WERE paragraph breaks in that second paragraph when I posted it! Would try to repost it correctly, but I don’t want to make it worse. ;)
I am using the newest version of IE for Win 7…and I was able to right click on your image of the girl on your link.
How long ago was your little moo thing written? Sorry, but it doesn’t work with the newest IE (for Win 7)…haven’t tried any of the other four browsers I use, but it doesn’t work with the new IE.
Sept. 18, 2011
Unless I am much mistaken, Google Image Search would find (and offer to display in a new window) images protected by your code.
But it seems to me that with the ‘give them credit’ thing you are arguing for your right to fair use of that image, which it just so happens is essentially all your code will interfere with.
This stuff just writes itself.
It is nice way to secure photo — but it doesn’t protect it from being dtolen, it is enough to view the source and get the photo without any problem.
For a people who just want to copy it – it will prevent them from it, but if someone wants the photo it is delivered on a silver plate.
I use firefox with the NoScript add-on installed so was able to download/drag-drop your protected photo no problem. I’m not too fussed about people using images from my site but they could at least credit where that got it from – that’d be the poilte thing to do.