1

I know protecting images is far from foolproof. However, clients ask for it, so I have Javascript on a site which is designed to prevent right-click saving/downloading.

It appears that Reader View ignores both the Javascript and the site's CSS. I tried to add {display:none} based on a rule .moz-reader-content (Firefox). I've assumed this is the case in all browsers.

Searching hasn't turned up a means of detecting reader view either.

Does anyone have any suggestions or know of a solution for this problem?

GLCoder
  • 135
  • 8

1 Answers1

1

As you know there are no full-proof solutions. No matter what you do, if it's visible it can be copied. (With a screenshot as a last resort).

With that being said, a simple and surprisingly effective solution is just to overlay each image a transparent .png file. 

<div id="imagecontainer" style="position:relative;">
    <img src="yourimage.png" style="position:absolute;top:0px;left:0px;">
    <img src="transparent-overlay.png" style="position:absolute;top:0px;left:0px;">
</div>

Right-clicking on the image, would then click on the overlay and not the image itself. (Of course, you'll want to give the overlay a less obvious name).

Additionally, you should watermark the image itself.

For getting around Reader View issues (I'm not sure which Reader View you're talking about btw), you could try using javascript to actually fill the images themselves. (Assuming your reader view doesn't permit js).

eg:

var i = document.createElement('img');
var o = document.createElement('img');
i.src = 'yourimage.png';
o.src = 'transparent-overlay.png';
document.getElementById('imagecontainer').appendChild(i);
document.getElementById('imagecontainer').appendChild(o);

In the latter js example you'd also need to set your css styles to absolute position the two images within #imagecontainer.

Bangkokian
  • 6,548
  • 3
  • 19
  • 26