Beperkte Password protectie met JavaScript

Er zijn dingen die je wel op je website zou willen zetten, maar niet direct met iedereen wilt delen. Denk bijvoorbeeld aan je vakantiefoto's. Het ligt dan voor de hand om die te verstoppen achter een login-code (user-ident met password). Bezoekers die je je foto's wilt laten zien geef je de login-code. De rest van de wereld kan er niet bij...

Op deze bladzijde wordt besproken hoe je het zou kunnen aanpakken om een deel van je website te af te schermen voor niet-gewenst bezoek, waarbij alleen gebruik wordt gemaakt van HTML en JavaScript.

Met de hier besproken techniek is slechts een heel beperkte afscherming mogelijk. Dat komt doordat de hele afscherming aan de PC-kant van de website zit. Door gewoon in de broncode te kijken kun je al zien hoe de afscherming werkt.

Om een goede, behoorlijk waterdichte, afscherming te maken moet de afscherming aan de server-kant van de website worden gemaakt. Bij veel hosting-providers kan het "afschermen van directories" onderdeel zijn van een hosting-pakket. Het gaat dan voornamelijk om professionele pakketten. In de hobby-sfeer (zoals bij deze website) tref je dat veel minder aan.

Als je hosting provider de mogelijkheid biedt om de afscherming aan de server-kant op te lossen moet je dat gebruiken. Dat is betrouwbaarder dan deze techniek.

Gebruik deze techniek dus alleen als het echt niet anders kan:

