How to create a password protected website?

Question

I am in the middle of creating my website and I need to create password protected JavaScript code to access it.

Do I need to change my CSS as well, or it will be only in my HTML code?

Just out of curiosity, why not in some server-side language? JS protected site is a low protection site. — Roko C. Buljan, Dec 28 '13 at 08:47
Search for `.htaccess password protection`. I don't know what you want with javascript. — kleinfreund, Dec 28 '13 at 08:48
Possible duplicate of : http://stackoverflow.com/questions/18328637/javascript-sign-on-basic-knowledge/18328818#18328818 — Moduo, Dec 28 '13 at 08:59
You can use any third party BaaS provider for authenticate your javascript code like http://api.shephertz.com/app42-docs/user-management-service/#authenticate — Shashank Shukla, Dec 28 '13 at 09:03
related: https://stackoverflow.com/questions/549/the-definitive-guide-to-form-based-website-authentication — exchange, Jun 10 '19 at 21:49

score 5 · Answer 1 · edited Dec 28 '13 at 09:22

5

It's impossible to have any kind of meaningful password protection using pure JS since the client can just change the code of your page to skip the password protection entirely. You'll need to either use HTTP basic access authentication or use some kind of server-side scripting language.

edited Dec 28 '13 at 09:22

Roko C. Buljan

196,159
39
305
313

answered Dec 28 '13 at 08:53

Venge

2,417
16
21

Roko C. Buljan · Accepted Answer · 2017-01-15T17:39:36.017

5

Front-end JS is a bad protection

// IMPORTANT: This is a JS-for-fun - and a BAD example how to secure your content:
var password = "demo"; // because ANYONE CAN SEE THIS IN VIEW SOURCE!


// Repeatedly prompt for user password until success:
(function promptPass() {

  var psw = prompt("Enter your Password");

  while (psw !== password) {
    alert("Incorrect Password");
    return promptPass();
  }

}());


alert('WELCOME');
// or show you page content

To properly protect your page:
a secured connection with your server, and a server-side language is the way to go.

edited Jan 15 '17 at 17:39

answered Dec 28 '13 at 08:53

Roko C. Buljan

196,159
39
305
313

3

Client-side javascript isn't "bad protection", it isn't protection at all. – cwharris Dec 28 '13 at 09:01
4

@ChristopherHarris - have you considered adding your own answer to this instead of just editing everyone else's? – Krease Dec 28 '13 at 09:12

score 1 · Answer 3 · edited Dec 28 '13 at 09:22

1

You can not use javascript or css to create Password Protected website.

You have to use server-side scripting like php, asp.net, jsp or user htaccess password protection

edited Dec 28 '13 at 09:22

Roko C. Buljan

196,159
39
305
313

answered Dec 28 '13 at 08:50

Sunny

119
2
18

score 0 · Answer 4 · edited Jan 31 '21 at 10:15

You can just put all this in an echo statement in php to just hide the code

The html

    <!DOCTYPE html>
    <html>
    <body>
    
    <p>Click the radio button to toggle between password visibility:</p>
    
    Password: 
    <input type='text' value='' id='myInput'><br><br>
    <input type='checkbox' onclick='myFunction()'>Show results
    
    <p id='demo' style='display:none; color: black;'>demo</p>

And now the javascript it is quite simple

    <script>
    function myFunction() {
      var x = document.getElementById('myInput');
      var y = document.getElementById('demo');
      if (x.value === '45') {
        y.style.display = 'block';
      } else {
        y.style.display = 'none';
      }
    }
    </script>

and close the html

    </body>
    </html>

done that's it just try it and enter the password 45

How to create a password protected website?

4 Answers4