Сразу же оговорюсь, что я категорически против использования на практике любых методов, описываемых в этой статье. Любой запрет только раздражает посетителей сайта и вряд ли он захочет вернуться снова на страницу, которая, например, блокирует правую кнопку мышки или требует для просмотра текста включенный JavaScript. Максимум, что я признаю, это пассивная защита контента. Это не говоря о том, что любую защиту в случае реальной необходимости можно без особых проблем обойти. Но тем не менее, активная защита от копирования контента иногда встречается на некоторых сайтах. В этой статье я собрал методы активной защиты, которые встречал на практике.
Первый способ, самый простой. Подавление событий выделения текста, движения и клика мышкой, копирования и вызова контекстного меню путем блокировки правой кнопки мыши. Ставится обработчик, который не дает событию всплывать по иерархии DOM и сразу же возвращает флажок отмены:
function nocopy(event) {
var event = event || window.event;
if (event.preventDefault) { event.preventDefault(); }
else { event.returnValue = false; }
return false;
}
document.onmousedown = nocopy;
document.onmouseup = nocopy;
document.onmousemove = nocopy;
document.ondragstart = nocopy;
document.onselectstart = nocopy;
document.ontextmenu = nocopy;
document.oncopy = nocopy;
Способ кроссбраузерный, но, к счастью, прекрасно обходится через выделение всего текста клавишами Ctrl+A и последующего его копирования. В Firefox через настройки обходится защита от блокировки контекстного меню.
Следующий способ используется на онлайн-библиотеках, которые принадлежат копирастам и которые разрешают бесплатное чтение только через их сайт. Принцип действия этой защиты заключается в том, что каждые 10 миллисекунд проверяется наличие выделенного текста и, если таковой найден, принудительно устанавливается фокус на какой-нибудь другой элемент на странице, в данном случае это строка поиска. При этом выделение, естественно, теряется.
Найти: <input type="text" id="searchbox" />
function LockSel() {
selection = '';
if (document.getSelection) {
selection = document.getSelection();
}
else if (document.selection && document.selection.createRange()) {
selection = document.selection.createRange().text;
}
var elem = document.getElementById('searchbox');
if (elem != null && selection != '') {
elem.focus();
}
setTimeout ('LockSel()', 10);
}
LockSel();
Способ хоть и примитивный, но достаточно эффективный. На сайтах онлайн-библиотек он дополнительно усиливается тем, что контент выводится также через JavaScript с использованием одноразовых токенов. Что, впрочем, ни капельки не мешает скачивать любые произведения при помощи несложных грабберов. Но это уже другая история.
Еще один интересный способ. В этом случае ставится обработчик на нажатия клавиш и блокируются комбинации Ctrl+A (выделение всего текста) и Ctrl+U (просмотр исходного текста страницы).
// Вспомогательная функция установки обработчика события
function addHandler(event, handler){
if (document.attachEvent) {
document.attachEvent('on' + event, handler);
}
else if (document.addEventListener) {
document.addEventListener(event, handler, false);
}
}
// Вспомогательная функция принудительного снятия выделения
function killSelection(){
if (window.getSelection) {
window.getSelection().removeAllRanges();
}
else if (document.selection && document.selection.clear) {
document.selection.clear();
}
}
// Функция обработчика нажатия клавиш
function noSelectionEvent(event) {
var event = event || window.event;
// При нажатии на Ctrl+A и Ctrl+U убрать выделение
// и подавить всплытие события
var key = event.keyCode || event.which;
if (event.ctrlKey && (key == 65 || key == 85)) {
killSelection();
if (event.preventDefault) { event.preventDefault(); }
else { event.returnValue = false; }
return false;
}
}
// Установить обработчики клавиатуры
addHandler('keydown', noSelectionEvent);
addHandler('keyup', noSelectionEvent);
При работе с клавиатуры в некоторых браузерах действительно блокируется выделение текста и просмотр исходного кода. Но ведь главное меню браузера никто же не отменял? В Forefox все прекрасно просматривается через "Вид" -> "Исходный код страницы" или аналогичные у других браузеров.
Следующий способ основан наоборот не на снятии выделения с текста, а на выделении по таймеру какого-нибудь постороннего элемента. Например:
<div id="protect" name="protect" style="display:none;">Copyright Protected!</div>
// Вспомогательная функция выделения текста
function protectHTML() {
var el=document.getElementById('protect');
if (document.body.createTextRange) {
var tmp=document.body.createTextRange();
tmp.moveToElementText(el);
tmp.select();
}
else if (window.getSelection) {
var tmp=window.getSelection();
if (tmp !== null) {
if (tmp.setBaseAndExtent) {
var child=el.lastChild;
tmp.setBaseAndExtent(el, 0, child,
typeof(child.innerText) == 'undefined' ?
child.textContent.length : child.innerText.length);
}
else {
var range=document.createRange();
range.selectNodeContents(el);
tmp.removeAllRanges();
tmp.addRange(range);
}
}
}
}
// Запустить функцию по таймеру
setInterval('protectHTML()',10);
Следующий способ, на мой взгляд, наиболее адекватный, так как он не ограничивает пользователя в выделении и копировании текста. Но при копировании к выделенному тексту в конец добавляется строка с указанием копирайта и первоисточника. Кроссбраузерность можно доделать на основе предыдущего кода.
function addLink() {
var body_element = document.getElementsByTagName('body')[0];
var selection = window.getSelection();
var pagelink = '<br /><br /> Источник: '+
'<a href="'+document.location.href+'">'+document.location.href+'</a>';
var copytext = selection + pagelink;
// Создать новый элемент за пределами экрана
var newdiv = document.createElement('div');
newdiv.style.position='absolute';
newdiv.style.left='-99999px';
body_element.appendChild(newdiv);
// Выделить созданный элемент
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
// Удалить созданный элемент
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}
document.oncopy = addLink;
И напоследок небольшой трюк, который используется для защиты картинок от сохранения. Его принцип заключается в том, что вместо картинки выводится прозрачный GIF-файл, растянутый под размер оригинальной картинки, а сама картинка выводится как фоновое изображение. В результате при попытке сохранить изображение вместо него сохраняется только картинка-пустышка. Например:
<img src="nocopy.gif" style="background:url('original_image.jpg');"
width="500" height="400" />
Специально для таких хитросделанных сайтостроителей придумали расширение Firefox
Backgroundimage Saver, которое позволяет сохранять фоновые изображения.