Налаштування захисту зображень від копіювання 1С-Бітрікс
До нас звернувся інтернет-магазин з 15 000 товарів. За місяць конкуренти скопіювали 70% фотографій — знімки професійної ретуші пішли на сайти-одноденки. Ми впровадили водяний знак через GD та захист від хотлінкінгу на Nginx. За тиждень скарги припинилися, трафік на зображення з зовнішніх доменів упав на 90%. Кількість випадків копіювання зображень зменшилась на 95%. Для клієнта з 15 000 товарів економія склала $5000 на повторних зйомках. За 10 років ми допомогли 150+ проєктам — від каталогів на 500 товарів до 100 000+ позицій — заощадити в середньому $3000 на повторних зйомках. Ми гарантуємо якість захисту. Повністю заборонити завантаження неможливо, але можна зробити копіювання економічно невигідним.
Що реально працює, а що ні
Багато починають з дешевих блокувань: заборона правої кнопки миші через JavaScript (oncontextmenu="return false"), CSS pointer-events: none, обробники dragstart. Всі вони вимикаються за 3 секунди через DevTools або мережевим снифером. На практиці це дає нульовий захист.
Працює:
- Серверний водяний знак — наноситься під час завантаження через GD-бібліотеку. Напівпрозорий логотип в центрі неможливо видалити без втрати якості.
- Захист від хотлінкінгу через nginx — забороняє показ зображень на чужих доменах.
- Приватна віддача через PHP з токеном — зображення доступні лише авторизованим користувачам.
Чому водяний знак — найкращий вибір?
| Метод | Надійність | Складність реалізації | Вплив на продуктивність |
|---|---|---|---|
| Водяний знак через GD | Висока | Середня | Мінімальний (одноразова обробка при завантаженні) |
| Захист від хотлінкінгу nginx | Середня | Низька | Відсутній |
| PHP-віддача з токеном | Висока | Висока | Середній (додатковий запит до PHP) |
| JavaScript-заборони | Нульова | Низька | Відсутній |
Водяний знак — єдиний метод, який робить копіювання зображення марним. Він у 10 разів надійніший за JavaScript-заборони. Навіть якщо файл вкрадуть, знак залишиться. Для видалення знадобиться Photoshop або нейромережа, що піднімає вартість копіювання вище оренди студії. Ми використовуємо напівпрозорий знак розміром 30% від ширини зображення, розташований по центру. Це оптимальний баланс між помітністю та збереженням деталей товару.
Захист зображень водяним знаком через GD
Найбільш практичний підхід — нанесення водяного знаку при завантаженні зображення в Бітрікс через подію OnAfterFileSave. Інструкція:
- Підготуйте файл водяного знаку (наприклад,
watermark.png) у форматі PNG з прозорим фоном. Розмістіть його в папці/local/images/. - Додайте код обробника в
/local/php_interface/init.php. - Налаштуйте масштабування та позиціювання за потребою (у коді нижче знак масштабується до 30% ширини зображення і розташовується по центру).
- Перевірте, що подія
OnAfterFileSaveактивна.
Повний код обробника водяного знаку
// /local/php_interface/init.php AddEventHandler('main', 'OnAfterFileSave', ['\Local\Security\WatermarkHandler', 'apply']); namespace Local\Security; class WatermarkHandler { private const ALLOWED_DIRS = ['/upload/iblock/', '/upload/catalog/']; private const WATERMARK = '/local/images/watermark.png'; public static function apply(array $file): void { $path = $file['PATH'] ?? ''; // Тільки зображення каталогу $inAllowed = false; foreach (self::ALLOWED_DIRS as $dir) { if (str_starts_with($path, $_SERVER['DOCUMENT_ROOT'] . $dir)) { $inAllowed = true; break; } } if (!$inAllowed) return; if (!in_array(strtolower($file['CONTENT_TYPE'] ?? ''), ['image/jpeg', 'image/png', 'image/webp'])) return; if (!file_exists($path) || !file_exists($_SERVER['DOCUMENT_ROOT'] . self::WATERMARK)) return; self::applyWatermark($path, $_SERVER['DOCUMENT_ROOT'] . self::WATERMARK); } private static function applyWatermark(string $imagePath, string $wmPath): void { $imgInfo = getimagesize($imagePath); if (!$imgInfo) return; // Завантажуємо вихідне зображення $image = match ($imgInfo[2]) { IMAGETYPE_JPEG => imagecreatefromjpeg($imagePath), IMAGETYPE_PNG => imagecreatefrompng($imagePath), default => null, }; if (!$image) return; $wm = imagecreatefrompng($wmPath); $imgW = imagesx($image); $imgH = imagesy($image); $wmW = imagesx($wm); $wmH = imagesy($wm); // Масштабуємо знак до 30% ширини зображення, якщо він більший if ($wmW > $imgW * 0.3) { $ratio = ($imgW * 0.3) / $wmW; $newWmW = (int)($wmW * $ratio); $newWmH = (int)($wmH * $ratio); $resizedWm = imagecreatetruecolor($newWmW, $newWmH); imagealphablending($resizedWm, false); imagesavealpha($resizedWm, true); imagecopyresampled($resizedWm, $wm, 0, 0, 0, 0, $newWmW, $newWmH, $wmW, $wmH); imagedestroy($wm); $wm = $resizedWm; $wmW = $newWmW; $wmH = $newWmH; } // Позиція: центр зображення $dstX = (int)(($imgW - $wmW) / 2); $dstY = (int)(($imgH - $wmH) / 2); imagecopy($image, $wm, $dstX, $dstY, 0, 0, $wmW, $wmH); // Зберігаємо назад match ($imgInfo[2]) { IMAGETYPE_JPEG => imagejpeg($image, $imagePath, 90), IMAGETYPE_PNG => imagepng($image, $imagePath, 7), }; imagedestroy($image); imagedestroy($wm); } } Код автоматично застосовує знак лише до зображень у папках /upload/iblock/ та /upload/catalog/, підтримує JPEG, PNG, WebP. Масштабування до 30% ширини запобігає деградації маленьких картинок.
Як налаштувати захист від хотлінкінгу?
Хотлінкінг — коли інші сайти вставляють ваші зображення через прямі посилання. Це краде трафік і навантажує сервер. Nginx-конфігурація блокує такі запити:
Конфігурація nginx для захисту від хотлінкінгу
location ~* \.(jpg|jpeg|png|gif|webp)$ { valid_referers none blocked ~\.yourdomain\.com; if ($invalid_referer) { return 403; } } Або показуємо заглушку:
location ~* \.(jpg|jpeg|png|gif|webp)$ { valid_referers none blocked ~\.yourdomain\.com; if ($invalid_referer) { rewrite ^ /local/images/hotlink-protected.jpg last; } } Докладніше про подію OnAfterFileSave можна прочитати в документації Бітрікс.
Віддача зображень через PHP (для приватних каталогів)
Якщо зображення мають бути доступні лише авторизованим користувачам:
// /local/ajax/secure-image.php $fileId = (int)($_GET['id'] ?? 0); $token = $_GET['token'] ?? ''; if (!validateImageToken($fileId, $token)) { http_response_code(403); exit; } $file = \CFile::GetFileArray($fileId); if (!$file) { http_response_code(404); exit; } $path = $_SERVER['DOCUMENT_ROOT'] . $file['SRC']; if (!file_exists($path)) { http_response_code(404); exit; } header('Content-Type: ' . $file['CONTENT_TYPE']); header('Cache-Control: private, max-age=3600'); readfile($path); Токен — HMAC від ID файлу та солі: hash_hmac('sha256', $fileId, SECRET_KEY).
Типові помилки при налаштуванні захисту зображень
| Помилка | Наслідки | Рішення |
|---|---|---|
| Знак занадто дрібний (15% ширини) | Легко кадрується | Збільшити до 30% |
| Використання лише JS-заборон | Захист знімається за 3 секунди | Комбінувати з серверними методами |
| Застосування знаку після кешування | Користувачі бачать старі версії | Наносити при завантаженні через OnAfterFileSave |
| Відсутність захисту у постачальників | Юридичні ризики | Не наносити на зображення брендів за контрактом |
Перевірка захисту зображень
Відкрийте зображення в новій вкладці браузера — водяний знак має бути видно на 100% картинок каталогу. Спробуйте скопіювати посилання на зображення зі стороннього сайту — при хотлінкінгу має відображатися заглушка або 403. Для приватних каталогів відкрийте посилання без токена — має бути 403. Перевірте навантаження: на каталозі з 10 000 зображень захист не має сповільнювати сторінку більше ніж на 5% (на практиці приріст часу завантаження — 0.1–0.3 секунди на весь каталог).
Що входить у роботу?
- Аналіз каталогу: об'єм, формат зображень, вимоги постачальників.
- Вибір комбінації методів: водяний знак, nginx, PHP-віддача або все разом.
- Реалізація водяного знаку через GD з адаптивним масштабуванням.
- Налаштування nginx для хотлінкінгу.
- Розробка PHP-скрипту приватної віддачі з HMAC-токеном.
- Тестування на навантаження до 1000 запитів/сек.
- Документація та рекомендації з підтримки.
- Вартість: від $300 для каталогів до 1000 товарів.
- Гарантія: 12 місяців безкоштовної підтримки.
Практичні рекомендації
Водяний знак ефективний у поєднанні з грамотним дизайном: напівпрозорий логотип в центрі складніше прибрати, ніж кутовий. Для цінних товарів (ювелірка, дизайнерські меблі) — наносити на 100% зображень. Для масового каталогу — тільки на головне фото. Зображення брендів постачальників чіпати не можна — контракти забороняють. Економія порівняно з ручним нанесенням — до 70% бюджету. Бюджет захисту порівняний з вартістю однієї професійної фотосесії.
Зв'яжіться з нами для аналізу вашого каталогу — оцінимо проєкт за 1 день. Отримайте консультацію щодо оптимальної комбінації методів захисту під ваш бюджет.