Защита изображений от скачивания

Начнём с того, что любая защита чего-либо на сайте от скачивания — это защита от новичка. Любой достаточно опытный пользователь без труда обойдёт эти преграды, так что ниже я покажу способ, который не позволит просто перетащить картинку со страницы на рабочий стол или в папку и не даст сохранить изображение в галерею мобильного устройства.

Отключение контекстного меню

Бесполезно для мобильных телефонов. Зажав пальцем картинку, вы всё равно сможете сохранить её в галерею и делать с ней дальше всё, что угодно.

Самый простой скрипт для этого:

<script type="text/javascript">
    document.oncontextmenu = function (){return false};
</script>

Возможно, есть более продвинутые скрипты, которые отключают контекстные меню и на телефонах / планшетах, я не стал искать, т. к. остановился на втором способе. Он чуть сложнее, но сработал как на компьютерах, так и на телефоне.

Блокировка скачивания картинок

В <head></head> добавляем:

<meta http-equiv="imagetoolbar" content="no" />

Этот мета-тег отключает тулбар при наведении на изображение, через который можно сохранить картинку.

Добавляем в CSS селектор .locked:

.locked {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
}

И для селектора .locked добавляем полифил (автор кода рекомендует также добавить его в <head></head>, но у меня прекрасно сработало и в конце страницы):

(function () {
    "use strict";

    var el = document.createElement('div');
    el.style.cssText = 'pointer-events:auto';

    if (el.style.pointerEvents !== 'auto') {
        el = null;

        var _lock = function (evt) {
            evt = evt || window.event;
            var el = evt.target || evt.srcElement;
            if (el && /\slocked\s/.test(' ' + el.className + ' ')) {
                if (evt.stopPropagation) {
                    evt.preventDefault();
                    evt.stopPropagation();
                } else {
                    evt.returnValue = true;
                    evt.cancelBubble = true;
                }
            }
        };

        if (document.addEventListener) {
            document.addEventListener('mousedown', _lock, false);
            document.addEventListener('contextmenu', _lock, false);
        } else {
            document.attachEvent('onmousedown', _lock);
            document.attachEvent('oncontextmenu', _lock);
        }
    }
})();

И последнее. К изображению, которое нужно защитить от скачивания добавляете class="locked". Всё. Изображение невозможно перетащить на рабочий стол или в папку, на мобильных устройствах оно не выделяется, при клике правой кнопкой мыши в контекстном меню нет пунктов «сохранить».

Кстати, для тех, кто как и я будет использовать этот метод в пейдж билдерах, если класс .locked добавить к родительскому элементу изображения, работать тоже будет.

Но, конечно же, по-прежнему можно открыть веб-инспектор и спокойно скачать нужный файл.

Отключение контекстного меню

Блокировка скачивания картинок

Вход