Как защитить сайт от копирования
Некоторые владельцы сайтов пытаются защитить собственные сайты с шедеврами современной литературы от копирования. Лично я считаю, что это всё суета, но в этой статье покажу, как защитить сайт от копирования.
Впрочем это не спасет от профессионального пользователя интернета, но уберегут от тех, кто является обычными пользователями. Применив описанный способ на языке JavaScript вместе с css-решением, можно будет спать чуток спокойнее 🙂
Способ на языке JavaScript
Итак, для того, чтобы было сложнее копировать текст с вашего сайта можно воспользоваться следующим простым кодом, который можно вставить в любое место на странице:
<script type="text/javascript">
document.ondragstart = noselect;
document.onselectstart = noselect;
document.oncontextmenu = noselect;
function noselect() {return false;}
</script>
Разберем код JavaScript
Атрибут событий ondragstart:
Если задать атрибут событий document.ondragstart = noselect, это позволит запретить перетаскивать элементы на странице сайта.
Атрибут событий onselectstart :
Если задать атрибут событий document.onselectstart = noselect, это позволит запретить выделять элементы на странице сайта.
Если задать атрибут событий document.oncontextmenu = noselect, это позволит запретить выводить контекстное меню, которое обычно помогает в работе вебмастера, вылетая при клике правой кнопкой мышки, на странице сайта.
Функция noselect() :
При возврате функцией noselect() значения false, включится дополнительное условие, которое будет препятствовать выделению текста на странице сайта.
Куда вставить код на JavaScript с запретом на копирование с сайта?
Посоветую разбросать эти 4 строчки в разные места HTML-документа. По своему опыту скажу, что это затруднит копирование текста с вашего сайта, которое займёт на пару минут больше времени и вызовет раздражение у того, кто будет заниматься копированием. И только.
Как обойти JavaScript и всё-таки скопировать текст с сайта?
Особенно упёртых вебмастеров, которые умудряются понатыкать функций, нарушающих логику полноценной работы браузера можно легко обойти, сохранив страницу целиком, а потом открыв её в MS Word. Там уже такая защита от копирования с помощью JavaScript не поможет. Мне всегда было ради какого-то упёртого вебмастера лень лезть и отключать JavaScript на сайте (хотя это ещё один из вариантов того, как обойти защиту от копирования сайта).
Запрет копирования через CSS
Здесь применяется не скрипт, а отдельный CSS-стиль, отключающий возможность выделять текст. Вставим его например так:
<!DOCTYPE html>
<html>
<head>
<title>Пример DIV, перекрывающего весь экран</title>
<style>
.noselect {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
</head>
<body class="noselect">
тут контент страницы
</body>
</html>
Теперь контент не будет выделяться, но если вебмастер опытный и не ленивый, он может открыть HTML-код документа и скопировать содержимое оттуда.
Пример на CSS с блокированием экрана с помощью блока
Код страницы с блокирующим весь экран блоком div, который занимает всю ширину и всю высоту экрана:
<!DOCTYPE html>
<html>
<head>
<title>Пример DIV, перекрывающего весь экран</title>
<style>
.content-blocker {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(136, 136, 204, 0.5);
z-index: 4444;
}
</style>
</head>
<body>
тут контент страницы
<div class="content-blocker"></div>
</body>
</html>
Где разместить div, блокирующий всю ширину и высоту экрана?
Сам div можно вставить в любое место в коде страницы только так, чтобы он был вложен только в <body>. Это может потребоваться для того, чтобы запутать пользователя, желающего обойти этот div и добраться до контента страницы.
Для удобства зададим нашему div класс content-blocker :
<div class="content-blocker"></div>
Используемые CSS-стили
Ну и собственно нужно прописать стили, которые растянут этот div на 100% ширины и 100% высоты экрана, поместят его поверх всех элементов страницы и не дадут ему сдвинутся с места. Стили можно задать в контейнере head:
<style>
.content-blocker {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(136, 136, 204, 0.5);
z-index: 4444;
}
</style>
Итак свойства по порядку и то, что они делают:
- Свойство
position: fixed;— нужно для того, чтобы даже при скроллинге длинных страниц наш div жёстко занимал свою позицию и перекрывал весь контент. - Свойства
top: 0;иleft: 0;— задают координаты началаdiv. - Свойства
width: 100%;иheight: 100%;— наследуют 100% ширины и 100% высоты контейнера<body>, а следовательно занимает все пространство страницы. - Свойство
background-color: rgba(136, 136, 204, 0.5);— задаем, если нужно перекрыть пользователю просмотр (тогда прозрачность должна быть либо вообще не задана, либо равняться 1). Если это свойство не задать,divбудет прозрачным: всё будет видно, но скопировать что-либо со страницы будет невозможно без вмешательства с помощью инструментов разработчика браузера. - Свойство
z-index: 4444;— это для того, чтобы поднятьdivнад всеми слоями. Если что-то будет всё-равно выше, то нужно посмотретьz-indexэтого элемента и выставить ещё большийz-indexдля нашегоdiv.
Вывод
Всё, что опубликовано в интернете и отображается в браузере, можно с теми или иными усилиями скопировать. Поэтому перечисленные способы не дают 100% гарантии, что ваш контент не скопипастят 🙂 .
И вместо усложнения жизни себе и другим техническими примочками, более творческим подходом будет регулярное наполнение сайта новым свежим и оригинальным контентом, тогда конкуренты просто умрут от зависти, а все пользователи рано или поздно поймут, где источник интересного контента.
Узнай свой IP адрес
