Защищаем текст на сайте от копирования
Содержание:
Ниже представлены примеры защиты текста на сайте от копирования, добавление копирайта при копировании и отключение выделения текста в браузере. Пример с разрешением копировать текст при "авторизации" через куки.
Запретить копировать текст с сайта
Первый вариант – добавить атрибут 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. На сегодняшний день она вроде как не поддерживается, но на практике она вполне себе рабочая. Возможно стоит поискать альтернативу.