Защита изображений на сайте с помощью ImageKit

В этом руководстве мы рассмотрим, как Instagram ограничивает доступ к URL-адресам картинок. Мы применим этот метод, чтобы защитить веб-сайт от копирования графического контента.

Как Instagram защищает картинки?

Попробуем скопировать URL-адрес картинки, опубликованного в Instagram, а далее настроить его.

Защита картинок на веб-сайте при помощи ImageKit

Что мы видим:

  1. Размер картинки, указанный в URL, не может быть изменен.
  2. Любая другая часть URL не может быть изменена или удалена.

Instagram также устанавливают срок жизни URL-адресов. В этом руководстве мы повторим это поведение.

Что создаем?

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

Ресурсы

  1. Знание HTML.
  2. Базовые навыки работы с NodeJS.
  3. Бесплатная учетная запись ImageKit.io. ImageKit.io — это комплексное решение для оптимизации и управления картинками. Оно может изменять размер картинки, обрезать наносить водяные знаки и т.д.

Базовая параметр

Для демонстрации создадим фотогалерею на тему еды:

1. Получаем URL-адреса для картинок

Загрузим картинки в медиа библиотеку, которая поставляется вместе с ImageKit.io. Здесь мы получим URL-адрес для каждого картинки.

Защита картинок на веб-сайте при помощи ImageKit

Ниже приведен URL-адрес картинки, которое мы загрузили в медиа библиотеку ImageKit.io.

https://ik.imagekit.io/demo/img/scotch_security/1_GTMtFxEf5.jpeg

2. Создание HTML-разметки

Создадим HTML-код для размещения трех картинок.

Защита картинок на веб-сайте при помощи ImageKit

Далее установим для картинок размер 300 на 300 пикселей. ImageKit.io поможет в этом. Можно использовать основанные на URL-адресах настройки преобразования в реальном времени, чтобы настроить размер картинки.

<img src="https://ik.imagekit.io/demo/img/scotch_security/1_GTMtFxEf5.jpeg?tr=w-300,h-300" />

Также предоставим варианты картинки для экранов с высоким разрешением при помощи атрибута srcset в img и преобразования dpr.

<html><head> <title>My Food Gallery Page</title></head><body> <h1>My Food Gallery</h1> <img src="https://ik.imagekit.io/demo/img/scotch_security/1_GTMtFxEf5.jpeg?tr=w-300,h-300" srcset="https://ik.imagekit.io/demo/img/scotch_security/1_GTMtFxEf5.jpeg?tr=w-300,h-300,   https://ik.imagekit.io/demo/img/scotch_security/1_GTMtFxEf5.jpeg?tr=w-300,h-300,dpr-2 2x"     />    <img src="https://ik.imagekit.io/demo/img/scotch_security/2_fGwKLAgUUd.jpeg?tr=w-300,h-300"        srcset="https://ik.imagekit.io/demo/img/scotch_security/2_fGwKLAgUUd.jpeg?tr=w-300,h-300,             https://ik.imagekit.io/demo/img/scotch_security/2_fGwKLAgUUd.jpeg?tr=w-300,h-300,dpr-2 2x"     />    <img src="https://ik.imagekit.io/demo/img/scotch_security/3_xqMQs0ib3.jpeg?tr=w-300,h-300"         srcset="https://ik.imagekit.io/demo/img/scotch_security/3_xqMQs0ib3.jpeg?tr=w-300,h-300,             https://ik.imagekit.io/demo/img/scotch_security/3_xqMQs0ib3.jpeg?tr=w-300,h-300,dpr-2 2x"     /></body></html>

Защита картинок

Приступаем к реализации защиты картинок.

1. Водяной знак для картинки

Одним из методов защиты картинок будет нанесение на них водяных знаков. Логотип водяного знака мы загрузили в библиотеку ImageKit.

Защита картинок на веб-сайте при помощи ImageKit

Этот логотип доступен по следующему адресу:

https://ik.imagekit.io/demo/img/scotch_security/secure_cr21l_7GU.png

Для нанесения водяных знаков на картинки используем инструмент ImageKit. Сейчас URL-адрес нашего картинки выглядит следующим образом:

