Protecting an Image from downloading by Right-Click

Question

EDIT: In response to many comments I do know that there is no sure fire way to fully protect an image from being downloaded. This method is to prevent the casual user from downloading by simple right click. The best way probably would be simply copyrighting your images and if you are very concerned would be using a service like Digimarc to digitally watermark your image. Now to the question:

I came across a site that is using a GIF overlay over their actual image so it protects the image from users right clicking and downloading the image (though you can still grab the actual image from within the code). The code they use to do this is:

<div><img src="-Transparent GIF File-" alt="" width="530" height="558" 
border="0" original="-Actual Image Displayed-" /></div>

My question is the original tag is not a real tag and is used and translated by Javascript of some sort. I would like to replicate this on my site. Can someone help me find this script?

You know that a user can obviously get around that terribly easily, right? — Dan, Jan 02 '12 at 05:21
We can help you with programming-related questions, but asking us to find a script for you doesn't exactly fit here. Please read the FAQ. — Kenaniah, Jan 02 '12 at 05:22
Given you've managed to read the html source of the page you were looking at why don't you also look at the associated JS? The `original` _attribute_ is a non-standard _attribute_. Although technically not valid html most (all?) browsers will ignore it yet allow it to be accessed from JS. — nnnnnn, Jan 02 '12 at 05:36
@Dan - Yes I realize this. I edited my question to make a "Disclaimer" about that. — L84, Jan 02 '12 at 17:50

Scott · Accepted Answer · 2012-01-02T07:50:42.807

6

This is pointless. If a browser displays an image, it can be taken. Any attempt to prevent that is merely site overhead that can very easily be circumvented.

You're best protection is to put a copyright notice on the images themselves.

In any event, if you really want to swap the original attribute you can...

$(function() {
var o = $('img').attr('original');
$('img').attr('src', o);
});

Demo here

but... that doesn't do anything to prevent the user selecting and saving the image tied tot eh original attribute.

edited Jan 02 '12 at 07:50

answered Jan 02 '12 at 05:41

Scott

21,475
8
43
55

you can prevent someone from copying your image. With a bit of php if you are in the context of the site with a given key for the client you could request the image through a script page and if the signature of the key is not valid return 404. Also using the oncontextmenu false technique you can easily prevent people from downloading pictures form your site. – khael Jan 02 '12 at 06:16
2

@kheal, sorry, you are incorrect. I can always take a screenshot and get any image. Again, any attempt to prevent someone grabbing an image is entirely pointless. The best protection is to add a copyright notice directly on the image. – Scott Jan 02 '12 at 06:19
I wouldn't say it's pointless, but it is a very small deterrent at best and it only prevents newbies who know nothing about browsers or HTML. Anyone with a clue (or the ability to do a Google search) can easily circumvent the overlaid image to get to the real image or worst case just grab a screen shot of it. – jfriend00 Jan 02 '12 at 06:19
You are right, i didn't thought it through to this level. How about a javascript keylistener for the print screen key (this is just a fun idea ) which would make your pics black. And for the google part if the pics are not in the context of the page the script will return null so it still stands from this point of view. Anyway this would be a really cool topic. – khael Jan 02 '12 at 06:27
@khael -- if the image is rendered on the screen (within an img tag), it has been downloaded to the users machine(cache). Plain and simple. No screenshot required. A 1 - 1 copy of the original is sitting on the users machine to do whatever they want with. No amount of programming tricks, not matter how "clever", will change this. – Mad Man Moon Jan 02 '12 at 07:01
Thanks for the information, yes I realize this can be easily circumvented but it is an idea to prevent the casual user from downloading images. With the web there is no way to fully protect your images. Flash might be the hardest for most people to grab but there is still a way. => – L84 Jan 02 '12 at 17:46
I just attempted to use the script to test it and it pulled the same image for every img on the page. How would I fix this? (It pulled the first image) – L84 Jan 03 '12 at 05:14
I suspect what the site you mention is actually doing is using jquery/javascript to set the "original" attribute as a background image via CSS. The script I included doesn't do that, but it would be a simply thing to change the .attr() to a .css() statement. – Scott Jan 04 '12 at 12:05

score 3 · Answer 2 · answered Feb 28 '12 at 19:51

A simpler solution for what you're trying to accomplish is to add all of these attributes to the img tag:

ondrag="return false"
ondragstart="return false"
oncontextmenu="return false"
galleryimg="no"
onmousedown="return false"

Also, to optionally make the image print smaller, add this to the img tag:

class="imgPrint"

And include this related CSS:

@media print
{
    .imgPrint
    {
        width: 40%;
    }
}

score 2 · Answer 3 · answered Jan 02 '12 at 05:24

2

You can do this without original tag also :

http://rainbow.arch.scriptmania.com/scripts/no_right_click.html

see this link.

I think this is what u want, this link may help you.

answered Jan 02 '12 at 05:24

Dhruv

10,291
18
77
126

This link was very helpful - a very quick way to get a simple right-click protection in place while a more complex solution is being developed. – redhotspike Jul 06 '13 at 19:25

score 1 · Answer 4 · answered Nov 20 '15 at 17:07

This is my implementation for a light protection of images.

It will create a transparent cover DOM element over the image (or text). If you disable javascript the image will be hidden and if you remove the cover the image will be hidden on mouse over. Also right click on images is disabled.

You can always printscreen, grab from the downloaded resources, etc, etc. This will only filter the most basic ways of download. But for a more convenient protection you have to hide the image path and render to a canvas object.

You can improve this, but there is always a method to get the image.

Tested on major browsers and working!

HTML

<div class="covered">
    <img src="image.jpg" alt="" />
</div>

JAVASCRIPT + JQUERY

$('.covered').each( function () {

    $(this).append('<cover></cover>');
    $(this).mousedown(function(e){ 
        if( e.button == 2 ) { 
            e.preventDefault();

          return false; 
        } 
        return true;
    });

    $('img', this).css('display', 'block');

    $(this).hover(function(){
        var el = $('cover', this);
        if (el.length <= 0) { 
            $(this).html('');
        }
    });
});

CSS

cover
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.covered
{
    position: relative;
}

.covered img
{
    display: none;
}

Protecting an Image from downloading by Right-Click

4 Answers4