Bezpečný Javascript - Builder.cz - Informacni server o programovani

Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:



JavaScript

Bezpečný Javascript

html_obecne

5. února 2002, 00.00 | Začali jste publikovat na webu v HTML s Javascriptem? Pak možná nechcete, aby si někdo jiný mohl stáhnout vaše obrázky. Či chcete poskytnout nějaké informace jen některým uživatelům.

Dnes a zde bych se rád věnoval tématu, které se více méně týká každého, kdo své první výtvory pro web tvoří v HTML. A čím více tvoříte v HTML, tak začínáte cítit potřebu, oživit nějak ony statické stránky. Často tato potřeba bývá nedostatečně ukojena právě Javascriptem.

V podstatě asi každému se ze začátku, zdá že s ním dokáže vyřešit všechny jeho stávající potřeby. A bezpochyby se tak i stává. Ovšem tím rostou/vznikají i naše nové. Bohužel či bohudík, již tyto potřeby často nejsou přes HTML a Javascript řešitelné či jsou pro ně nevhodné. To ovšem neznamená, že se nepokoušíme o jejich implementaci.

Myslím si, že typickým příkladem je zobrazení pouze některých informací pouze některým uživatelům. Často to bývá přání, aby si někdo jiný nemohl stáhnout váš obrázek či data. V dalších odstavcích se pokusím ozřejmit některé možnosti, jak co udělat, ale především se zmíním o pro a proti jednotlivých možností.

!!! Velice rád bych zdůraznil, že nejsem absolutně zastáncem těchto technologií pro tento účel. Osobně preferuji PHP, které tento úkol dokáže vyřešit mnohem lépe. To samé by mělo dokázat i ASP !!!

Ad 1 – ochrana obrázku

Než se podíváme, na jednotlivé kódy jak to udělat. Tak si nejdříve projdeme jednotlivé pro a proti. To nejzákladnější co platí i pro PHP a ostatní je, jakmile je obrázek zobrazen uživateli neexistuje žádný způsob, jak mu znemožnit jeho uložení/zkopírování. Ať už to udělá přes kontextové menu – uložit jako či si uloží celou stránku i s obrázky, použije printscreen nebo si daný obrázek zkopíruje z cache anebo si přímo odchytí datagramy daného obrázku.

Z předchozího lze Javascriptem ošetřit jen stažení obrázku přes kontextové menu. A to ještě bídně. Protože podpora Javascriptu v daném prohlížeči může být vypnutá, chybně nainstalovaná či váš skript není podporován daným prohlížečem.

<!-- soubor menu.html -->
<html>
<body>
<script type="text/javascript"> // hide context menu
     function menu(e) {
          alert("Context Menu is forbidden");
          return false;
     }
</script>
<script type="text/javascript">
     var NN4 = document.layers;
     document.onmousedown = menu;
     document.onmouseup = menu;
     if (NN4) window.captureEvents(Event.MOUSEDOWN);
     if (NN4) window.captureEvents(Event.MOUSEUP);
     window.onmousedown = menu;
     window.onmouseup = menu;
</script>
<script type="text/javascript">
     document.oncontextmenu = menu;
     window.oncontextmenu = menu;
</script>
</body>
</html>

Tento kód dokáže odfiltrovat levé tlačítko myši, které slouží pro vyvolání kontextového menu. Často se ale zapomíná, že objekty na stránce mají svůj tabOrder. Na objekt/obrázek se tedy postupem času dostanu i přes tabulátor a pak mi pro vyvolání kontextového menu stačí jen klávesa kontextového menu. Bohužel položka Zobrazit zdrojový kód přímo v prohlížeči nelze zakázat.

Zde uváděné kódy by měli fungovat pod Internet Explorerem. Pro Netscape je nutné často provést jen drobné úpravy a pod ostatními prohlížeči to nemusíte ani rozchodit.

Ad 2 – ochrana dat

Ochrana dat, přesněji řečeno nějakého textu, přes Javascript je náročnější než, když se snažíte chránit obrázek. Dobré by bylo taky dodat, že může být ale také mnohem dokonalejší oproti ochraně obrázku.

Zde existuje množství způsobů jak schovat různé informace na stránkách. Nejdříve je nutné si uvědomit, před kým resp. čím dané informace schováváte. Je-li to jen člověk. Můžete podle ruského vzoru použít text psaný barvou pozadí na místě, kde by ho nečekal. Po označení celého textu se skrytý text objeví.

<p><font color="#ffffff">hledáš něco</font></p>

Či můžete to můžete zkombinovat s tím, že nastavíte velice malou velikost písma. Několik stránek je menší něž jeden řádek. Pro čtení textu je pak nutné použít zdrojový kód. Nebo jako v prvním případě použít Javascript a při zadání nějakého parametru v URL se daný text pak zobrazí jinak – viditelně.

