Making a page accessible only by password - html

What is the simplest way to make a page accessible by username/password? In school I learned to do this on the server side using sql and java. I'm wondering is there a way to do this only on the client side?
EDIT: lol... based on the responses, I probably should say why I specified client-side. I'm being asked to load an extra page into our company website that is supposed to aid some of our employees. I didn't design this extra page, and I was asked to put this up with a very simple log in. Granted I need to confirm with my superior that a client side login is ENOUGH, I just wanted to know if it could be done IF they decide that it's not all that important. The page itself won't have a link on the site, so unless someone knows it's there or decides to snoop, nobody will even know it's there.

You can save your page into a directory protected by .htaccess file.
That would be server side (you have to upload a .htaccess file into the directory).
But client side? Hmmmm the only thing I imagine is to create a DIV with position: fixed that would be over all your page content.
Ask for a user and a password, then check them using Javascript (this is client side), then you add property "display: none" to the DIV that is containing the login view.
That would hide the login view and show the page that is below it.
This is a HUGE security problem in my opinion. I could easily edit your web with Firebug and add Display: none to the div without entering a password.
However, as the password IS in the Javascript I could look at it anyway just viewing the source code.

The easiest is probably server side apache authentication. Use these two generators for that:
http://www.htaccesstools.com/htaccess-authentication/
http://www.htaccesstools.com/htpasswd-generator/
Just on the client side, using javascript it's never secure enough. But there is way:
if( ​prompt('Enter password'​)​ == 'password' )
{
// we are okay
}
else
{
// password is wrong
}​
For more robust example, with username see http://jsfiddle.net/7mZYQ/2/

Well you could try a basic JavaScript dummy with HTML inputs that would somehow offer the slight illusion of password protection. Otherwise, create an HTML form and go with PHP Sessions. These are probably the languages with the most tutorials around so it wouldn't take you that long to pull it off.

You cannot do this securely only on the client side, it would require you to perform authentication of the user inside the browser. This means your whole userbase would have to be loaded in the browser memory in some form, likely in javascript which makes it unsafe.
For a simple authentication mechanism which involves the server to a minimal extent look at Basic Authentication.

No, it cannot be done on the client side. At least not in a secure manner. Client side (password ) validation is very easy to bypass, because clues (such as the password and/or the content you want to show when the correct password is entered) are given to the user.

If you think about what "client-side" means, you'll understand why it wouldn't be possible. On the client side, all information is processed and all data is stored on the client's machine. Thus, in order to check passwords totally on the client side, you'd have to have the entire list of usernames passwords saved to every single computer that your site interacts with.
Keep in mind, also, that anything "client side" is inherently less secure than it would be server-side. So even if you could do this, it'd probably be a bad idea.
Now, that being said, here's how you could do it:
Come up with a password (note that you'll have to use a master password, not individual ones), hash the password, and store the hashed password in a variable, or something. It may sound insecure, but if you're hashing the pw, you could send everyone a personalized email with the password and it wouldn't make it any easier to hack. Hashing is a one-way operation. There is no way to reverse engineer it. Do make sure to make your stored password a constant, though, or someone could just change the value of their hashed password last minute to match your stored one. Give the css rule Display:none; to your data with css so that it hides. Now prompt the user for a password. Then, take that password and run it through the same encryption as you did when you created the password. If that value and the one you stored match, bingo. Just revert your display:none; and you're good to go.
Though I guess that still leaves the problem of somebody just firebugging your display:none away. Guess you'd have to encrypt the data on the page too.

Related

A website tells me my password is compromised, does this imply the website is also insecure?

I recently logged into a website (student run club website which stores event and participant information).
After successfully logging in the following message appears and follows me around for the rest of my time on the site:
You are using an insecure password. The password that you entered has
been exposed in at least one data breach.
How do you know my password is insecure? This password appears in a
database of known passwords. Hackers may use this password to try to
break into your accounts.
While I appreciate the notification that my password was compromised (and should know better and will change and stop reusing passwords etc etc) I now worry about the overall security of this site.
I don't know a terrible lot about web dev but my naive assumption, given this message and the fact that it appears after log in, is that my password must have been stored in plain text for them to be able to check it against a database. Is this correct? Or is there some clever secure way this could be done?
Just because you are receiving a notification from the site doesn't mean that your passwords are being stored in plaintext. Whatever website you are using can use your password in the "Have I Been Pwned" API before encrypting them. This of course doesn't necessarily mean that they are encrypting them as there isn't really a surefire way to know how they are storing your passwords without possibly contacting the owner or if you were to receive an email at a later date with your password in it.
You can read up on the API for password checking here haveibeenpwned.com/API or you can check for the website you are using in this list here haveibeenpwned.com/API/Consumers.

Modify a HTML5 page without a server side page

I have a editable html5 page and I store new elements in localStorage.
I want to synchronize my page with the server.
I want to know if I can do it without a server side script or if there is some tips to do something like this in a good way.
Thank you :)
You can pull information from the server quite easily using jQuery and then just put it on Local Storage but, if you want to upload local information to the server there is no way around, you have to use some kind of script, tough it's not that difficult, there are many languages (PHP, C#, Python...) and tools you can use.
Keep in mind that when you upload information to the server you have to sanitize it very important security measure.
Basically, the way to go is:
Post the information to the server (using AJAX or a HTML form, either way will do)
Use some server-side script to capture the variables posted.
Sanitize your data (check format, discard non-valid characters, etc)
Store it on database (Do not, ever, concatenate your data with a SQL query ok? that can make you vulnerable to a SQL injection attack), compute something or do stuff.
Return some status to the client (some confirmation maybe?)
You may want to take that confirmation and show a message to the user ("Your info was saved properly" or something like that)
is a javascript timer not sufficient for this manner? or jQuery?
The question really should be more of a problem than a question. If you're updating based on a server's variables then you could use AJAX i believe but if its like increment said variable every X seconds I would focus on using a javascript timer.

