Какой максимально эффективный способ защиты от скачивания изображений с сайта вы знаете?

Question

[Margo1964]

Первое, что приходит на ум - составной URL из переменных, результат конкатенации которых выводится в canvas с запретом контекстного меню.
Какие еще могут быть варианты для усложнения скачивания картинок?

Comments

[Ильдар Гизетдинов]

canvas можно сохранить как изображение

[Margo1964]

Ильдар Гизетдинов: с запретом контекстного меню

[Ильдар Гизетдинов]

Margo1964:
var dataURL = canvas.toDataURL();
var image = new Image();
image.src = dataURL;

[Ильдар Гизетдинов]

Margo1964: спасение от специалистов которые этим регулярно занимаются, все равно нет

[Сергей Томинов]

Средств полной защиты от скачивания нету. Есть варианты с использованием background-image (aka защита от нубов), canvas (как Вам уже показали выше, тоже не дает полной защиты). В общем все зависит от того насколько Вы заморочитесь с этим вопросом - в конечном итоге все картинки, в любом случае, попадают в кэш браузера, откуда их так же при необходимости можно вытащить.

[Saboteur]

Скриншоту уязвимы все канвасы и запреты меню. Кроме того обычный noscript блокирует ваши блокировки меню. Только сами изображения патчить

[Margo1964]

Saboteur: Если будет noscript, не загрузится canvas

[Saboteur]

Margo1964: в современные браузеры уже встроены инструменты, чтобы на ходу подпатчить javascript. В общем никакой метод, кроме изменения самой картинки с наложением водяных знаков и подписей, не спасет от продвинутого пользователя.

[Margo1964]

Saboteur: Защита от продвинутого пользователя не нужна. Нужна максимально возможная защита.

[Saboteur]

Margo1964: Простите, ваша фраза содержит взаимоисключающие параграфы.
Вы никак не защитите сайт от обычного print screen, на который способна любая домохозяйка, если ей это показать.

[Владимир Сергеевич]

Saboteur: Согласен, даже парсер на casperjs просто отскриншотит все картинки

Answer 1

[Adamos]

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

Comments

[Сергей Горностаев]

Причём водяной знак вставлять не только с названием сайта, но и именем пользователя, которому эта картинка отображается. А в случае обнаружения утечки, банить виновника торжества.

[Adamos]

Сергей Горностаев: ну, это уже в клинических случаях - если картинки готовы воровать даже с водяными знаками.

[xmoonlight]

Сергей Горностаев: т.е. закрыть изображения от паблика? только авторизованным пользователям показывать?! (или я не понял что-то...)

[Сергей Горностаев]

xmoonlight: да. Или в хорошем качестве только авторизованным.

[Adamos]

xmoonlight: теоретически уникального посетителя можно создавать и хранить на каждую сессию браузера, даже без авторизации. Если нужно именно отследить утечку, а не пресечь ее изначально.

[xmoonlight]

Adamos: ага: одна статейка - один PDF со всеми данными клиента)

[Adamos]

xmoonlight: ну, тема была про картинки вообще-то. Ну, и браузеры сейчас умеют не только PDF, но и SVG - в нем нахимичить проще, а вычистить это нахимиченное может оказаться сложнее ;)

[xmoonlight]

Adamos: да даже если и окажется нахимиченное на другом сайте - всё равно толку нет... даже и не знаю для чего это затеяли)

Answer 2

[xmoonlight]

1. Самое простое - Watermark.
2. Сложнее - частичная доставка с сервера выбранной области изображения с шифрованием и расшифровкой на клиенте, и никогда не отображать изображение целиком. (т.е. типа контейнера со скроллом внутри канваса по аналогии с гугл-мапс).
3. Хардкорный стиль - Adobe Flash Application!
4. "Puzzle" - "хаотичная" (только с виду!) динамическая нарезка в режиме спрайт-карты и сборка через js. Формула - тоже разная каждый раз.
5. "Калька" - многослойное изображение из нескольких с альфа-каналом (с прозрачностью)
6. Класть изображение в JS-контейнер на серверной стороне, помещая в него метод отображения с привязкой к IP и браузеру клиента, и ровно на 15 секунд (чтобы загрузил и всё) и бинарные шифрованные данные, после загрузки скрипта у клиента - запрашивать токен с сервера на расшифровку данных.
(методы можно комбинировать)

Comments

[webinside]

print screen и к черту все эти алгоритмы.

[xmoonlight]

webinside: п2 )))

[RuJet]

xmoonlight: print screen print screen print screen print screen + скрипт для склейки))

[xmoonlight]

RuJet: )) и + для каждого куска скрипт вытравливания ватермарк и тогда готов профит)

