Ukážeme si ako pomocou JavaScriptu zabespečíme našu stránku pred
neoprávneným vstupom nepovolaných návštevníkov. Ukážeme si dva
spôsoby ako na to a bude len na vás aký spôsob si vyberiete.
Najskôr si vyskúšame ako to celé funguje. Kliknite ne tento
odkaz a na nasledujúcej stránke pri dotazovaní sa na heslo
zadajt "page2".
Celý systém je zložený z viacerých funkcií a postupných krokov,
ktoré na seba nadväzujú. V prvom rade si zadefinujeme funkciu
gateKeeper(). Tá bude zabespečovať na vstupnej stránke
otvorenie nového okna (po kliknutí na odkaz vedúci do chránenej
oblasti) v ktorom bude formulárové pole na vyplnenie hesla. Celá
funkcia bude vypadať nasledovne:
function gateKeeper() {
nifty_little_window =
window.open('gatekeep.html',
'theKeeper',
'width=350,height=200,resizable=1');
}
Celý náš príklad sa bude skladať z 3 súborov. Prvý si nazveme
protect.html a bude obsahovať už spomenutý script s funkciou
gateKeeper().
<HTML>
<HEAD>
<TITLE> Protect Page -
Gate Keeper -
protect.html</TITLE>
</HEAD>
<BODY
BGCOLOR="#FFFFFF">
<SCRIPT
LANGUAGE="javascript">
<!--- Skryť pred staršími browsermi
var nifty_little_window = null;
function gateKeeper()
{
nifty_little_window = window.open('gatekeep.html',
'theKeeper',
'width=350,height=200,resizable=1');
}
// End
hiding --->
</SCRIPT>
<form>
<input
type="button" value="Kliknite sem"
onClick="gateKeeper()">
</form>
</BODY>
</HTML></B>
V predchádzajúcom kóde si môžeme všimnúť okrem klasického
zadefinovania známej funkcie gateKeeper() odkaz - tlačítko,
na ktoré je viazaná udalosť onClick, ktoré volá našu známu
funkciu.
Táto bude obsahovať dve nasledovné funkcie, prva s názvom
goForit(), ktorá nám vyhodnotí zadané heslo. Keď nájde
stránku s názvom "heslo".html, potom ju zobrazí ak nie tak smola :)
Môžeme si všimnúť, že celá autorizácia pomocou hesla je položená na
názve konkrétnej HTML stránky a porovnaní zadaného hesla s jej
názvom. Teraz už sľúbená funkcia:
function goForit() {
var location;
var
password;
password=this.document.testform.inputbox.value
location=password
+ ".html"
fetch(location)
theKeeper=window.close()
}
Teraz bude nasledovať stránka gatekeep.html, ktorá bude
obsahovať pole na vyplnenie požadovaného hesla a vlastný vykonávací
mechanizmus.
<HTML>
<HEAD>
<TITLE>Gate
Keeper</TITLE>
<SCRIPT
LANGUAGE="JavaScript">
<!--- Skryť pred staršími
browsermi
function goForit() {
var location;
var
password;
password=this.document.testform.inputbox.value
location=password
+
".html"
fetch(location)
theKeeper=window.close()
}
function
fetch(location) {
var root;
if (opener.closed)
{
root=window.open('','theKeepersGopher','toolbar=yes,location=yes,status=yes,
menubar=yes,scrollbars=yes,resizable=yes,copyhistory=no');
root.location.href
= location;
} else {
opener.location.href =
location;
}
}
// koniec skr.
--->
</SCRIPT>
</HEAD>
<BODY>
<TABLE
BORDER=0 CELLPADDING=0 CELLSPACING=0
WIDTH=100%>
<TR>
<TD ROWSPAN=2
WIDTH=50%>>
<TD WIDTH=50% ALIGN=CENTER
VALIGN=MIDDLE>
<FONT FACE="ARIAL"
SIZE=2><B>Pokúšate sa vstúpiť do chránenej oblasti. Zadajte
prosím Vaše prístupové meno a
heslo.</B></FONT>
<TR>
<TD
WIDTH=50% ALIGN=CENTER
VALIGN=BOTTOM>
<CENTER>
<FORM
NAME="testform">
<INPUT TYPE="text" NAME="inputbox"
VALUE="" size=20>
<INPUT TYPE="button" NAME="button"
Value="Submit Password"
onClick="goForit(this.form)">
</FORM>
</CENTER>
</TABLE>
</BODY>
</HTML>
Takže toľko k samotnej ochrane vašej stránky týmto spôsobom.
Ukážeme si teraz druhý spôsob, troch jednoduchší a nenáročnejší.
Funkčný príklad bude vypadať nasledovne (vložte heslo "heslo1"):
A zdrojový kód bude vypadať nasledovne:
<SCRIPT>
function passWord() {
var testV =
1;
var pass1 = prompt('Vložte prosím Vaše heslo',' ');
while
(testV < 3) {
if (!pass1)
history.go(-1);
if
(pass1.toLowerCase() == "heslo1")
{
alert('Správne!');
window.open('protectpage.html');
break;
}
testV+=1;
var pass1 =
prompt('Prístup zamietnutý - Heslo
nesprávne.','Password');
}
if (pass1.toLowerCase()!="password"
& testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<CENTER>
<FORM>
<input
type="button" value="Vstup do chránenej oblasti"
onClick="passWord()">
</FORM>
</CENTER>
Takže to by sme mali. Sami môžete vidieť že sa jedná o jednoduchý
spôsob zabespečenia HTML stránok. Pokročilejšie funkcie zabespečenia
je potrebné hľadať v systéme akým je ASP, PHP, alebo CGI ... ale pre
začiatok stačí. Majte sa krásne. Do ďalšieho javascriptovania :)
-mn- 
