Na początku wiedz, że nie ma skutecznego sposobu na zablokowanie kopiowania tekstu i grafik ze strony internetowej. Programiści znający mechanizmy renderowania HTML mogą z łatwością obejść te „zabezpieczenia”. Natomiast laik jak się uprze to wygogluje rozwiązanie ale grzebanie w źródle może go szybko zniechęcić, szczególnie wtedy gdy kod JS i CSS będzie obfuskowany. Jeśli blokada oparta jest na samych skryptach JavaScript to wystarczy wyłączyć ich obsługę w ustawieniach przeglądarki internetowej.
Blokada zaznaczania tekstu
1 2 3 4 5 |
<script> document.onselectstart = function(){ return false; } </script> |
Zdarzenie onselectstart wyzwalane jest w momencie rozpoczynania zaznaczania. Innym sposobem jest umieszczenie atrybutu ze zdarzeniem bezpośrednio w znaczniku HTML. Na przykład:
1 |
<body onselectstart="return false"> |
Możliwość zaznaczania tekstu można zablokować również za pomocą stylów CSS:
1 2 3 4 5 6 7 |
.selText-disable { user-select: none; /* Chrome, Opera, Firefox */ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -ms-user-select: none; /* IE, Edge */ } |
Klasę selText-disable możesz umieścić w wybranych elementach strony, na których blokada ma działać. Na przykład:
1 2 3 4 5 6 7 8 9 |
<div class="selText-disable"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> |
Blokada kopiowania (Ctrl+C), wycinania (Ctrl+X) i wklejania (Ctrl+V) tekstu ze schowka
Najprościej użyć atrybutów (oncopy, oncut, onpaste) bezpośrednio w znaczniku HTML:
1 |
<body oncopy="return false" oncut="return false" onpaste="return false"> |
Blokada menu kontekstowego
1 2 3 4 5 |
<script> document.addEventListener("contextmenu", function(e){ e.preventDefault(); }, false); </script> |
Zdarzenie contextmenu jest uruchamiane, gdy użytkownik próbuje otworzyć menu kontekstowe. To zdarzenie jest zwykle wyzwalane przez kliknięcie prawym przyciskiem myszy. Powyższy skrypt wyłączy menu kontekstowe a więc zablokujesz możliwość zapisu grafik na dysk komputera.
Blokada drukowania strony
W tym celu można zastosować banalny trik dodając klasę CSS do znaczników, które mają być pominięte podczas wydruku strony.
1 2 3 |
@media print { .skip-print { display: none; } } |
Podsumowanie
W tym poście przedstawiłem kilka prostych rozwiązań, które mogą Ci pomóc ale niekoniecznie. Pamiętaj, że większość odwiedzających nie ma złych zamiarów a tego typu mechanizmy blokujące mogą ich irytować i zniechęcać do powrotu. Dlatego ostrożności i żeby nie „przedobrzyć” ;).
Obrazek wyróżniający do posta: Darwin Laganzon