<img src="https://ik.imagekit.io/demo/img/scotch_security/1_GTMtFxEf5.jpeg?tr=w-300,h-300,oi-@@scotch_security@@secure_cr21l_7GU.png,ofo-bottom_right   ,ow-150" />

Само изображение сейчас выглядит так.

Защита картинок на веб-сайте при помощи ImageKit

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

2. Предотвращение изменения URL-адреса или удаления водяного знака

Но ведь можно посмотреть URL-адрес, удалить настройки наложения водяного знака и приобрести изображение. То же самое относится и к любому иному параметре в URL-адресе.

Защита картинок на веб-сайте при помощи ImageKit

Исправим это.

Часть а. Генерация «подписанного» URL-адреса

Подпишем URL-адрес картинки при помощи хеш-кода, созданного при помощи алгоритма SHA1и секретного ключа, который известен только покупателю и серверу (покупатель – это мы, а сервер картинок – ImageKit).

Сгенерируем хеш и передадим его вместе с остальной частью URL-адреса на сервер картинок. Далее сервер создаст подпись для всего URL-адреса с использованием того же закрытого ключа и сравнит ее с подписью, полученной от покупателя.

Если подписи совпадают, запрос обрабатывается. Если нет, то URL-адрес или подпись были подделаны и выполнение запроса блокируется.

В ImageKit создать подписанный URL-адрес довольно просто. Для этого применяется один из предоставляемых SDK. В примере ниже мы используем SDK NodeJS.

