Читатель нарушает Javascript защиту изображений от щелчка правой кнопкой мыши

Question

Я знаю, что защита изображений далеко не надежна. Однако клиенты просят об этом, поэтому у меня есть Javascript на сайте, который предназначен для предотвращения сохранения / загрузки правой кнопкой мыши.

Похоже, что Reader View игнорирует как Javascript, так и CSS сайта. Я попытался добавить {display:none} на основе правила.moz-reader-content (Firefox). Я предполагал, что это так во всех браузерах.

Поиск также не позволил обнаружить читателя.

У кого-нибудь есть предложения или известно решение этой проблемы?

Answer 1

Как вы знаете, не существует полноразмерных решений. Независимо от того, что вы делаете, если он виден, его можно скопировать. (Со скриншотом в крайнем случае).

При этом простое и удивительно эффективное решение состоит в том, чтобы просто наложить каждое изображение на прозрачный файл.png.

<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>

Если щелкнуть правой кнопкой мыши на изображении, то щелкнет наложение, а не само изображение. (Конечно, вы захотите дать оверлею менее очевидное имя).

Кроме того, вы должны сделать водяные знаки на самом изображении.

Чтобы обойти проблемы Reader View (я не уверен, о каком Reader View вы говорите, кстати), вы можете попробовать использовать javascript, чтобы фактически заполнить сами изображения. (Предполагая, что ваш читатель не разрешает просмотр).

например:

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);

В последнем примере с js вам также нужно установить стили CSS для абсолютного положения двух изображений в #imagecontainer.