Login in to two websites at the same time

I've created 2 websites.
Both website have their own database, but there is a user table in both websites that has exactly the same values. What I want to do is make something that can take a user who logs in to website one and automatically log the same user in to website two as well.
Honesty I don't even know how to do it. I've tried to use extra page and login with session and javascript trick but most of the time its not working... especially in IE.
By the way i'm using classic ASP and SQL 2008.
Any ideas?
If you are using classic asp, I assume you are manually dropping an auth cookie that you check on each request?
If so just add this checking code to both sites. You may need to rip it out and put it in a class library that is accessible by both sites.
I am assuming they are on different domains.
On website1 you have a hidden form (possibly in an iframe) with an action pointed at the website2 login handler. If you are not the administrator of website2 then you may run into problems.
Related: http://en.wikipedia.org/wiki/Cross-site_request_forgery
What you're talking about is called Single Sign-On, and it's a well known problem. There are many ways to do it, but the simplest is to set a cookie when a user logs into either site, and to look for that cookie when a user visits either site. If the cookie is present, examine it to find the login name and any other details.
This method isn't ideal. You have to do a lot of extra work to secure (otherwise anybody could just write their own cookie and log in as whomever they want) and it won't work cross-domain (are both sites on the same domain?)
Presuming the credentials are exactly the same, couldn't you use site one's credentials to log into to site two, and visa versa?

Editable Form and save changes