<!-- soubor smalltext.html -->
<html>
<head>
<style>
<!--
body{color:#aaffff;background-color:#003050;}
p{font-size:x-small;color:#aaffff;font-family:Verdana}
p.secret{font-size: 1%; color: #003050 }
-->

</style>
</head>

<body>
<p>Zde může být cokoliv. Skrytý text bude na tolik malý, že ani po označení ho nikdo nemá šanci přečíst.</p>
<p class="secret">Napiš mi několik skrytých stránek</p>
</body>
</html>

Podobným způsobem je vytvoření odstavce, který se zobrazí jen při správném parametru. Zde tkví, problém v tom, že IE definuje odstavec jako DIV zatímco NN jako LAYER a k tomu nové verze převzala DIV z IE. A to se vůbec nezmiňuji o tom, co budete muset udělat pro jiné prohlížeče. Tento způsob vypadá nadějně, ale zavrhuji ho díky různorodosti jednotlivých prohlížečů natož rozdílnosti jejich jednotlivých verzí.

<!-- soubor layers.html -->
<html>
<script type="text/javascript"> // only OnLine reading
     if (parent.location.href.lastIndexOf(":") != 4) { parent.location.href = "index.htm"; }
     if (!navigator["onLine"]) { parent.location.href = "index.htm"; }
</script>     
<script type="text/javascript"> // only for NN or IE          
     if (navigator.userAgent.toLowerCase().indexOf("mozilla") > -1) { }
          else { parent.location.href = "index.htm"; }
</script>

<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<script type="text/javascript"> // no NN or IE users could see the s-e--c-r---e-t code, until load index.htm, but no now
     if (document.layers) { document.write('<layer id="d1" name="d1">') }
          else if (document.all) { document.write('<div id="d1" name="d1" style="POSITION: absolute;">') }
               else { parent.location.href = "index.htm" }
</script>
<p>loading... (visible text)</p>
<h1><center><img border="0" src="images/underConstruction.GIF" hspace="07" vspace="07" width="50" height="59" align="absmiddle"><font color="#FF0000"><b>Sorry, pages under construction</b></font><img border="0" src="images/underConstruction.GIF" hspace="7" vspace="7" width="50" height="59" align="absmiddle"></center></h1>
<p><font size="48"><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br><br><br><br> <br><br> .</font></p>
<script type="text/javascript">
     if (document.layers) { document.write('</layer>') }
          else if (document.all) { document.write('</div>') }
               else { parent.location.href = "index.htm" }
</script>
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<script type="text/javascript">
     if (document.layers) { document.write('<layer id="d2" name="d2" visibility="hidden">') }
          else if (document.all) { document.write('<div id="d2" name="d2" style="POSITION: absolute; important; VISIBILITY: hidden">') }
               else { parent.location.href = "index.htm" }
</script>

<p>secret layer – text</p>

<script type="text/javascript">
     if (document.layers) { document.write('</layer>') }
          else if (document.all) { document.write('</div>') }
               else { parent.location.href = "index.htm" }
</script>
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->

</body>
<script type="text/javascript">

// show !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var myParam = "abcdef";
function myload()
{
     if (document.layers) {
          document.layers["d1"].visibility = "hidden";// or hidden = false;
          document.layers["d2"].visibility = "visible";
     } else if (document.all) {
          document.all["d1"].style.visibility = "hidden";
          document.all["d2"].style.visibility = "visible";
     } else { parent.location.href = "index.htm" }
}

if(window.location.search.indexOf(myParam)!=-1) {
     myload();
}     
</script>
</html>

A pokud má být ošálen i robot, který prohledává váš web. Pak je nutné celý skrytý text zakódovat. A to pokud možno, tak aby šel dekódovat jen předávaným parametrem. Bez toho aby zde byla někdo jakákoliv podmínka if (param != "heslo") { ... }. Lepší je to, když se zadaným parametrem vždy dekóduje daný text. Poněvadž pak nedáváte nikomu možnost, aby přímo ze zdrojového kódu stránky zjistil správný parametr.

Nevýhoda kódovaných dat uložených v HTML spočívá v tom, že je nemůžete psát přímo. Potřebujete nějaký další program, který vámi napsaná data zakóduje a následně vloží do HTML souboru. To však při psaní nějakého dokumentu opravdu zdržuje a není zrovna moc pohodlné. Jiná nevýhoda je ve velikosti souboru. Soubor se načítá vždy celý bez ohledu na to co se bude zobrazovat.

Ad 3 – přesměrování

Mohlo by se zdát, že přesměrování na nějakou stránku např. podle parametru v URL, je dostatečná ochrana. Upřímně řečeno není. Za prvé celá URL i s parametrem zůstává v historii prohlížeče. Mimo to, i když je přesměrování okamžité není problém získat zdrojový kód takovéto stránky, v němž se pak můžeme dočíst na jakou adresu mohu být přesměrován při správném parametru.

Ovšem je-li cílová URL zakódovaná, tak mi ani zdrojový kód nepomůže. Přesto to nevyřeší problém s historií prohlížeče a s tím, že Javascript v prohlížeči nemusí být dostupný. Či ten fakt, že naprogramovat dobrý šifrovací algoritmus v Javascriptu je skoro nemožné. Obzvláště, když s tím nemáte zkušenosti.

Uvádět zdrojový kód zde nebudu, už jen z toho důvodu, že unikátnost kódovacího, i když velmi jednoduchého, algoritmu může být tou nejlepší částí ochrany.

Závěrem: Doufám, že jsem názorně ukázal, že Javascript není vhodný pro ochranu a je/bylo by lepší používat vyspělejší technologie jako PHP či ASP. A trochu pomohl těm, kteří přesto chtějí pro tento účel používat Javascript.

Zdrojové kódy zde zmíněné si můžete jsou v tomto souboru secureJavascript.zip (2 kB).

Tématické zařazení:

 » Rubriky  » JavaScript  

 » Rubriky  » Web  

 » Rubriky  » HTML  

 

 

 

Nejčtenější články
Nejlépe hodnocené články

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: