Защищаем текст на сайте от копирования

       HTML и CSS      html & css  •  javascript  •  jQuery  •  Защита и безопасность      149    
Защита текста на сайте от копирования

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

Запретить копировать текст с сайта

Первый вариант – добавить атрибут oncopy="return false;" к тегу body.

<body oncopy="return false;">
// ...
</body>

Или запретить копировать конкретный элемент:

// ...
<div class="product" oncopy="return false;">
  // ...	
</div>
// ...

Второй вариант - использовать JQuery:

$(function(){
  $('body').attr('oncopy', 'return false;');
}

// Или
$(function(){
  $('.product').attr('oncopy', 'return false;');
}

// Или так:
$('.product').bind('copy cut drag drop', function (e) {
  e.preventDefault();                
});

При копировании текста добавить к нему копирайт

document.oncopy = function(){
  var body = document.getElementsByTagName('body')[0];
  var selection = window.getSelection();
  var div = document.createElement('div');
 
  div.style.position = 'absolute';
  div.style.left = '-99999px';
  body.appendChild(div);
  div.innerHTML = selection + ' Источник: Site.com';
  selection.selectAllChildren(div);
 
  window.setTimeout(function(){
    body.removeChild(div);
  }, 0);
}

Можно добавить адрес текущий страницы:

div.innerHTML = selection + ' Источник ' + window.location.href;

Отключить контекстное меню

$('body').on('contextmenu', false);

У элементов с class="product":

$('.product').on('contextmenu', false);

Отключить выделение текста в браузере

Через CSS можно отключить выделение текста (не поддерживается старыми браузерами).

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

Здесь я покажу пример реализации запрета копирования, до момента "авторизации" через куки. В данном примере я использую библиотеку jQuery Cookie, которую можно скачать по этой ссылке .

$(window).ready(function() {
  var copy = $.cookie('copy')
  password = 'password';

  $('body').bind('copy cut drag drop', function (e) {
      e.preventDefault();                
  }); 

  $('.link_copy').on('click', function () {
      
    while(prompt('Чтобы войти, авторизуйтесь') != password) {
      alert('Это неправильный пароль, пожалуйста, введите пароль еще раз ');
    }
    
    alert('Добро пожаловать! Пароль введён верно!');

    if(copy == null){
      $('body').unbind('copy cut drag drop');        
      $.cookie('copy', 'copy', {
          expires: 30,
          path: '/'
      });    
    } 

  });

  if(copy != null){
    $('body').unbind('copy cut drag drop'); 
  }
});

Суть данного кода такова - пользователь по умолчанию не может копировать на сайте информацию. Есть некий элемент (.link_copy), на который мы навешиваем событие клика (on('click', ...). Этим элементом может быть что угодно (ссылка, изображение и тд.). При клике по данному элементу появляется alret с текстовым полем для ввода пароля (password) и предложением авторизоваться. Если введённые пользователем данные совпадают с установленным паролем, то появляется приветствие "Добро пожаловать! Пароль введён верно!", на машине пользователя библиотека jQuery Cookie установит куку на время, указанное в директиве expires. Пользователь авторизован, а это значит, что правила запрета копирования к данному пользователю уже не применимы.

Это простой пример, который можно (возможно и нужно) расширять под свои задачи. Перед применением данного примера, ознакомьтесь с библиотекой jQuery Cookie. На сегодняшний день она вроде как не поддерживается, но на практике она вполне себе рабочая. Возможно стоит поискать альтернативу.

Комментарии временно оключены

Поиск

Популярное