Блокирование выделения текста в OpenCart. Умный подход

В свете копирования интернет магазинами друг у друга описания товаров, вопрос «защиты от копирования» стоит достаточно остро. Я написал «защиту от копирования» в кавычках, т.к. 100% защиты в принципе не существует. Любую информацию, которая попадает в браузер к пользователю можно скопировать, все зависит исключительно от навыков пользователя (или разработчика). Тему парсеров в данной статье мы не рассматриваем в принципе.

Защита от выделения текста – первый форпост в длинном списке попыток защититься от копирования контента. Первые попытки реализации этой функции были написаны на JavaScript, однако в CSS3 появилась прекрасная возможность заблокировать выделение текста, например так:

body {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 }

Не трудно догадаться по селектору body, что данное правило будет применено ко всему HTML документу. Однако, бывают ситуации, когда все же стоит дать пользователю возможность выделять часть текста на странице, особенно это актуально для шапки сайта (телефоны, эл. почта, адрес офиса).

Для простоты демонстрации, предположим, что у вас HTML5. HTML5 имеет вполне приемлемые на сегодняшний день семантические элементы. В базовом варианте они выглядят так:

Решить эту задачу можно либо через CSS свойство !important,  которое применяется для дочернего элемента, например header. Тогда где-нибудь в конце кода, перед </body> добавить:

<style>
 header {
 -webkit-touch-callout: all!important;
 -webkit-user-select: all!important;
 -khtml-user-select: all!important;
 -moz-user-select: all!important;
 -ms-user-select: all!important;
 user-select: all!important;
 }
 </style>

либо, как в моем случае, основной контент был размещен в section, поэтому намного удобнее с точки зрения объектной модели CSS (или CSSOM) запретить выделение текста только для section.

section {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 }

Демо. Как вы можете увидеть, у нас прекрасно получается выделить текст с телефонами или эл. почтой, однако выделение не работает для основной части контента вплоть до футера сайта (т.к. футер уже не является частью элемента section).

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

Игорь Чишкала

Директор по технологиям в SoftForge.
Люблю ИТ, пишу технические статьи в этом блоге или для сайта фриланс-биржи Upwork. Кодю на PHP с использованием фреймворков Laravel или Symfony.

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

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