Lesson Two

JavaScript-Reversing For Absolute Beginners by The Seeker

Lesson 2 : On with the Basics

Target : LevelTu.htm

Happy to say : no preface this time ! Let's start immediately with the show

---------------------------------------
REVERSING LevelTu.Htm
--------------------------------------

Once again : you don't need very much knowledge about JavaScript to see, that to enter the next page you have to type as 'login' the word 'location' and as 'password' the word 'password'. Again a protection with 'hardcoded' passwords.

But our aim is to understand this little program.

STEP ONE is already known from lesson 1 :

What you should do :
1. get this page from the Sandman's site :)
2. print it
3. delete all the 'unnecessary' stuff (of course you should use a copy)

Ready ? So, let's compare our arranged code. Here is mine :

// Cut here ------------------------------------------------------------
<HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript">
<!----- Script CopyRight © 1996 - 1997 S.Chris Brown (Spikeman)
// This JavaScript code Originally by S.Chris Brown (Spikeman) 1996 - 1997

function Spikeman_password(form) {
if (form.ID.value=="location") {
    if (form.pass.value=="password") {
      location="tucong.htm"

} else {
      alert("Sorry " +form.ID.value+ ", wrong password.")
    }
} else {
    alert("Invalid Name")
location="ertu.htm"
}
}
//--> </SCRIPT>

<TR ALIGN=CENTER>
<TD>
<CENTER>
<H3>
<B><I>LOGIN</I></B></H3></CENTER>
</TD>

<TR ALIGN=CENTER>
<TD>
<CENTER>
<H3>
<B><I>PASSWORD</I></B></H3></CENTER>
</TD>
<TD><INPUT NAME="pass" type="password"></TD>
</TR>

</BODY>
</HTML>
-------------------------------------------------------

How's your code ? Almost looking the same - and still running in your browser ? Fine, let's continue with

STEP TWO :

Let us analyze the code. First of all, get the idea/knowledge what is happening here. Again rather easy in this example :

You have to do some inputs (the famous password), then a function (again only one in this code) gets called and your input will get tested.

So we have :
1. 2 INPUTs after having clicked the 'Proceed'-button
2. call function (with the name Spikeman_password)
         check input
         correct --> action 1      :)
         wrong ---> action 2    --> Beggar off   :(

Not very hard, isn't it.

At this stage, we can make some new remarks in our code. This is again the time for your colored pencils :mark FORMs, functions, INPUT and variables in different colors.
Do it now. No need to compare with my version, I think !

The FORM :

Have a good look at the FORM-stuff :
<FORM name="login">
The name of this form - there is only one form - is login.
For better understanding, try this :

function Spikeman_password(form) {

alert (document.login.ID.value) <---- HERE, copy this line in your code
<---- Understood ??

It's terrible to explain in words, it's horrible to explain on a piece of paper (especially when you are a non-native-english-speaker), but I think this example should turn the light in your head on !

THE INPUT :

Have another good look at the INPUT-stuff :
<INPUT NAME="ID">
<INPUT NAME="pass" type="password">
<INPUT TYPE="button" VALUE="Proceed" onClick="Spikeman_password(this.form)">

1. We input a variable with the name 'ID'
2. We input a variable with the name 'password'
with the code type="password" you make your input to be seen as "*"
3. We click on the proceed-button and our function "Spikeman_password" gets
called. This time (not as in LevelOne.Htm) we pass the WHOLE FORM to the function.

The meaning of "this" is : take the last used FORM (In this example we have got only ONE form, so you need which form will be taken)

IMPORTANT SIDE-COMMENT :

You will often see some code and think : "why did this funny coder coded this action in that way ? I would do this in another way." Well, maybe the coder is an absolute beginner or he is a real good programmer, you never know. There are many ways to make a program work.

So you could write instead of :

this line :

HEY DUDE, don't say yes and continue reading. Test it in your browser. Work around with this code as much as you can. This whole javascript-language is very userfriendly. In some other languages - for example C - it could happen, that wrong coding gives your pc a little break - not here. Work and collect experience !!

Ok, we are through with this thing.

Our second (and last) task will be to check and understand the function. One thing you can't surely miss are the many '{' and '}'. This tiny signs mark starting and ending points of loops and functions. It is a real BIG idea to put some reamrks to these little signs. When you have a look at your code some months later you will be happy that you have added these little remarks.

Try it, NOW. DON'T look at my solution, take your time and work on it. Maybe THE Sandman will put the solution on another WebPage. So if you really want to learn, then give it a try. Believe me, this is really important. If you are reversing a code with nested loops and you are confronted with more than twenty of these { and }, you have to understand which ones belong together.

ok., here is my solution :

Step by step, the way you *I* wade through the code :

STEP 1 :

function Spikeman_password(form)
{ // BEGIN function

} // END function

STEP 2 :

if (form.ID.value=="location")
    { // THEN BEGIN Big_Loop, branch one
//    ... start of nested loop, see you later
    } // END of Big_Loop, branch one

    else
    { // BEGIN Big_Loop, branch two
          alert("Invalid Name")
          location="ertu.htm"
     } // END Big_Loop

STEP 3 :

now 's the time for the nested loop :

if (form.pass.value=="password")
   { //THEN BEGIN Loop_2, this Loop will start ONLY if your ID is correct !!
        location="tucong.htm"
       } // END of Loop_2, IF-branch
else // BEGIN with 2nd branch : correct
{
           alert("Sorry " +form.ID.value+ ", wrong password.")
         } END Loop_2

So, to put things together :

-start with the function-'{'
-work the outside-loop
-work on the inner loops

(in greater programs I draw with my pencil 'bubbles' around the loops. - Helps alot, believe me !!)

THE END

PLEASE work on these loopy-things. It is IMPORTANT ! Could be a good idea, to collect small prorams from the web and try to work on theier loops. Take your time !!! They did't built Rome in one day, did they !

ATTENTION ! BEWARE ! HOMEWORK !

homework : prepare the 3nd password-crackme the same way we worked on LevelTu.Htm in this lesson. You know : eliminate some code, use your colored pencils, try to understand what happens in this code, work on the loops

We will manage the third lesson even much faster ! (Well, to be correct : Lev3.HTM shows nothing new). Maybe I will continue with 4thlev.HTM. - Don't know yet. Better prepare 4thLev.HTM too !

Watch out ! Coming soon !

Hope I see some of you in Lesson Three.