Web Client / Javascript Authentication 2

Link to the challenge: Javascript Authentication 2

This challenge will probably be similar to the first two, for which I wrote articles: Javascript Authentication and Javascript Source, so I invite you to read them to be familiar with the tools we used.

Let's start. The page contains a login button, let's try to press it and see what happen.
Ok, so it asks us for a login and password. Let's check the source code of the page (Ctrl+Shift+I on Google Chrome).
We find our login button, with an 'onclick' parameter, calling a Javascript function named 'connexion()'. Let's find it.
We check the head tag of the page. As in challenge one, we find a login.js script. Let's open it in our browser.
We found the 'connexion()' function. However, it seems a bit more complicated that the first challenge (which makes sense after all ^^).
Let's have a look at it.

 function connexion(){  
   var username = prompt("Username :", "");  
   var password = prompt("Password :", "");  
   var TheLists = ["CACHÉ:HIDDEN"];  
   for (i = 0; i < TheLists.length; i++)  
   {  
     if (TheLists[i].indexOf(username) == 0)  
     {  
       var TheSplit = TheLists[i].split(":");  
       var TheUsername = TheSplit[0];  
       var ThePassword = TheSplit[1];  
       if (username == TheUsername && password == ThePassword)  
       {  
         alert("Vous pouvez utiliser ce mot de passe pour valider ce challenge (en majuscule) / You can use this password to validate this challenge (uppercase)");  
       }  
     }  
     else  
     {  
       alert("Nope, you're a naughty hacker.")  
     }  
   }  
 }  

Ok, so the username and password are asked to the user by using the 'prompt' function and are saved in variables.

Then we have a variable called 'TheLists'. Not sure what it is yet. Let's keep going for now.

It calls 'indexOf' with the username we specified as a parameter.
Not sure what this function is. Let's ask Google.
According to w3schools [indexOf()] this function search for the string passed as parameter in the string that called the function. It returns the position it found it (or -1 if not found).

I originally thought that TheLists was a string, and that TheLists.length() was returning the number of characters in the string, and the characters were accessed with TheLists[i].
But I was wrong. TheLists is an array, with only one element, the string. So TheLists.length() actually return 1, and TheLists[i] return the complete string.

So the loop is only executed once, and TheLists[i] is the string. So what it does, in the end, not only it checks if the username we entered is contained in TheLists string, but it also checks that it is located at the beginning of the string (if indexOf returns 0, it means the parameter has been found at offset 0).

If you want to check that theory, you can go back to the login page, and when asked for a username, enter some of the first letters of the TheLists string (e.g. 'C','CA','CAC'), and a random password.
You shouldn't have an error message anymore because of the username you entered. It now matches the beginning of TheLists variable. Still, you don't have the winning message either.

To get it (and find the password), you now have to figure this part by yourself:

     var TheSplit = TheLists[i].split(":");   
     var TheUsername = TheSplit[0];   
     var ThePassword = TheSplit[1];   
     if (username == TheUsername && password == ThePassword)   
     {   
      alert("Vous pouvez utiliser ce mot de passe pour valider ce challenge (en majuscule) / You can use this password to validate this challenge (uppercase)");   
     }   

Just have a look at what the w3schools [split()] function does, and it should be easy.