Jak utrudnić kopiowanie zdjęć ze strony?

Autor: Paweł Rajewski

Po trzech artykułach na temat zabezpieczania tekstu, pora na zabezpieczenie zdjęć i obrazków. Niestety, możliwości są tu skromniejsze niż w przypadku tekstu, i uzyskane efekty będą mniejsze.

Po wyświetleniu strony nasze zdjęcie „leży” już gdzieś na dysku czytelnika i jego odnalezienie nie jest zadaniem trudnym. Na szczęście zabezpieczanie grafik potrzebne jest rzadko, i dotyczy zwykle pojedynczych zdjęć lub rysunków.

Do zabezpieczania zdjęć można przystosować niektóre z metod używanych do zabezpieczania tekstów, chociaż nie wszystkie będą funkcjonowały poprawnie. W tym artykule przedstawię więc tylko te proste działania, które są specyficzne dla grafik i nie były wymienione wcześniej. Sprawdźmy co można w tej dziedzinie zrobić.

Podpisanie

Niektóre programy graficzne potrafią „podpisać” zdjęcie, wprowadzając do niego specjalną, ukrytą i trwałą informację (znak wodny). W warunkach amatorskich nie ma to jednak większego zastosowania (może wymagać wykupienia odpowiednich praw) i raczej nie zniechęci do nielegalnego wykorzystania tak oznaczonych fotografii („podpis” jest niewidoczny). Lepszą metodą jest widoczne podpisanie zdjęcia w programie graficznym i oznaczenie na nim praw autorskich należących do konkretnej osoby lub firmy. To oczywiście nie uniemożliwi skopiowania, ale utrudni wykorzystanie zdjęcia w innym serwisie. Jeśli podamy swój adres, to w razie skopiowania takie zdjęcie stanie się naszą darmową reklamą.

Blokada menu

Oto najszybszy sposób pobierania zdjęć: kliknięcie prawym przyciskiem i „Zapisz obraz jako…”. Natychmiast nasuwa się pomysł: zablokować menu kontekstowe nad chronionym obrazkiem. Można wykorzystać do tego zdarzenie oncontextmenu wywoływane tuż przed wyświetleniem wyskakującego menu:

<IMG SRC="obrazek.jpg" ALT="" 
oncontextmenu="window.event.returnValue=false;"> 

Nad tak opisanym obrazkiem nie można rozwinąć menu kontekstowego i tym samym skorzystać z funkcji „Zapisz obraz jako…”. Uniemożliwia to również skopiowanie obrazka do schowka oraz wyświetlenie „Właściwości”, co pozwoliłoby szybko poznać nazwę i lokalizację pliku.

Blokada przeciągania

Zablokowanie menu kontekstowego zabezpiecza przed bezpośrednim zapisaniem obrazka, ale nie uniemożliwia skopiowania go do innego okna przeglądarki, skąd bez problemu dokonamy zapisu. Otwieramy drugie okno Explorera, chwytamy obrazek myszą i przeciągamy go do tego okna. Gdy przeglądarka wyświetli grafikę, mamy już do dyspozycji menu kontekstowe… Podobny efekt uzyskamy przeciągając obrazek na pasek adresowy przeglądarki. Aby utrudnić tę operację, należy zablokować przeciąganie. Najprostszy, „bezskryptowy” sposób polega na objęciu obrazka linkiem prowadzącym do bieżącej strony:

<A HREF="#" STYLE="cursor: default;"><IMG 
SRC="obrazek.jpg" BORDER="0"></A> 

Przeciągnięcie tak opisanego obrazka do nowego okna otworzy w nim całą stronę, zamiast samej grafiki. Inny sposób to skorzystanie ze zdarzenia ondrag sygnalizującego przeciąganie. Rozbudowując poprzedni skrypt:

<IMG SRC="obrazek.jpg" ALT="" 
oncontextmenu="window.event.returnValue=false;" 
ondrag="window.event.returnValue=false;"> 

Tak opisany obrazek nie będzie reagował na próby przeciągania i nie da się nad nim rozwinąć menu kontekstowego.

Blokada kliknięć

