JavaScript is very handy at making forms, allowing for much more customization and easier ways to send data. So making Login forms using JavaScript may seem to many to be a very feasable idea. However, JavaScript is very bad at protecting Passwords, as since the passwords are not encypted and the whole JavaScript code is in the page, a person could just view the Page Source and find out everything. Even if you use an external JavaScript, it would still be poor as the file name for the external JavaScript would still be revealed.

But I have an answer! There is a relatively easy way to make a moderately-secure password system using JavaScript. And here's the trick: you don't use a password at all!

First, make a webpage with the following content:

This page will work as the Login Page.

Now, rename the file you wish to protect so that the bit BEFORE the extension is the same as the password you want to use. To prevent people seeing this file, you should disable indexing for the folder it is in.

Now edit the login page again, and in the HEAD tag of the page, add this:


If the file you are protecting uses an extension other than .html, change the ".html" bit to match the extension.

This script directs people to the protected file if the password matches, because it uses the entered password as a redirect to the file. So if the password does not match, the users will either be directed to a non-existant file (Error 404), or a completely different file from the one they wanted to get! This method is only "moderately secure", though, because the actual file is not protected and can still be accessed if someone knows the file's name. So you shouldn't use it for high-security files, but if you just want to keep out the general public, this is a good, simple solution.

Oh, and just a disclaimer. Some HTML Help websites appear to be distributing scripts similar to my one. While they follow the same principle as my own, they are in no way a basis for my code. This whole tutorial is completely, 100%, my own writing, and any similarities are purely coincidential.

I would have to disagree that javascript is great at making forms, yeah they can produce some nice little features, but once you get into PHP coding a form in javascript seems 10 years ago. I was thinking though why wouldn't you just code so you can password protect the fold through the hosting admin panel. I know trap17 cpanel has a folder protection process and so if you code the script to follow that password then it saves you the time of trying to hardcode the group of files within that folder. Of course, I think with a bit of tweaking with javascript and php password protection scripting you might be able to add a second layer of protection

Hey! I remember this method! It's pretty ingenious, but rather vulnerable to man-in-the-middle attacks. And packet sniffing will find that plaintext out in a second. I'd rate it pretty good - assuming you have no malignant character with knowledge of network security. What's the chances of tha- oh wait...

Php does help, but again, man-in-the-middle attacks. I'm pretty sure trap uses ssl. (you know, the https:// stuff). Which itself uses SHA-1 at least if I remember right. Personally, I'd go with SHA-512 cause a break in 2^39 attempts isn't that fun, but we can't be picky with programs developed for us...

(edit: ssl, not ssh. duh...)

Yes, obviously if you do have any knowledge of PhP or you are using a Hosting Platform with SSL Password Protection (which Trap17 does), you should use these to secure your files instead of the method I mentioned above, as they are much more secure. This tutorial is really meant as a simple alternative for people who are not expirienced with PhP and do not have any other method of Password Protection for their site's content.

And Saint, while you may be right that Javascript's abilities pale in comparision to PhP, that doesn't mean Javascript is an old-skool coding platform. Actually, if you know how to use Javascript cleverly enough, you can use it with PhP to make some awesome scripts. Just look at some of the popular forum software on the web today...

OK first of all javascript shouldn't be used for such purposes like forms and security in general because javascript is not secured at all. And this is the main reason why would I discard it as language of choice for such things. So what is the point. It is very simple javascript is being executed on your clients browser and because of that there have beeen developed many different mathods for obtaining or changing javascript on the page.

Javascript should be used only for sending informations back and forth that is I mean on AjAX(asynchronus javascript and XML) and you should use it to make some nice things to your web page like changing on the page in the real time that is without reloading every single part of the page. Like hover overs and mouse clicks when there is no need to send informations to the server and back. You can even use it to send informations back and forth to the server. But don't use it for any security jobs and for gods sake any inputs. But nontheless when you are programming some portal you should be able to check all the data inserted trough the page.

Also consider that php is server executed language and you have more control over it that is the main reason why it should be used against javascript not that one or the other are old fashioned or something like that. But the thing is that you have to have control over what your users are inputting and check all the data this is the main reason. And in the end I would like to mention that both languages have its good and bad things.

I think that all your arguments boil down to one simple fact: JavaScript has its advantages, and also its disadvantages; but if you know another language (like PhP) well enough, you should always go for that language instead, as it's always the better option.

I'm not going to defend the merit of JavaScript any longer. The only two reasons I posted this tutorial were: 1. To share my knowledge, 2. To give people who know nothing about security a simple option to keep them going until they learn how to use the proper stuff. As such, I don't want any more arguments about how insecure JavaScript is for this purpose.

And Osknockout is right - SSL is some of the best protection you can get.

Great Tutorial,

I did this before, Then it came to the stage of an Epic fail because it would accept any password,

But this works brill.

Thanks.

Javascript can give errors on your sites I think. SM helped me with that when I had a problem when using <applet> codes. When I removed them all my site was fine but of course that was before my forum had been installed. I'd like to learn how to create web based control panels with Javascript, Microsoft Visual Studio .NET 7.1 Generator, and Visual Basic .NET 7.1. That'd be awesome!

-Sky

Heh, that's a pretty sneaky way of doing it. As said, though, PHP would be a better way to go. When the topic said a secure password system I thought you were talking about logging into like a website and I was going to say "Yeah? doesn't everyone use JavaScript to make it secure?"

A better way to show that code would be to explain which fragment does what when uploaded to web , but it's still useful anyhow

A problem with this, is in some cases, the file will be indexed by a search engine, if your site is indexed.
JavaScript will never be good at password protection, but this is one of the most secure methods I have seen.
I tried making a system like this, but added a few extra security features like:
I Added some extra numbers and letters and ran some mathematics function on the password input, before the redirect was performed so a password like
"password" would be checked as "2386hjghfqbttxpsesgf76" (this way, when the URL is displayed in the browser window, the password cannot be seen. I used a frame set on that part of the site, so you would have to look at the source code to see the URL of the logged in part.
I also checked the referrer, of the page with javascript, so that if the page had been linked to, or typed into to URL field in a browser, the user would be redirected to the login page, and asked to log in.

This isnMake A Moderately-secure Password System Using Javascript

hey, yeah I'm one of those newbs you designed this thing for. I need to implement this in my site for a homework assignment and I copied it just the way that you have it up there. Aaaaaaaand . . . It doesn't work.:..(

The only two things that I added was a background image and a link back to the previous page (in case the person typing the password gave up).

Those two things couldn't possibly have any effect on the form, could they?If you could help, that would be great.-

Osman Sufi

The quickest way to get a password protection system up and running is to use a Prompt box in JavaScript that has a title like "Enter your Email Address". Only you and the relevant users know what the password should be, could even be one each, that can be sorted out at the next page ...more

Hey All, I'm stuck! I am trying to use PHP variables accessed from an external file in javascript code. I can set the array from the external file. I can get PHP variables to javascript. I can get PHP array variables to javascript. Something goes wrong when ...more

News I think you all heart about Google's hacking , some people believed it , some didn't , but now we heart from Nytimes that hackers have taken control of a password system that contr ...more