Using a JavaScript Prompt as a Password for a Small Website

Question

This is certainly not the safest method, but I just have html and javascript, so it's the best I can come up with. I built some example code to show how it should function, but it doesn't work!

The password should change everyday making it a little harder for people to guess them. The way the user will get the password will be by a html file sent through google docs and manually approve access to it. The javascript will be obfuscated multiple times on the file that shows the password. There will also be a password to view the password. I have messed around with this code for days and nothing...

window.onload = function() {
  chgDailyImg();
  document.getElementById('answer').innerHTML = imagearray[i]
}
var passwordInput = prompt("Please enter the password to continue...");
const imagearray = new Array();
imagearray[0] = "9G7DcwnWafg*EtMH";
imagearray[1] = "MDe^5qHTG#P9dHBm";
imagearray[2] = "h%$u@2Nfu8FL9H+R";
imagearray[3] = "X&NB5tYdUs5u@G#z";
imagearray[4] = "k#Rc3LGsCdu4q%qZ";
imagearray[5] = "!$p!Ss5BA%#4zeAa";
imagearray[6] = "qz63!tue3WCUxJ@R";
let i = 0;

function chgDailyImg() {
  let d = new Date();
  i = d.getDay();
}

if ((passwordInput, imagearray[i]) === true) {
  document.getElementById('hiddenContent').style.visibility = "visible"
  console.log("RIGHT")
} else {
  document.getElementById('hiddenContent').style.visibility = "hidden"
  console.log("WRONG")

}

<h1 id="hiddenContent" style="visiblity: hidden">Hidden Stuff That Requires Password To See!</h1>

Can't the user just bypass the whole security by inspecting the elements? It will make this whole scheme useless if the user knows a bit about the developer console. — kennysliding, Dec 14 '21 at 02:13
@burningalcyes the user technically could bypass it, but I'm not to worried about it since I'm not directly putting this javascript into the html document, instead im going to obfuscate it multiple times and source it in js/access.js. — w9j, Dec 14 '21 at 02:16

Chris Happy · Accepted Answer · 2021-12-14T23:13:31.023

You are not checking to see if passwordInput is in imagearray properly.

To check if the password is in the array:

use (imagearray.indexOf(passwordInput) !== -1)
or imagearray.includes(passwordInput) (a little less browser support)

^{See other ways of checking if an element is in an array}

window.onload = function() {
  chgDailyImg();
  document.getElementById('answer').innerHTML = imagearray[i]
}
var passwordInput = prompt("Please enter the password to continue...").trim();
const imagearray = new Array();
imagearray[0] = "9G7DcwnWafg*EtMH";
imagearray[1] = "MDe^5qHTG#P9dHBm";
imagearray[2] = "h%$u@2Nfu8FL9H+R";
imagearray[3] = "X&NB5tYdUs5u@G#z";
imagearray[4] = "k#Rc3LGsCdu4q%qZ";
imagearray[5] = "!$p!Ss5BA%#4zeAa";
imagearray[6] = "qz63!tue3WCUxJ@R";
let i = 0;

function chgDailyImg() {
  let d = new Date();
  i = d.getDay();
}

if (imagearray.indexOf(passwordInput) !== -1) {
  document.getElementById('hiddenContent').style.visibility = "visible"
  console.log("RIGHT")
} else {
  document.getElementById('hiddenContent').style.visibility = "hidden"
  console.log("WRONG")

}

<h1 id="hiddenContent" style="visiblity: hidden">Hidden Stuff That Requires Password To See!</h1>

<div id="answer"></div>

Thanks, I'll definitely learn more about indexOf and use it! — w9j, Dec 14 '21 at 02:31
An alternative to `indexOf` would be [`includes`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes). — idfurw, Dec 14 '21 at 02:41

score 0 · Answer 2 · answered Dec 14 '21 at 22:14

After doing more research on indexOf, I determined that wasn't what I required. I utilized Chris Happy's code to create this working code.

<h1 id="hiddenContent" style="visiblity: ">Hidden Stuff That Requires Password To See!</h1>

<div id="answer"></div>

<script type="text/javascript">
  window.onload = function() {
    chgDailyImg();
    validate();
    document.getElementById('answer').innerHTML = imagearray[b]

  }
  var passwordInput = prompt("Please enter the password to continue...");
  const imagearray = new Array();
  imagearray[0] = "9G7DcwnWafg*EtMH";
  imagearray[1] = "MDe^5qHTG#P9dHBm";
  imagearray[2] = "h%$u@2Nfu8FL9H+R";
  imagearray[3] = "X&NB5tYdUs5u@G#z";
  imagearray[4] = "k#Rc3LGsCdu4q%qZ";
  imagearray[5] = "!$p!Ss5BA%#4zeAa";
  imagearray[6] = "qz63!tue3WCUxJ@R";
  let b = 0;

  function chgDailyImg() {
    let d = new Date(); /*** create a date object for use ***/
    b = d.getDay();
  }

  function validate() {
    if (passwordInput == imagearray[b]) {
      console.log("RIGHT")
      document.getElementById('hiddenContent').style.visibility = "visible"
    } else {
      document.getElementById('hiddenContent').style.visibility = "hidden"
      console.log("WRONG")
    }
  }

</script>

My understanding of this code is that when passwordInput equals imagearray[b] ([b] is equal to 0 until chgDailyImg() runs on the page load then [b] is equal to the number of the day of the week) it will show hiddenContent. Upon window.onload, the prompt checks if the supplied password is equal to imagearray[b] (today's password) by using function validate() if (passwordInput == imagearray[b]) console.log("RIGHT"), and then the function validate() will be declared on loading the page.

The answer to my original inquiry was far simpler than I had expected. I only started studying JavaScript a month ago, and the question I posed sounded hard at the time, but now that I know how prompts operate, I have a better understanding.

Using a JavaScript Prompt as a Password for a Small Website

2 Answers2