To jakby skrót ostatniego przykładu. Zamiast osobno blokować menu kontekstowe (prawy klik) i przeciąganie (lewy przycisk), można zablokować wszystko, co zacznie się od naciśnięcia dowolnego klawisza myszki nad obrazkiem. Sygnalizuje to zdarzenie onmousedown. Niestety, to zdarzenie nie może w prosty sposób anulować menu kontekstowego – zamiast menu trzeba wyświetlić inne okienko (a wówczas menu już się nie pojawi). W poniższym przykładzie naciśnięcie klawisza myszki nad obrazkiem wyświetli okienko alert() ze stosownym komunikatem:

<IMG SRC="obrazek.jpg" ALT="" 
onmousedown="window.alert('Obraz chroniony prawem autorskim. Kopiowanie 
wymaga uzyskania zgody autora');"> 

Wadą takiego rozwiązania jest reagowanie alertem na kliknięcie obrazka, co nie ma miejsca, gdy blokujemy osobno menu i osobno przeciąganie. Ale jest też zaleta – działanie w przeglądarkach nie obsługujących zdarzenia oncontextmenu, np. starszych Explorerach.

Ukrycie zdjęcia, przewinięcie strony

Blokadę kliknięć można wykorzystać do ukrycia kopiowanego zdjęcia:

<IMG SRC="obrazek.jpg" ALT="" 
onmousedown="this.style.visibility='hidden';"> 

Po kliknięciu (próbie kopiowania) zdjęcie zniknie i pojawi się dopiero po ponownym załadowaniu strony.

Można też przewijać stronę do miejsca (np. początku lub końca), gdzie podana jest informacja o zakazie kopiowania (ponieważ podczas tej operacji zdjęcie ucieknie z pola widzenia, nie będzie można skopiować go, zapisać, ani przeciągnąć):

<IMG SRC="obrazek.jpg" ALT="" 
onmousedown="window.scrollTo(0,2000);"> 

W tym przykładzie strona jest przewijana do punktu o współrzędnej pionowej 2000 pikseli, albo do końca, jeśli jest krótsza.

Rollover

Do zabezpieczenia zdjęcia można stosować popularny efekt rollover polegający na podmienianiu grafiki po wskazaniu jej myszką. Zdjęcie może być zmieniane na inne (np. o gorszej jakości) jeśli tylko użytkownik wskaże je myszką. Oryginał będzie widoczny tylko wtedy, gdy odsunie się kursor poza obrazek:

<IMG SRC="obrazek.jpg" ALT="" 
onmouseover="this.src='obrazek1.jpg';" 
onmouseout="this.src='obrazek.jpg';"> 

Oczywiście, obydwa obrazki powinny zostać załadowane w trakcie ładowania strony, aby podmienianie trwało błyskawicznie.

Przykrycie

Prostym zabezpieczeniem zdjęcia może być przykrycie go przezroczystą grafiką w formacie *.gif. Nad takim zdjęciem wszystkie metody kopiowania będą działały prawidłowo, ale kopiowany będzie pusty GIF, a nie znajdujący się pod nim oryginał. Efekt można osiągnąć np. tak:

 <SPAN STYLE="background-image: url(obrazek.jpg);"><IMG 
SRC="piksel.gif" WIDTH="200" HEIGHT="200" 
ALT=""></SPAN>

W tym przykładzie obrazek o wymiarach 200px x 200px został ustawiony jako tło kontenera SPAN, którego jedyną zawartością jest rozciągnięty do wymiarów 200px x 200px, a w oryginale jednopikselowy, przezroczysty piksel.gif. Ten prosty sposób utrudnia również szybkie poznanie lokalizacji obrazka przy pomocy „Właściwości”.

Dzielenie zdjęcia

Jedną z metod utrudnienia kopiowania obrazka może być podzielenie go na mniejsze fragmenty. Nawet gdy zostaną one skopiowane, będą wymagały złożenia w programie graficznym i ponownego zapisu co zapewne odbije się na jakości zdjęcia (jeśli ma być zapisane w formacie *.jpg). Zdjęcie może być podzielone na nieregularne (choć z konieczności prostokątne) fragmenty, co utrudni szybkie zapisanie całości.

