Запрет выбора текста и копирования на сайте

Мужчина использует веб-сайт

Введение

Если вы хотите затруднить другим копирование содержимого с вашего сайта, можно применить клиентские приёмы на CSS и JavaScript. Они полезны для предотвращения случайного выделения или нецелевого копирования, но не являются надёжной защитой от целенаправленного копирования (скрипты, снимки экрана, DevTools, парсеры).

Важное: такие приёмы влияют на удобство и доступность (например, для пользователей с экранными читалками или тех, кто использует клавиатуру). Перед внедрением оцените влияние на UX и доступность.

Когда это имеет смысл

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

Короткая терминология

user-select: CSS-свойство, которое контролирует возможность выделения текста в браузере.
oncopy/onpaste/oncut: JavaScript-события для операций с буфером обмена.
contextmenu: событие, связанное с открытием контекстного меню (правый клик).

Отключение выделения текста (CSS и JavaScript)
Отключение вырезания/копирования/вставки (JS и jQuery)
Отключение правого клика (JS и jQuery)
Когда это не сработает и альтернативные подходы
Шаблон проверки внедрения и чек‑лист ролей
Примечания по безопасности и доступности

Отключение выделения текста с помощью CSS или JavaScript

Можно отключить выделение текста для всей страницы или только для её части.

Как отключить выделение текста для всей страницы через JavaScript

Используйте атрибуты событий onmousedown и onselectstart у тега body — они отменяют стандартное поведение браузера.

  
  
   
   
 This is the title of the web page  
   
   
   
 Founded in 2007, MUO has grown into one of the largest online technology publications on the web.  
 Our expertise in all things tech has resulted in millions of visitors every month and hundreds of thousands of fans on social media.  
 We believe that technology is only as useful as the one who uses it.  
 Our aim is to equip readers like you with the know-how to make the most of today's tech, explained in simple terms that anyone can understand.  
 We also encourage readers to use tech in productive and meaningful ways.

Как отключить выделение текста для части страницы через JavaScript

Добавьте onmousedown и onselectstart к конкретному элементу (например, к div). В примере выделение отключено только для второго div.

  
  
   
   
 This is the title of the web page  
   
   
   
 Text selection is enabled for this text.  
   
   
 Text selection is disabled for this text.

Как отключить выделение текста для всей страницы через CSS

Свойство user-select контролирует выделение текста. Для кросс-браузерности указывайте префиксы:

Chrome, Opera: user-select
Safari: -webkit-user-select
Mozilla: -moz-user-select
IE 10+: -ms-user-select

Установите все эти свойства в none.

  
  
   
   
 This is the title of the web page  
   
   
   
   
 Founded in 2007, MUO has grown into one of the largest online technology publications on the web.  
 Our expertise in all things tech has resulted in millions of visitors every month and hundreds of thousands of fans on social media.  
 We believe that technology is only as useful as the one who uses it.  
 Our aim is to equip readers like you with the know-how to make the most of today's tech, explained in simple terms that anyone can understand.  
 We also encourage readers to use tech in productive and meaningful ways.

Как отключить выделение текста для части страницы через CSS

Добавьте класс или id к элементу и примените к нему набор user-select-префиксов. В примере ниже класс disable-text-selection отключает выделение для второго div.

  
  
   
   
 This is the title of the web page  
   
   
   
   
 Text selection is enabled for this text.  
   
   
 Text selection is disabled for this text.

Отключение вырезания, копирования и вставки с помощью JavaScript

Для управления операциями с буфером обмена используйте события oncut, oncopy и onpaste. Также можно отключить перетаскивание с помощью ondrag и ondrop. В примере ниже операции отключены для input.

  
  
   
   
 This is the title of the web page  
   
   
   
 Cut, Copy, and Paste is disabled for the below input element.

Отключение вырезания/копирования/вставки с помощью jQuery

С помощью jQuery и bind() можно перехватить события cut/copy/paste и отменить их. Убедитесь, что библиотека загружена до выполнения скрипта.

  
  
   
   
 This is the title of the web page  
   
   
   
   
 Cut, Copy, and Paste is disabled for the complete web page.  
   
   
   
 $(document).ready(function() {  
 $('body').bind('cut copy paste', function(event) {  
 event.preventDefault();  
 });  
 });

Отключение правого клика (контекстного меню)

Через чистый JavaScript

Перехват события contextmenu и возврат false блокирует стандартное контекстное меню.

  
  
   
   
 This is the title of the web page  
   
   
   
 Right Click is disabled for the complete web page.  
   
   
 document.oncontextmenu = new Function("return false");

Через jQuery

Тот же эффект можно получить с помощью bind(“contextmenu”).

  
  
   
   
 This is the title of the web page  
   
   
   
   
 Right Click is disabled for the complete web page.  
   
   
 $(document).bind("contextmenu",function(e){  
 return false;  
 });

Когда эти методы не сработают (и почему)

Пользователь может отключить JavaScript и обойти запреты.
Снимки экрана и OCR позволяют скопировать содержание визуально.
Инструменты разработчика (DevTools) дают прямой доступ к HTML/CSS/JS и позволяют получить исходный текст.
Автоматизированные боты и скрейперы могут скачивать исходный HTML без рендеринга.

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

Альтернативные и дополняющие подходы

Подписи и водяные знаки на изображениях.
Серверные ограничения: проверка прав доступа, контроль скачивания, динамическая выдача контента.
Обрезка метаданных и отключение прямых ссылок на медиафайлы.
Использование DRM/защиты контента для мультимедиа (где применимо).
Логирование и оповещения о подозрительной активности (rate-limiting, блокировка IP).

Модель принятия решения — стоит ли внедрять

Mermaid-диаграмма ниже помогает быстро решить, нужно ли применять клиентские запреты:

flowchart TD
  A[Нужно ли предотвратить простое копирование?] -->|Нет| B[Не внедрять]
  A -->|Да| C[Вы потеряете часть UX/доступности?]
  C -->|Да| D[Оставить доступ и использовать метки авторства]
  C -->|Нет| E[Внедрить клиентские запреты + серверную защиту]
  E --> F[Мониторинг и альтернативы 'CAPTCHA, rate-limit']

Чек-лист ролей при внедрении

Владелец контента: подтвердить приоритеты (защита vs доступность).
Разработчик: внедрить скрипты/CSS, протестировать на основных браузерах.
Тестировщик QA: проверить сценарии с клавиатурой, экранными читалками, отключённым JS.
DevOps/Безопасность: настроить серверные правила и мониторинг.

Критерии приёмки

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

Примечания по безопасности и приватности

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

Итоги

Клиентские методы (CSS/JS/jQuery) позволяют уменьшить риск простого копирования контента и снять часть автоматических операций (копировать/вставить, правый клик), но не дают полной защиты. Лучший подход — комбинировать клиентские ограничения с серверными мерами безопасности, пометками авторства и мониторингом.

Резюме:

Используйте user-select и события oncopy/onpaste/oncontextmenu для базовой защиты.
Оценивайте влияние на доступность и UX.
Применяйте серверные механизмы и мониторинг для реальной защиты.