Brutalna zagrywka
Czyli jak zmusić do uległości przeglądarkę

O co chodzi
Jednemu z moich czytelników zdarzył się następujący problem: ktoś podkradał mu grafikę z jego strony po czym umieszczał na swojej podpisując się pod nią swoim nazwiskiem. Są ku temu oczywiście odpowiednie rozwiązania prawne, ale my przecież nie będziemy się procesować - więc co zrobić?

Tutaj z pomocą przychodzi DHTML! Dzięki niemu możemy znacznie utrudnić pobranie i zapisanie grafiki przez użytkownika na dysku. Rzeczywiście jest to dosyć brutalne rozwiązanie ze strony webmastera, ale proszę sobie wyobrazić, że w pewnym stopniu da się to zrobić!

Filozofia
Znalazłem kilka sposobów na utrudnienie życia wścibskiemu użytkownikowi:
używając DHTML-a można umieżcic każdy obrazek na warstwie i przykryć go kolejną (przezroczystą) warstwą. Po co? Jeśli teraz ktoś kliknie na takim obrazku to tak naprawdę nie kliknie na nim, ale na warstwie, która będzie nad nim i w związku z tym nie będzie miał możliwosci zapisania od razu takiego pliku!
Dzięki pomocy czytelnika wiem już, że aby zmusić przeglądarkę do niezapisywania do cachu należy użyć znacznika META:
<meta http-equiv="Pragma" content="no-cache">
Ale niestety funkcja ta nie spełniła do końca moich oczekiwań, gdyż w IE 5 podczas oglądania tak spreparowanej strony zawierającej ten znacznik META i tak przglądarka zapisywała grafikę do cachu i można ją było z tamtąd spokojnie pobrać. Jedyną nadzieją pozostaje fakt wynikający z niewiedzy użytkownika wynikającej z faktu, gdzie jest katalog z cachem!
Ale na poważnie.
Otrzymałem kilka sugestii na to, że istnieją pluginy zabraniające nawet zrobienie zrzutu ekranu.

Co do pluginów pewien nie jestem czy coś takiego istnieje ?
Prawdą jest jednak, że są takie programy. Przykład znajdziemy na stronie:
www.terraserver.microsoft.com.
Aby móc oglądać pełnowartościowe zdjęcia z satelity należy zainstalować program, który zablokuje możliwość wykorzystania takich zdjęć do własnych celów. Można też oglądać zdjęcia bez ściągania tego programu, ale wtedy są one trochę "wybrakowane".
Więc nadal szukam pluginu pozwalającego na coś takiego, ale jestem raczej sceptyczny co do tego czy plugin javy będzie w stanie przechwycić sterowanie programami służącymi do zrzutu programu na tyle dobrze aby im to uniemożliwić.
Pozostają jedynie jak na razie tylko takie półśrodki.

Kolejne utrudnienie przyszło mi jeszcze do głowy. Tym razem doprowadzające do furii! Otóż oczywiście na niewiele zdadzą się te wszystkie zabezpieczenia jeśli użytkownik podpatrzy nam kod na stronie i wpisze sobie adres samych plików graficznych do paska adresów. Istnieje sprytny sposób na zabezpieczenie się przed podglądaniem kodu źródłowego. Należy otworzyć użytkownikowi stronę w trybie pełnoekranowym i wyłączyć obsługę prawego przycisku myszy. A tak to można zrobić:

blokada prawego przycisku myszy