Zmiana rozszerzenia

Internet Explorer potrafi rozpoznać plik graficzny po jego strukturze. Możemy więc zmienić rozszerzenie nazwy obrazka na prawie dowolne, zarówno przypadkowe (np. obrazek.gso), mylące (np. obrazek.doc, obrazek.js), jak i zupełnie je usunąć (np. obrazek). Przeglądarka poradzi sobie z wyświetleniem takiego pliku, a użytkownik szukający go na dysku może zostać zmylony (szczególnie, gdy zdjęcie będzie podzielone na mniejsze fragmenty o różnych nazwach i rozszerzeniach). Oczywiście, zmieniając rozszerzenie należy zmienić też odwołanie do niego w kodzie strony. Przed opublikowaniem zdjęcia warto sprawdzić, czy faktycznie zostanie ono dobrze odczytane – niektóre rozszerzenia np. *.html, nie dadzą spodziewanego efektu.

Wpisywanie skryptem

W trakcie zapisywania strony na dysk („Zapisz jako…”), Internet Explorer tworzy osobny folder, w którym umieszcza wszystkie grafiki, i odpowiednio zmienia odwołania do nich w kodzie strony. Dzięki temu strona jest kompletna i prawidłowo wyświetlana, choć jej kod nie jest dokładną kopią kodu strony, jaka była zapisywana. Przeglądarka potrafi zmienić odwołania do grafik, ale nie potrafi przeanalizować działania skryptów. Jeśli więc odwołanie do obrazka zostanie wpisane w kod choćby pojedynczą instrukcją document.write(), zostanie skopiowany tylko kod skryptu, bez obrazka, do którego ten skrypt się odwołuje:

<SCRIPT TYPE="text/JScript" LANGUAGE="JScript"> 
window.document.write('<IMG SRC="obrazek.jpg" 
ALT="">'); 
</SCRIPT> 

Tak wpisany obrazek będzie prawidłowo wyświetlony na oryginalnej stronie, ale nie zostanie razem z nią skopiowany.

Wpisywanie odwołań skryptem ma dodatkową zaletę – uniemożliwia wyświetlenie chronionej grafiki gdy użytkownik wyłączy obsługę skryptów w przeglądarce, co wyłącza także wszystkie zabezpieczenia (poza przezroczystym gif-em). Wpisywany kod może być dodatkowo zaszyfrowany w sposób podobny do przedstawionego w artykule o ochronie tekstów (cz. 2) – aby utrudnić poznanie prawdziwej nazwy i lokalizacji zdjęcia.

Niestety, samej grafiki nie można szyfrować, czyli przesyłać (i zapisywać na dysku) w formie silnie zniekształconej, co uniemożliwiłoby skorzystanie z zawartości pamięci cache przeglądarki (w pewnym sensie każdy format graficzny jest szyfrowaniem, ale nie o to tu przecież chodzi). Jedyną metodą „zaszyfrowania” jest podzielenie zdjęcia na mniejsze fragmenty, ale i to ma swoje praktyczne granice. Można wyłączyć zapisywanie strony w pamięci cache, lecz mogłoby to niekorzystnie wpłynąć na jej działanie, nie wymieniłem więc tej metody w żadnym z tekstów. Taki sposób nie miałby też zastosowania w przypadku dokumentów dostępnych off-line np. na płytach CD. Nie wspominałem również o przynajmniej jednym sposobie opartym o błędy przeglądarki – ponieważ to metoda mało pewna i raczej bez przyszłości (błędy bywają zwykle naprawiane). Pominąłem także metody mające zastosowanie wyłącznie przy pracy off-line np. z dysku lokalnego lub CD.

Z konieczności sposoby ochrony grafiki są dużo słabsze niż ochrony tekstu, choć z drugiej strony mogą być wizualnie znacznie atrakcyjniejsze. Część z nich może być łączona i wykorzystywana do utrudniania kopiowania nie tylko grafik, lecz również innych elementów strony. Na tym jednak zakończę, nie chcąc napisać zbyt wiele ;-), i pozostawię rozwijanie opisanych pomysłów fantazji czytelników…

Paweł Rajewski