Wednesday, August 31, 2016

Web Client / Javascript Authentication

Link to the challenge: Javascript Authentication

Okay, so let's start the Web Client category. The first challenge seems to be about Javascript.
The challenge open a web page, that asks for a login and password.
First I tried something random, just to see what happen.
I got a pop-up alert that tells me this is the wrong password, as excepted.
However, when you know a bit about Javascript, you quickly notice that this is probably a pop-up called by the function 'alert()' in Javascript, that is used to display messages. But you don't need to know that to succeed, it just confirms what we excepted, it uses Javascript to authenticate the user.

Let's see the code of this page. I use Google Chrome and I HIGHLY recommend it for all the web stuff we will do. The developer console is REALLY useful. You can do it with Mozilla or IE, by downloading the page and opening it with a text editor, but it's much faster with Google Chrome.
When you're on the login page, just press Ctrl+Shift+I (or go to the icon on the top right of chrome, then select More Tools -> Developer Tools).
On the left, you can see your page, and on the right, the source code of the page:

By hovering the mouse on the different HTML elements on the right panel, you can see which element it corresponds to on the page (on the left panel).
We notice that our login form is wrapped on a fieldset tags. Let's expand it.
Here we find our form tags, let's expand it too.
It's a pretty standard form, except for the login button:
 <input onclick="Login()" type="button" value="login" name="button">  
We can see that it calls a 'Login()' function when clicked.
As we don't have anything else after this on the page, we can assume that the authentication happens in the 'Login()' function.

Our goal now is to find it, and see what it contains.
It seems like a custom Javascript function. To get custom functions in Javascript, you need to define them in a javascript file (.js) and link it to your HTML/Php page.
The linking part is done in the head of the page. Let's have a look at it.
I go back to Google Chrome and expand the head tag. This is what I find:

 <script type="text/javascript" src="login.js"></script>  
This code links a javascript file called 'login.js' to this page. Seems promising. We now need to see what is in this file.
As there is no path in front of the file name, we can assume that the script 'login.js' is probably at the same location on the server as the HTML page.
You now have to find a way to display the 'login.js' file in your web browser, and see what it says. The solution is really close.

Let me know if you have trouble finishing this challenge.
See you soon for another challenge

No comments:

Post a Comment