function click() {
    if (document.all) {
      if (event.button == 2) {
      alert("Funkcja zablokowana");
      return false;
      }
  }
  if (document.layers) {
    if (this.which == 3) {
      alert("Funkcja zablokowana");
      return false;
    }
  }
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;


Zaprezentowane tu rozwiązanie też jednak nie jest do końca pozbawione wad, gdyż cały czas można obejrzeć kod takiej strony wybierając z menu Widok->Źródło. Pewnym rozwiązaniem może być otworzenie tej strony w nowym oknie nie zawierjącego gónego menu, ale też nie do końca skutecznym.

Widziałem kilka stron w sieci, którym nie można było kompletnie podejrzeć kodu, ale (z uwagi na to, że nie widziałem ich kodu) nie wiem jak uzyskać taki efekt.
Jeśli wiesz jak go osiągnąc daj mi proszę znać.
Przykład strony z zabezpieczonym prawym przyciskiem i jej kod. Co jednak z tych wszystkich zabezpieczeń i z cachu jeśli wystarczy, że ktoś sobie zapisze całą stronę na dysku a nowsze przegladarki same już dociagną pliki graficzne?! I na to jest sposób!
Zamiast normalnie umieścić obrazek w tagu <IMG> można wrzucic w to miejsce tabelę <TABLE> z tłem tego obrazka, ale nie jako zwykle tło <TABLE background="katalog/grafika.jpg"> tylko zdefiniowane w stylu jako: <TABLE style="background-image: url(katalog/grafika.jpg);">. Efekt ten sam. Nie spotkałem się jeszcze z przeględarką, która ściągnęłaby przy zapisywaniu grafiki zdefiniowane w arkuszach styli. A oto właśnie chodzi .

Opis skryptu
Dostępny tu skrypt działa jedynie pod Internet Eplorerem 4.0 i wzwyż, okazało się natomiast, że w Netscapie nawet nie trzeba go używać gdyż wystarczy użyć grafiki jako tła (zdefiniowanego w stylach) a Netscape już sam nie podaje opcji zapisania takiego obrazka! Przedstawię skrypt, który przykryje przygotowanymi przez nas atrapami wszystkie (zabezpieczone) przez nas obrazki na danej stronie, skrypt ten można używać wymiennie z wyżej już opisaną blokadą prawego klawisza myszki, który automatycznie również nie pozwoli na zapisywanie grafik
Nic nie stoi oczywiście na przeszkodzie aby połączyć siły i użyć oba skrypty...

W sekcji HEAD należy wstawić poniższy arkusz styli:
 
Definicja arkuszy stylów

<STYLE type=text/css>
.atrapa {
position: absolute;
}
<STYLE>

Jest to klasa, z której będą korzystać wszystkie nasze atrapy. Po opis position: absolute;

Teraz wreszcie główne danie, czyli skrypt:
skrypt

<script language="JavaScript" TYPE="text/JavaScript">
<!--
/****************************************
Wykrycie przeglądarki
****************************************/
ie4=(document.all)?1:0;
// Inicjalizacja zmiennych l-left, t-top, h-height, w-width
var l,t,h,w;

/****************************************
Funkcja ustawia wartości left i top
****************************************/
function ustaw(ident){
document.all[ident].style.left=document.all[ident].offsetLeft;
document.all[ident].style.top=document.all[ident].offsetTop
}
/****************************************
Przesuwa warstwę ident
do zadanych współrzędnych x,y
****************************************/
function przesun(ident,x,y) {
document.all[ident].style.left = x;
document.all[ident].style.top = y;
}
/****************************************
Odczytuje do zmiennych globalnych l,t
pozycję wartstwy ident
****************************************/
function pozycja(ident) {
l = document.all[ident].style.pixelLeft;
t = document.all[ident].style.pixelTop;
}
/****************************************
Odczytuje do zmiennych globalnych h,w
wymiary wartswty ident
****************************************/
function odczytaj_wymiary(ident) {
h = document.all[ident].scrollHeight;
w = document.all[ident].scrollWidth;
}
/****************************************
Ustawia wymiary danej warswty ident
na wymiary h,w
****************************************/
function ustaw_wymiary(ident) {
document.all[ident].style.height = h;
document.all[ident].style.width = w;
}

/****************************************
Główna funkcja programu
Odczytuje wymiary i pozycję
każdej warstwy grafika1 ...
i przykrywa je warstwami atrapa1, itd...
****************************************/
function init(il_warstw){
  var i;
  if(ie4)
  for(i=1; i<=il_warstw; i++) {
eval("ustaw('grafika"+i+"');");
eval("pozycja('grafika"+i+"');");
eval("odczytaj_wymiary('grafika"+i+"');");
eval("ustaw_wymiary('atrapa"+i+"');");
eval("przesun('atrapa"+i+"',"+l+","+t+");");
}
}
-->
</SCRIPT>


Myślę, że kod jest zrozumiale napisany, nie będę z osobna opisywał tutaj każdej z tych funkcji.

Ich opis będzie wkrótce dostępny w kursie DHTML.
A oto jak należy w sekcji BODY "ukrywać" obrazki.
zastosowanie

<DIV id="grafika1" style="width: 200; height: 200;">
<TABLE
style = "background-image: url(images/plik.jpg);
        background-repeat: no-repeat;"
  width="200"
  height="200">
<TR><TD>&nbsp;</TD></TR></TABLE>
</DIV>
<DIV id="atrapa1" class="atrapa"></DIV>

Inaczej mówiąc zamiast używać tagu IMG w taki sposób:
<IMG SRC="images/plik.jpg" width=200 height=200>

należy zastosować konstukcję zawartą w poprzedniej tabeli.

I już na koniec trzeba jeszcze policzyć ile mamy ukrytych w ten sposób obrazków i tę liczbę podać w wywołaniu funkcji init(il_wartsw). Na przykład w ten sposób:
 
wywołanie funkcji init()
 
<BODY onLoad="java script: init(2);"
onResize="history.go(0)"
bgcolor="White" leftmargin="50">


Czyli dwie grafiki są ukryte w powyższym przykładzie.
Funkcja onResize="history.go(0)" przeładowuje stronę jeśli użytkownik zmienił rozmiar okna przeglądarki by umożliwić tym samym ponowne zakrycie wszystkich grafik.

Ciekawe czy "takie owakie"