/__    Будет выполнено на сервере NodeJS__/var imagekit = new ImageKit({    privateKey : "our_private_key", // это основной настройка, необходимый для генерации подписи ...});var signedURL = imagekit.url({    src : "https://ik.imagekit.io/demo/img/scotch_security/1_GTMtFxEf5.jpeg?tr=w-300,h-300,oi-@@scotch_security@@secure_cr21l_7GU.png,ofo-bottom_right,ow-150",    signed : true   // этот настройка помогает в создании подписанного URL});

Подписанный URL-адрес, созданный при помощи SDK, выглядит следующим образом:

https://ik.imagekit.io/demo/img/scotch_security/1_GTMtFxEf5.jpeg?tr=w-300,h-300,oi-@@scotch_security@@secure_cr21l_7GU.png,ofo-bottom_right,ow-150&ik-s=b19a8d348746e1e7f89a8c0262507ce36ad41a3d

В конце URL-адреса есть дополнительный настройка ik-s.

Для простоты мы генерируем подпись и заменяем существующий URL-адрес в HTML новым подписанным URL-адресом. В реальных условиях сервер использует шаблон для генерации HTML. Таким образом, сервер генерирует подписанные URL-адреса и использует их в тегах img.

Часть б. Ограничение доступа к неподписанному URL-адресу картинки

Также надо, чтобы сервер картинок, не отвечал запросы картинок, к которым не будет прикреплена действительная подпись. Для этого ImageKit использует настройка, который блокирует любые неподписанные запросы.

Защита картинок на веб-сайте при помощи ImageKit

Результат после генерации подписи

Вот так выглядит HTML с новыми подписанными URL-адресами картинок.

<html><head>    <title>My Food Gallery Page</title></head><body>    <h1>My Food Gallery</h1>    <img src="https://ik.imagekit.io/demo/img/scotch_security/1_GTMtFxEf5.jpeg?tr=w-300,h-300,oi-@@scotch_security@@secure_cr21l_7GU.png,ofo-bottom_right,ow-150&ik-s=7cf746087e01ed1d3ad58ca64156745070e69e3e"         srcset="https://ik.imagekit.io/demo/img/scotch_security/1_GTMtFxEf5.jpeg?tr=w-300,h-300,oi-@@scotch_security@@secure_cr21l_7GU.png,ofo-bottom_right,ow-150&ik-s=7cf746087e01ed1d3ad58ca64156745070e69e3e,            https://ik.imagekit.io/demo/img/scotch_security/1_GTMtFxEf5.jpeg?tr=w-300,h-300,dpr-2,oi-@@scotch_security@@secure_cr21l_7GU.png,ofo-bottom_right,ow-150&ik-s=02bd8e66a0000dbdb73619211743c8f6fa5addf0 2x"     />    <img src="https://ik.imagekit.io/demo/img/scotch_security/2_fGwKLAgUUd.jpeg?tr=w-300,h-300,oi-@@scotch_security@@secure_cr21l_7GU.png,ofo-bottom_right,ow-150&ik-s=1bbab2b2fc63abdaf585197b1d9707220cc07b6c"        srcset="https://ik.imagekit.io/demo/img/scotch_security/2_fGwKLAgUUd.jpeg?tr=w-300,h-300,oi-@@scotch_security@@secure_cr21l_7GU.png,ofo-bottom_right,ow-150&ik-s=1bbab2b2fc63abdaf585197b1d9707220cc07b6c,             https://ik.imagekit.io/demo/img/scotch_security/2_fGwKLAgUUd.jpeg?tr=w-300,h-300,dpr-2,oi-@@scotch_security@@secure_cr21l_7GU.png,ofo-bottom_right,ow-150&ik-s=9030030923deada4531f619e033660ba510499d6 2x"     />    <img src="https://ik.imagekit.io/demo/img/scotch_security/3_xqMQs0ib3.jpeg?tr=w-300,h-300,oi-@@scotch_security@@secure_cr21l_7GU.png,ofo-bottom_right,ow-150&ik-s=ec65c1f6354de6bb4e16d2ae3bb13b3828f9816e"         srcset="https://ik.imagekit.io/demo/img/scotch_security/3_xqMQs0ib3.jpeg?tr=w-300,h-300,oi-@@scotch_security@@secure_cr21l_7GU.png,ofo-bottom_right,ow-150&ik-s=ec65c1f6354de6bb4e16d2ae3bb13b3828f9816e,             https://ik.imagekit.io/demo/img/scotch_security/3_xqMQs0ib3.jpeg?tr=w-300,h-300,dpr-2,oi-@@scotch_security@@secure_cr21l_7GU.png,ofo-bottom_right,ow-150&ik-s=b71bc7d5e9d0e11b8af5c1250ec50ae546e165ad 2x"     /></body></html>

Использование не подписанного URL-адреса сейчас приведет к ошибке. Подобное мы видели в Instagram.

Сейчас никто не может удалить водяной знак с картинки или скачать его в другой размерности.

Защита картинок на веб-сайте при помощи ImageKit

Предоставление доступа к оригинальному изображению платным посетителям

На данном этапе реализации невозможно приобрести исходное изображение с URL-адреса. Учетная запись ImageKit настроена на доставку только тех картинок, к которым прикреплена подпись.

Защита картинок на веб-сайте при помощи ImageKit

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

var signedURL = imagekit.url({    src : "https://ik.imagekit.io/demo/img/scotch_security/1_GTMtFxEf5.jpeg?tr=w-300,h-300",    signed : true   // этот настройка помогает в создании подписанного URL expireSeconds : 3600 // число секунд до окончания срока действия URL });

Это дает нам следующий URL-адрес:

https://ik.imagekit.io/demo/img/scotch_security/1_GTMtFxEf5.jpeg    ?tr=w-300,h-300    &ik-s=f65fd8e3136b557e61dc69c2ed19182f07a1ce5    &ik-t=1234567890

В приведенном выше URL используется дополнительный настройка запроса ik-t, который будет временной меткой.

Параметр настроек подписи для конкретного картинки, а не для всей учетной записи

В ImageKit доступна функцию, позволяющая наложить ограничение на неподписанные URL-адреса, относящиеся к конкретному изображению, а не ко всей учетной записи.

Она называется приватные картинки. Мы можем пометить изображение как «приватное», когда загружаем его в библиотеку ImageKit. Доступ к такому изображению возможен только через подписанные URL-адреса, даже если параметр использования подписанных URL отключена.

Заключение

ImageKit упрощает реализацию защиты картинок. Такие сервисы, как Instagram, используют подобные инструменты для URL-адресов картинок. Реализуйте это для картинок при помощи ImageKit.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *