Ранее были рассмотрены два варианта того, как запретить копирование контекста с сайта: с помощью JavaScript (легко обходится отключением JS в браузере) и с помощью прозрачного блока CSS на весь экран, который перекрывает доступ до элементов страницы (легко обходится, удалением этого элемента со страницы с помощью инструментов разработчика браузера). В этой статье расскажу про ещё один способ того, как усложнить жизнь тем, кто ворует чужой контент с помощью CSS свойства user-select и на этом пожалуй остановлюсь. Нет идеальной защиты. На крайней случай, можно всегда нанять секретаршу, которая всё перепечатает (если конечно нет нормального сисадмина, разбирающегося в том, как работают сайты, в штате).
CSS свойство user-select что оно умеет и для чего предназначено
CSS свойство user-select управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста. Нормальным применением этого свойства будет запретить выделение текста на тех элементах страницы, которые служат указателями, например, в панели вкладок на странице с аккордеоном. Этого же можно добиться, заменив текст картинками, но зачем усложнять и утяжелять страницу? CSS свойство user-select не влияет на поведение поисковых роботов, поэтому его также применяют на сайтах для обеспечения защиты текста от копирования.
Заданные значения этого свойства наследуются, поэтому, можно глобально запретить выделение (а значит и копирование) во всём документе, назначив ему значение none.
Сделать это можно так:
<style>
body {
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
</style>Для всех браузером: -ms, -moz, -webkit и основное свойство user-select.
Как обойти блокировку копирования CSS свойством user-select
CSS свойство user-select не отключает контекстное меню браузера, поэтому в два клика открывается инструментарий разработчика и значения свойства либо переводятся в all, либо просто удаляются.
Для того, чтобы усложнить жизнь тем, кто ворует чужой контент, можно прописать это свойство отдельным элементам страницы таким, как div, span, p, и другим контейнерам, куда помещается текст, который нужно защитить от копирования. Но опять же, — от секретаря с наманикюренными ногтями или от человека, чуть разбирающегося в HTML и CSS это не спасёт. К тому же, всегда можно сохранить всю страницу и открыть её на редактирование в MS Word.
Как разрешить копировать лишь часть контента
Для того, чтобы можно было хоть что-то скопировать, можно задать дополнительный CSS-класс, в котором отключить запрет на выделение:
<style>
.enable {
-ms-user-select: all;
-moz-user-select: all;
-webkit-user-select: all;
user-select: all;
}
</style>Тогда, можно управлять тем, что поддаётся выделению (и копированию) и тем, что стандартными средствами выделить в браузере не получится (даже при отключенном в браузере JavaScript). Например,
<p class="enable">Это то, что можно выделить</p>
<p>А вот это не утащишь! =)</p>Выводы
Таким образом с помощью CSS свойства user-select можно дополнительно усложнить жизнь тем, кто ворует контент и защитить сайт от копирования текста, но решения о том, как развидеть то, что уже показано на мониторе пользователя просто не существует. Если показали, — значит дали шанс использовать. А уж как поведёт себя пользователь с полученной информацией, предсказать невозможно.