Answer 3

[Gleb Gryadk.in]

1 - то, что показывает браузер, он уже скачал в %temp%
2 - можно запихнуть картинку во flash, с пессимизацией от яндекса, за не мобильный контент
3 - можно класть картинки как background-image:url(http://.............);
Но ни что не помешает юзеру нажать PrtScr

Полагаю, фотостоки уже обмусолили этот вопрос. Если бы был другой способ - не было бы ватермарков на стоковых фото.

Comments

[Дмитрий]

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

Answer 4

[zuluss]

Нет у вас методов против Кости Сапрыкина ( Место встречи изменить нельзя) :-)

Answer 5

[A K]

Самый эффективный способ – это не выкладывать изображение на сайт.
Извиняйте за такой ответ, но лишь он реально может защитить от скачивания, а все остальные может преодолеть специалист с уровнем знаний чуть выше джуна.

Answer 6

[Денис Букреев]

Я как-то раздумывал над одним способом.

Берешь картинку, разбиваешь ее на много блоков (по какому-либо алгоритму) и меняешь все эти блоки местами.
Получается пазл.

А при инициализации картинки просто собираешь этот пазл по типу спрайтов по тому же алгоритму.

Comments

[artem_music]

print screen - и картинка у пользователя

[Денис Букреев]

artem_music: она не будет в высоком разрешении
еще можно по принтскрину какую-нибудь херню выводить на картинки

[xmoonlight]

Денис Букреев: реально! блурить фильтром CSS3, если вкладка потеряла фокус )))
Демка события фокуса вкладки: www.thefutureoftheweb.com/demo/2007-05-16-detect-b...

[xmoonlight]

Денис Букреев: PrntScrn перехватывать + Blur on lost Focus + правый клик и drag-n-drop отключить на изображениях - будет проблематично получить фотку стандартными методами)

[Денис Букреев]

xmoonlight: ну можно JS отключить) но это только для профессионалов
в некоторых браузерах так и пишут
так что простой смертный испугается

[xmoonlight]

Денис Букреев: можно и img src сделать другими в разметке, а загружать через JS ))) пусть отключают )

[Денис Букреев]

xmoonlight: ну все, можно уже плагин писать и становиться популярными)

[xmoonlight]

Денис Букреев: ))))
Правда вот захват экрана по (Alt/Ctrl+)PrintScreen - нужно еще тестить перехват нажатий на JS!
А есть же еще и другие (сторонние) захватчики экранов с другими hot-keys'ами и запись экрана - тоже есть)
Так что это не сильно популяризирует нас))))

[Evanre]

xmoonlight: Я пользуюсь Snagit с другой комбинацией клавиш (не PrintScreen), и у меня не составило никакого труда заскринить страничку по ссылке выше в состоянии фокуса.

[xmoonlight]

Евгений Жученко: ну да... я тоже пользуюсь аналогичным: ABBYY Screenshot Reader

[Денис Букреев]

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

[Дмитрий]

друзья, вы до наивности смешные. 1) картинка скачалась - отключаем JS, PrtSc 2) написать юзерскрипт для хрома, который отменит ваши любые ухищрения. PrtSc 3) много способов которые можно придумать в ответ на ваши ухищрения. если картинки не стоят денег - никто не будет тратить время и деньги на их защиту. если же они чего то стоят - найдутся и те, кто потратит своё время на то, чтобы ломануть то, что писали вы. так всегда было и всегда будет.

Answer 7

[Данил Бирюков-Романов]

Нет способа, только ватермарка.

Потому что любая защита обходится при помощи selenium - просто сделал скриншот нужного изображения и сохранил его.

Comments

[xmoonlight]

Данил Бирюков-Романов : Также нет способа шифровать данные, чтобы никто не мог прочитать))
Весь вопрос - в отношении временных затрат на шифровку (E) и дешифровку (D), или другими словами - криптостойкости.
Если объём данных - это длина вектора R из точки центра координат, а оси X и Y - это время (T) на шифровку(ET) и дешифровку(DT), соответственно (вверх - временные затраты дешифровку), тогда коэффициент криптостойкости такого алгоритма шифрования будет: 1-cos(ET)/sin(DT) -> 1, но никогда не достигнет абсолютной единицы.

А... ну да, про ватермарку-то я хотел вначале сказать...
Поэтому, ватермарка может быть легко убрана тоже через:
1. окружающие/смежные пиксели
2. нейросеть+части этого же изображения (или другие схожие картинки из интернета) ))))

Answer 8

[Stac]

Опубликуйте на сайте текст лицензии на языка страны сайта и соответствующей законам страны сайта, в которой напишите, что изображения скачивать нельзя.