• Als je hosting-provider géén mogelijkheden biedt om (delen van) je website af te schermen,
• Als je hosting provider géén programmeergereedschappen biedt om zelf een afscherming aan de server-kant te bouwen (bijv. ASP, PHP, enz.).
• Als je hosting-provider geen mogelijkheid biedt om .htaccess te gebruiken. Bij servers die onder Linux of Unix draaien kan dat meestal wel. Zie ook het item "Delen van een website afschermen met een password" .
• Als het geen grote ramp zou zijn als anderen de beveiliging zouden breken (zoals bij vakantie-foto's, reisverslagen, enz.).

Disclaimer
Gebruik van deze techniek is geheel voor eigen risico. De auteur van deze website is niet aansprakelijk voor enige schade die het gevolg is of het gevolg zou kunnen zijn van enige toepassing van deze techniek.
Toepassing van deze techniek op je eigen website betekent automatisch dat je instemt met deze disclaimer en dat je de auteur van deze site vrijwaart van elke schadeclaim.

Op internet zijn diverse scripts te vinden waarmee een deel van een website met een wachtwoord kan worden afgeschermd. Deze zijn echter te doorzichtig om een redelijke afscherming te kunnen bieden. De aanpak op deze pagina gaat net even een stapje verder. Het zou daardoor lastiger moeten zijn om de afscherming te omzeilen.

De hier besproken code staat onder aan deze bladzijde. Je kunt het downloaden om zelf te gebruiken.

• De volgende items worden besproken:
  1. De aanpak van de beveiliging voor je web-pagina's
  2. Het aanmaken van nieuwe login-codes
  3. De manier waarop de login-codes worden versleuteld
  4. Inbouwen in je eigen website
   
• De beveiliging werkt als volgt:
  • Er wordt ingelogd met een user-id en een password. Als die akkoord bevonden zijn wordt dat onthouden in een cookie. Deze cookie verliest zijn geldigheid na een bepaalde tijd die je zelf kunt instellen.
  • Je browser moet cookies accepteren, anders werkt het niet. Als je browser geen cookies accepteert wordt dit gemeld in een alert en wordt de login geweigerd.
  • Elke beveiligde bladzijde controleert de cookie tijdens het laden. Als de cookie is vervallen of niet bestaat, is er geen goede inlogcode gegeven en krijgt de bezoeker geen toegang. De browser presenteert een pagina waarmee alsnog kan worden ingelogd, of waarmee de gebruiker kan terugkeren naar het onbeveiligde deel van de site.
  • Het is mogelijk om onbeveiligde pagina's op te nemen in het beveiligde deel van je website. Dit zou kunnen voorkomen bij pagina's die op meer dan één plaats in je site kunnen worden aangeroepen, zoals bij help-functies.
    Het kan echter verwarring geven en wordt daarom niet aanbevolen.
  • Hieronder staat een voorbeeld. Het user-ident en het password staan erbij genoemd.
    Als je op Login klikt word je naar een beveiligde pagina gebracht. Vandaar kun je naar een paar andere beveiligde pagina's toe. Je kunt het beveiligde deel van de site verlaten door op een knop uit de linker kolom te klikken en er weer terugkeren met de "Terug"-knop van je browser. Natuurlijk kun je ook opnieuw inloggen...
     

    Gebruiker:		Ali-Baba
    Password:		Sesam_Open_U

     
• De niet-beveiligde pagina's in het voorbeeld hebben een lichtgrijze achtergrondkleur. De achtergrond van de beveiligde pagina's is roze van kleur.
• Als je probeert een beveiligde pagina direct te benaderen zonder dat je ingelogd bent, word je gedwongen om dat alsnog te doen. Klik HIER voor een voorbeeld.
• Als je een onbeveiligde pagina, die wel deel uit maakt van het beveiligde deel van de website, direct probeert te benaderen dan kan dat zonder meer. Als je echter vandaar uit naar een beveiligde pagina wilt, moet je toch eerst inloggen. Je wordt dan naar de eerste beveiligde pagina (de "root") gebracht. Klik HIER voor een voorbeeld.
   
• Voor het aanmaken van login-codes is een apart programma beschikbaar. De resultaten daarvan moet je opnemen in het JavaScript dat de inlog-validatie doet (Zie verder op deze bladzijde).
  Klik op de knop hier onder om het programma voor de login-codes te starten.
   
  Maak Login Code
• De code bestaat uit:
  
  1. een formulier in HTML om de gebruikersnaam en het password op te geven (bij eerste login).
  2. een pagina met hetzelfde formulier, om opnieuw in te kunnen loggen als dat fout ging. Dit is de file noaccess.htm.
  3. een stuk JavaScript met functions en data om inloggen mogelijk te maken. Dit is de file .protectpages.
  4. een stuk JavaScript dat door beveiligde bladzijden wordt gebruikt om te verifieren of er is ingelogd. Dit is de file .protectedpage.
  5. een apart programma in HTML om inlogcodes mee aan te maken: createlogincodes.htm.
   
• Een aparte handleiding in .PDF-formaat is beschikbaar. Je vindt hem ook in de downloadfile.
  Om dit te kunnen lezen heb je Acrobat Reader nodig, versie 5.0 of later. Dit gratis programma kun je downloaden, druk op de knop hiernaast.
  Bij de installatie wordt ook de Google-toolbar geïnstalleerd. Als je dat niet wilt moet je op de Adobe-website het vinkje uitzetten vóór je de download laat beginnen.
   
• Het algoritme voor het versleutelen van de user-name en het password werkt als volgt:
  • Geldige karakters zijn:
    A t.m. Z, a t.m. z, 0 t.m. 9 en @ # $ % & + - _=.*
    In totaal zijn dit 73 karakters.
  • De lengte van de string (aantal karakters) n wordt bepaald. Voor elk karakter c in de string wordt het volgende gedaan:
    Zoek de plaats (volgnummer) van c op in de lijst van geldige karakters. Het eerste volgnummer is 1. Vermenigvuldig dit met n² en bepaal de modulus met 73. Beschouw dit als het volgnummer van het versleutelde karakter in de lijst met geldige karakters.
    De versleutelde string is dus even lang als het origineel.
  • Als de string een ongeldig karakter bevat, wordt een lege string teruggegeven.
  • Het aantal geldige karakters moet een priemgetal zijn, om te garanderen dat de versleuteling éénduidig is. Hier is dat 73.
    Als het aantal geldige karakters geen priemgetal is, kunnen verschillende invoeren tot het zelfde resultaat leiden. Dat beperkt de veiligheid van de login-code.
• Met deze werkwijze wordt de bescherming beter als de user-name en het password niet te kort zijn. Aanbevolen wordt de username minimaal 6 en het password minimaal 9 karakters te nemen. Er zijn (strikt genomen) dan 73⁶ ≈ 1.5 * 10¹¹ mogelijkheden voor de user-name en 73⁹ ≈ 6.0. * 10¹⁶ mogelijkheden voor het password.
  Het raden ervan is dan redelijk moeilijk.
• Met het uploaden van de files .protectpages en .protectedpage naar de host kan het een en ander fout gaan, waardoor de beveiliging niet werkt. Zie de hiervoor genoemde handleiding in .PDF-formaat voor oplossingen.
• Als de beveiliging van de browser op een te hoog niveau staat ingesteld, kan het gebeuren dat JavaScript is uitgeschakeld. In dat geval kan een login-code niet uit het formulier worden gelezen en wordt er dus geen toegang verleend. Het beveiligde deel van je website is dan niet toegankelijk, tenzij de gebruiker de namen van de beveiligde HTML-bestanden weet. Hij/zij kan zichzelf dan toch toegang verschaffen.
• Voor de hackers en crackers onder ons: Deze bescherming is het eenvoudigst te kraken door met behulp van het programma voor het maken van login-codes te proberen een versleutelde login-code terug te vinden.
  Een aanpak via de cookie (waarin wordt bijgehouden of je bent ingelogd of niet) schijnt erg lastig te zijn.
  Ik heb dat niet geverifieerd.

Gebruik:

• Zie dit document in .PDF-formaat. Het document staat ook in de downloadfile.
  Een link om de gratis PDF-reader te downloaden staat elders op deze bladzijde.

Downloaden:
 
Druk op de knop:  File: voorb202.zip, 175 374 bytes.

Opmerking:
 
De versie van de software is 16 februari 2008. Als je deze code downloadt als update voor een oudere versie, moet je alle bestaande login-codes opnieuw aanmaken!
De vorige versie is gedateerd op 29 november 2007.
 
In het item Over de sterkte van wachtwoorden vind je aanwijzingen voor het maken van goede wachtwoorden.  
Het is niet verkeerd om een pagina te beveiligen met een z.g. captcha. De aanpak wordt beschreven in het item Captcha in JavaScript.
 
Ik raad aan om de code in de files .protectedpage en .protectpages te comprimeren versleutelen met de methode die is beschreven in het item Over het comprimeren van JavaScript-code.