Уфа

ул. Лесной проезд 6/5,

Офис 6.

+7 (906) 102-95-68

ул. Лесной проезд 6/5, Офис 6.

tel
Главная Стрелка вправо Блог Стрелка вправо Как защитить свои изображения на сайте?

Как защитить свои изображения на сайте?

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

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

Контекстное меню и кнопки связанные с картинкой

Первая мысль, подходящая для решения запрета на использование контекстного меню - это написание js кода или использование jquery плагина

Например, небольшой js-код:

$(document).ready(function(){
   $(document).bind("contextmenu",function(e){
   		e = e || window.event;
		e.preventDefault();
   });
});


Или при помощи html аттрибута

<img oncontextmenu='return false;' border="0" src="image.jpg" />

Но это решение всегда можно обойти отключением js в настройках браузера. Ко всему прочему в некоторых браузерах есть такая настройка как «позволить контролировать правую кнопку мыши».

Можно еще вставлять изображения в бэкграунд блока, а внутри него помещать прозрачное изображение, заполняющее этот блок.

Например:

<div style="width: 1000px; height: 70px; background:url('image.jpg') no-repeat;">
    <img border="0" src="empty.png" style="width:100%;height:100%"/>
</div>

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

Да кого я обманываю! При условии, что четырехлетние малыши уже неплохо разбираются в технике, то и обычный блогер сможет найти ссылку на источник картинки, открыв консоль разработчиков, нажав заветную кнопку F12 или выбрав в контектном меню "Посмотреть код элемента". Да и к тому же, такой способ может плохо влиять на SEO сайта.

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

img{
 	-moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Хорошо, допустим мы закрыли наше контекстное меню js-ком, но имеем ввиду, что любой js можно обойти настройками браузера.

Сохранение изображений через исходник html

Это, наверное, самый действующий способ для нехороших людей украсть контент с вашего сайта. Имел место случай, когда необходимо было скопировать информацию с сайта личного кабинета одного банка, который открывадся только в IE, запрещал копировать и выделять информацию, а таблицу со страницы очень нужно было экспортировать в excel. Достаточно было нажать F12 выделить нужный блок, скопировать полность html структуру с текстом тэга <table> и вставть в excel, который эту структуру благополучно сохранил. Я не утверждаю, что это было преступлением века, но, согласитесь, это было легко сделать. Да и к тому же мы потом нашли заветную кнопочка экспорта в excel, но это уже другая история про плохой UIX.

Итак, как же мы можем защитить наши изображения от скачивания через html-исходники сайта?

Например, запрет на нажатие клавиш F12, Ctrl+С? Опять же это можно обойти отключением js в браузере, да и ктому же есть такие программы, которые могут загружать файлы с сайта по протоколам http и https, которым все равно на эти кнопки, да и, наверное, на все наши любые запреты. Но с другой стороны, мы же защищаемся от обывателей, не будем параноить!

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

Рассмотрим все же этот вариант. Хабра говорит нам о том, что можно вместо названия файла, использовать сессионый параметр. Основа идеи в том, что при выводе картинки формируем некий параметр, который сохраняем в сессию, отображаем этот параметр в ссылке src картинки, a дальше при последующих переходах по этой ссылке необходимо сравнивать переданный параметр с сохраненным в сессии, и если все хорошо отдавать путь к изображению и убирать этот параметр из сессии для последующих обращений. Таким образом, картинка будет отображена единожды при компилировании страницы php-скриптом. Попробуем перенести идею на Yii.

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

<div>
	<?php $images = MyImage::model()->findAll();?>
	<?php foreach($images as $image):?>
		<img src="<?=$image->source?>">
	<?php endforeach; ?>
</div>

Создаем функцию в модели изображения, которая будет сохранять в сессию значение.
class MyImage extends CActiveRecord

class MyImage extends CActiveRecord
{
...

	/**
     * Сохраняем в сессию некоторый параметр
     * @param bool $failed
     * @return string
     */
    public function setInSession($failed = false){
        $param  = $failed ? 'error' : md5(date('y-m-d H:i:s').rand());
        Yii::app()->session->add('session_image_'.$this->id, $param);
        return $param;
    }
...
}


И теперь в цикле:

<div>
	<?php $images = MyImage::model()->findAll();?>
	<?php foreach($images as $image):?>
		<?php $sessionParam = $image->setInSession();?>
		<img  src="<?=Yii::app()->createUrl('myController/showImage', array('imageKey' => $sessionParam, 'imageId' => $image->id ))?>">
	<?php endforeach; ?>
</div>

В контроллере:

class MyController extends Controller
{
	...
	public function accessRules()
	{
		return array(
			array('allow',
				'actions' => array('index', 'view', 'showImage'),
				'users' => array('*'),
			),
			...
		);
	}
	...

	/**
	 *  Отдаем изображение по ссылке
	 * @param $imageKey
	 * @param $imageId
	 * @return string
	 */
	public function actionShowImage($imageKey, $imageId)
	{
		$session = Yii::app()->session;
		if ($imageKey == $session->get('session_image_' . $imageId)) { // если переданный параметр равен параметру из сессии
			$session->remove('session_image' . $imageId); // убиваем параметр в сессии
			$model = PortfolioMedia::model()->findByPk($imageId);
			$model->setInSession(true);
			$return = file_get_contents(ImageHelper::getDocRootPath(Yii::baseUrl() . $model->source)); // записываемпуть картинки
		} else {
			$return = 'error'; //если значения не совпадают, то ошибка
		}

		echo $return;
	}
}


Итак, посетитель сайта при попытке, сохранить или открыть в новой вкладке получает ошибку, но при клике в Chrome на "Найти картинку (Google)", он её в полне сможет отыскать.

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

Полезные ссылки:
geektimes.ru
habrahabr.ru

Неубиваемый PrintScreen

Конечно, это уже параноя, но все же рассмотрим эту проблему.

Самым распространенным способом решить её - это вотермарки (плавающие надписи), но и здесь есть проблемы: маленькие же и не заметные водяные знаки лего закрасить; если большие вотермарки не просто зафотошопить, то они зачастую бывают не уместны на сайте, так как портят внешний вид. Была рождена идея использовать креативные надписи названия компании или личного имени на изображении. Например, если вы выкладываете фотографию одежды, то на ней может быть бирка с названием вашей компании, или, если это ваша продукция, то к ней можно приложить вашу визитку или стикер с логотипом компании.

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

Вставка ссылки изображения с вашего сайта на левом ресурсе

Самый распространенный способ настроить сервер так, чтобы он проверял ресурс, что запращивает ваще изображение, если он отличен от вашего сайта, то возвращать пустые файлы, или ошибку, например 403. Настроить его можно в .htaccess следующим способом (для nginx советуют использовать ngx_http_referer_module ):

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|png)$ http://i.imgur.com/qX4w7.gif [L]
//если код ошибки
RewriteRule .*\.(jpe?g|gif|png)$ - [F]

Другие способы защиты

  1. Связывание документов с профилем в google+
  2. Регистрация уникального контента в Yndex
  3. Указывание авторства в свойствах изображения
  4. Текст копирайта в футере страницы: © 2012-2016 студия "МояСтудия" все права защищены
  5. Переговоры с нехорошим человеком, что украл ваши изображения, с целью удаления или размещения ссылки на оригинал
  6. Юридические решения, которые к вебу никак не относятся, но помогут вам защищать свои авторские права

Итог

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