I'm hoping this isn't harder than it seems.
I want to create an HTML form with a few text boxes that will allow people to enter in some data and I want these changes to be saved to the form.
For example, if my html page says:
Name: [ ]
...I want someone to be able to click on the [] and enter their name, etc. and click SAVE
and then have the form say:
Name: "Name of Person"
If someone wants to update that, they can click on the person's name and change it and click SAVE and have the HTML form update itself.
How can I do this? I've looked everywhere and people are talking about HTML5 AND PHP. Is it really that complicated to make a simple page like this?
(In case I wasn't clear in my html I'm using the contenteditable="true" option. How can I save those changes?)
I think your question indicates that you don't already know that web pages (including forms) are "stateless", meaning that they do not "automatically" hold or store anything that you do with them. Sorry to disappoint, but as a beginner you will struggle to find "an easy" solution to this.
That is not to say it can't be done - you no doubt see it everywhere - but your level of knowledge misses the fact that you need to actually program the logic to determine how your form will "appear" to store the information and reproduce it on a later visit.
Here's a (really) brief summary:
When your form is used by your user, a couple of things have already taken place before they get to see the form:
the user has requested the page (typing a URL or clicking a link)
the web server has sent the requested page (that is; your website has sent the form)
The next thing that takes place is that your user enters some data on the form. This data is not stored anywhere - if you refresh the page the data is gone, because steps 1 and 2 happen again.
So to avoid this you can use a number of tools:
Javascript: this operates on the user's computer. You can use it to find out if something has been entred on a form, and store it in, for example, a cookie.
Then you will have to build some logic into your page that says, "if my user refreshes the page or comes back to this site at a later date, then look for the cookie. If it exists, then take it's values and pre-fill the form, before the user gets to see it."
Server Side Script: This logic can be built into your web server (using a server side script like PHP) so it actually runs in step 2.
Alternatively you can build it into a javascript function which fires when the page is actually received by your user. This would be a step 3.
A second alternative combines these two ideas (processing on the user side and processing on the webserver side) called AJAX, which basically means that the "discussion" between your javascript and PHP takes place "on the fly" when the data is entered or changed.
And lastly you might want to consider PHP Sessions to store data, and/or a mySQL database. Recently with the advent of modern browsers you now have the possibility to store the information in a local database available to your user's browser...
In all of these cases you will need to learn how these pieces talk to each other, how you retreive the information, and how you update your stateless and static form.
It isn't has straightforward as you might think...
You don't need HTML5. HTML4 is good enough :)
But you need some server side script that saves the changes (on the server side in e.g. a DB or XML file). To make it a better experience (if multiple users use the form at the same time) I suggest you use AJAX to save the changes and poll the server for updates.
This is not complicated (at least I don't think it is), but it seems to be a generation ahead of what you already know. And it could take quite a long time to get the structure in place before you can do this sort of thing without needing help.
There are some basic questions
Does the information need to stay saved when the user hits reload?
Does the information need to stay saved when the user clears cookies?
If the information can be blanked out next time they come back to your page, then it is simple.
Otherwise, we need a way to keep track of which user sees what information, so the guy in Texas does not see the information the guy in Chinatown typed in. Cookies are a common way to do this. You could save the information to the cookies if there is not too much information.
Otherwise, you need sever-side language. This is usually in PHP, but deciding what language has to do with why you want to learn in the first place? Are you wanting to work for a company later on? Do you have your own website?
Please comment to let me know more what is going on, and what the answers are to the two basic questions, and I will better be able to answer.
Usually, for most cases, there is a login name and password (or OpenID), and if cookies are cleared, the user logs in again, but this requires some work to set up a working login before you re-visit this question of how to store what they type.

easy way to create a username / password login

I have built a website using html and css (in Dreamveaver CS4) on which I would like to create a section that is only accessible to registered users - users would have to submit their email address and create a password to access the area. I am prepared to take the time to learn with tutorials etc, but I'm a beginner with limited ability of html etc, so I would really appreciate some advice on what would be the easiest way of doing something like this - Drupal? JQuery? I have tried searching online for tutorials but I am getting hundreds of different answers using different solutions and would really appreciate your opinions on how to do this in the easiest possible way.
Many thanks in advance :)
Just pick a tutorial for a scripting language that your web hosting supports. PHP is pretty common: http://phpeasystep.com/phptu/6.html
I would suggest using server side scripting for your login.
For this you would need
A place to store user data
A script that can validate the user
data.
Use whatever scripting language your host supports for this.
You can either use a flat file (text file) to store user data by encrypting it in it or you can use a database (best)
You can write a small script that is called when the user logs in and sets the cookie in the browser
In the pages that only logged in users can view, you can add a small piece of code to verify from the cookie, if it validates, display the data or display something like Authorized users only.
This is a very basic functionality but if that is all you want, this should do it.
Well, you'd need a database on the server to store the username/password combinations. That means you'd need some server side language to interact with the database to check for valid username/password combinations, as well as using the server side language to know -when- to check for username/pw (e.g. which page(s) are password protected).
If you're on a Windows server, MS Access is generally considered to be a good starting point for database, but I'd recommend mySQL or SQL Server for the long run.
For language, there's a ton to choose from. ASP, PHP, ColdFusion, etc. I'm a ColdFusion person, so take this with the bias that implies , but I think CF is the easiest for a beginner to learn.