Найдете того, кто скачал - предъявляйте претензию или судебный иск, как принято в стране сайта.

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

Answer 9

[Artyom Lagun]

мне кажется, что того, кто хочет скачать картинку понравившуюся, не остановит и watermark. а все эти способы блюрить при потере фокуса и картинка на background/iframe - никак не спасёт от inspect element.

самый грамотный ответ дал Stas - разместить текст лицензи на использование картинок и если нашли тех, кто картинку использует не правомерно - иск в суд.

Answer 10

[Школьник.]

Можно использовать Canvas или Background. Или над изображением поставить невидимый div, код которого будет находиться далеко от самого изображения(z-index).

Comments

[xmoonlight]

PrnScr)

[Школьник.]

xmoonlight: вопрос стоял об усложнении скачивания.

[xmoonlight]

Владимир Мусихин: "Canvas или Background, Или над изображением поставить невидимый div" + "вопрос стоял об усложнении скачивания. " = Абсурд!

[RuJet]

В ресурсах dev tools картинка все равно найдется.

Answer 11

[123 456]

WaterMark, при том такая, чтобы была практически по всему изображению, довольно заметная. Если разместить её "тихо-мирно" где-то снизу, то просто обрежут и станут у себя картинку показывать, как будто так и было. Запрет контекстного меню, загрузка по кусочкам и незаметная сборка на экране пользователя и тому подобное с успехом разбивается об примитивную комбинацию "Ctrl+PrtScr" (снимок экрана), насколько бы хитрой она не была. Способа отображать изображение в изначальном качестве и чтобы не украли просто нет.
Гораздо реальнее защитить картинку запретом от копирования на другие сайты при помощи правил в файле ".htaccess" для Apache и пользовательского Referer: если человек перешёл на сайт через Google, иной поисковик, или же с другой страницы твоего сайта, то показываем ему нормальную картинку, а если пытается посмотреть её с какого-то непонятного ресурса, то сразу же демонстрируем картинку-заглушку. От копирования не спасёт, зато лишнюю нагрузку не по теме на сайт снизит.

Answer 12

[Light Air]

Только ватермарк. Я крайне не рекомендую другие способы (как советуют тут, во флеш, пазл и т.д) это скажется на сео. К примеру кто-то сделал скриншот картинки и выложил на свой сайт, по мнению поисковиков у него будет уникальный контент и "авторство картинки", у вас либо вообще ничего либо "чужая" картинка.

Comments

[xmoonlight]

тут согласен!
Предлагаю так:
Нужно крупную картинку максимального качества делать с ватермарками, а уменьшенную копию плохого качества (заблуренную слегка, например) - БЕЗ ватермарков.
И уменьшенную - класть как обычную IMG без всякой защиты и тогда поисковик по миниатюре установит "авторство картинки" и уникальный контент - будет на сайте с этой миниатюрой.

Answer 13

[ZoomLS]

Нет такого способа. Если нужно будет скачать изображение - его все равно скачают.
Зачем тогда тратить время на всё это?

Answer 14

[Антон Штинов]

Еще есть способ - выводить картинку на канвас не полностью, а например через строку. За второй проход выводить картинку на канвас через строку, но вторую часть. Если сделать очень быстрой смену вывода двух частей картинки, то на вид она будет цельная, а при попытке принтскрина получится только искаженная картинка.
Вот пример https://www.patrick-wied.at/talks/image-protection...

Comments

[RuJet]

Владельцы мобильных девайсов скажут вам "спасибо". Владельцы медленных мобильных девайсов скажут вам "спасибо" вдвойне.

[FRiMN]

Оно же мигает? Разве нет?

Answer 15

[FRiMN]

Я не знаю, как это реализовано, но есть интересный способ у AirBnB.

Есть два варианта картинки:
1. без ватермарка -- https://a2.muscache.com/im/pictures/52149945/33130...
2. с ватермарком -- https://a2.muscache.com/im/pictures/52149945/33130...

Скачать можно обе, но первую можно посмотреть (открыть) только в браузере. Есть предположение, что файл просто "портят", либо он вообще не JPEG: Error interpreting JPEG image file (Not a JPEG file: starts with 0x52 0x49).

Comments

[FRiMN]

А, понятно: content-type:image/webp

[xmoonlight]

FRiMN: Просто контроль ватермарка через get-переменную.
1. Для тех, кто обрезает get-параметры - с ватермарком...
2. Для тех, кто не обрезает - без...
Очень странная логика у них...
Если есть линк на тип данных изображение - то, явно, что никто не будет резать линк (всё, что после знака "?") при парсинге.