Target    : LevelOne.htm
 
content   : The inevitable preface
                   Necessary tools
                   Some words about html
                   Short introduction to javscript
                   Reversing LevelOne.htm
 
 
 --------------------------------
The inevitable preface
--------------------------------

We are all here to learn javascript (js). When The Sandman and I met sometime ago in the dark backroom of a bar in Marseille, sharing a pastis or two, he had the thought that it would be a good idea to learn javascript via the reversing approach. so we started this project. All of this is written on the fly, nothing is prepared from the  long hand. Nobody knows, where our travel will lead us.

As study-objects we will take the small programs from The Sandman's JavaScript - challenge - Page. Our intention is 'to crack them black and blue' and gather new knowledge in this way. I know, that the first challenges are not very hard from the cracking-point-of-view, but this shall not be our problem at the moment. We wanna learn something, and why should we enter the JavaScript-stage via the hardest entry ?

Who am i ? Well, just an average programmer /  reverser , who knows - at the moment - a little bit more than you. So,  never NEVER forget : don't believe anything i say, it could be wrong (or maybe i am just testing your knowledge. :)

Because we are not in a classroom, we can not find out what every single one of you already knows and determine at  which level we will start. So I just make a despotic decision : we are gonna start at level 0. You should have read Sandman's theoretic tutorials about javascript. Don't worry, if you didn't understand everything - that's why we are here.
 

------------------------
Necessary Tools
-----------------------
 
 -  Editor
    choose what you like, even NotePad will do it.
    You don't really need some 'special'  JavaScript- or     HTML-Editor

-   Browser
    the browser has the built-in-feature to work himself through the code, HTML or JavaScript.
    Let`s talk about NetScape and Opera (if  you use M$-IE : get Opera :)
    (Don't forget : for Opera you should have at least V.3.50, V3.20 does not support javascript
    and java !)
 
-   A brand new note book
     to gather all your new knowledge and to make some side-remarks for later studies
 
-  Pencils
   a normal one (the grey version) and some colored ones
   (I use different colors for the functions, the FORMs, the INPUTs and the global variables.
   Marking these important  things will give you a much better understanding of the source, now
   and especially when you look at your printing later on)
 
 -  Javascript-references and tutorials
    there are a many on the web. Go on, make a search (via e-mail of course) and get all the
    references and tutorials with your e-mail. No need to surf the web if you know how to search.
    Don't ask me, which are the best tutorials, all have the pros and cons. I know, it's terrible in
    the starting time, so much stuff, and you don't know where to start. THIS time i am gonna help
    YOU (well I try it at least), the NEXT time - for another programming language - you will help
    me  (would be nice).
 
- Books
   All of the information is on the web, so no need to buy a book.
 
- a HTML-reference
  just to know which HTML-code you can delete to get a better overview
 

You see : javascripting is a cheap fun. No way for mr. money maker to earn something :)
 
       Q: are there any debuggers for js ?
        A : yes, there are 2
              1. your browser
              2.   brain2000 - highly recommended / get it from myhead.net freeware, but might
                   take some time to download ;)

Well, talking seriously : js-progs are not very    large, so you can use a piece of paper and a pencil to analyze and understand what is happening . So in reversing js you can make the 'dead-listing-approach'. Make an printing of the code, take your js-notebook and your pencils,  leave your sticky room and look for a nice place in the park. Maybe you're a lucky one and see some nice girls passing by. (Right!, this advice doesn't work at the moment, when you're living   at the coast and the storm is raging outside.)
 

------------------------------------------
SOME WORDS ABOUT HTML
------------------------------------------

JavaScript is, well let's say a part of HTML. Because all of the js-programs are running in a HTML-surroundings (for instance a web-page), you gotta have at least a rather small knowledge
about HTML. It's enough when you  know which part of the HTML-Code you may delete without
getting problems. You don't have to be a big HTML-buff, have a look in your HTML-reference, freshly gathered from the web via your e-mail and look at 'cosmetic'-section (You know : colors, underlined print and so on). Be careful in the beginning with your deletes, be sure you will get
the clue the longer you work on the javascript stuff.

You do *not* have to eliminate the HTML-code, but thinking of greater programs you could
get a better survey.
 

 ----------------------------------------------------------
 SHORT INTRODUCTION  TO JAVASCRIPT
 ---------------------------------------------------------

This will really be a short intro. You have gathered enough material from the  web (has your friendly  e-mail-service already delivered all the wanted stuff  ?). I'm just gonna try to put your eyes on some REALLY important things. Maybe  I can help to lighten up some dark.. There is good chance, that there is more  to explain. But as I said, this tutorial is coming out of nowhere without any  great preparation. But who cares. Let's try it the easy way first, later we can still try to go deeper. (and even come back to one of the former lessons)

JavaScript is a object-based language.  Should this bother you ? I fear : YES.  Sniffing around in your js-tutorials you have surely already remarked some  funny code like this :

x = document.password.pass.value

 Q:  Whow, why can't I  say : x = password ? - A : the object-based (in other  languages like C++ the  object orientated) way is trying to cut things short  and make the programmers life a little bit easier. The problem is, that in the  beginning this does not look very easy and it is a little bit harder to learn.

 You gotta take your time to understand this thing. I am not gonna give you  *here* a deeper look inside these mystics, but don't worry - if we meet some  funny code like the above I'm gonna try to explain (if necessary). For the  moment it should be enough that you know that this
a-point-b-point-something-mambo-jumbo is because of the object-based thing. I  have to admit, I am rather here glad to have chosen the title 'js-REVERSING for  absolute Beginners'. If you wish to program for yourself (hey, how's about  home-made crack-me's for The Sandman's site ? Would be great fun ! We are  waiting for your contributions), you have to step in a little bit further in  that stuff.

To make things a little bit easier (or more complicated for you, at least at the moment) : of course you can use variables and functions without using the object-approach. Think of it as something 'modern', but the old fashioned way still works.

Some words about this strange 'object base' :

Once upon a time when we were writing programs, we were using *variables* (the things to put
values in, like registers in assembler in some way) and *functions* (the routines to do the work).
This went for good, until some eggheads had the idea to put these 2 things together in an *object* and rename the variables to *properties* and the functions to *methods* (this is very simplified, I know - please have a look in your tutorials. But remember : you don't have to understand this whole thing now and at once - a little bit of knowledge will do it at the moment.)

I am gonna try to give you a real-life example :

In shop one you can buy a bottle of beer - that's the 'variable' (beer never seems to be a 'constant', always vanishing too fast). In shop two you buy an opener for your cool bottle of beer (you don't buy beer in cans, don't you ? Buy beer in bottles : better taste and well done for the earths resources) o.k., let's say someone has the great idea to sell a bottle of beer with an opener attached.

Hey, now you have an object ! The object is bottle_and_opener, the property is 'bottle' and the method is 'opener'.... DIG IT ?

You could go even one step further and fill the empty bottle with water (well, well : it's just an example !). So now, you have a NEW object : NEW-Filled-bottle_and_opener.

This should be enough for the moment with the object-based thing.

[A little clue for our 'x-'-variable standing lonely at the top : document   : is a built-in object, always there password   : search the code for FORM.

What's the name of the FORM ?? RIGHT !!  pass            :  search the code for INPUT. What's the name of your input?? RIGHT !! Got it ??]

Let me tell you just one *very* more point, then the work will begin :
 
 

Write this in big letters in your note-book !

So 'bottle_of_beer' is not the same as 'Bottle_of_beer'. Think of 'bottle:of_beer'  has green color, 'Bottle_of _beer' has brown color. A little difference, isn't it.
 

Enough grey theory, I'm getting thirsty and now it's really about time to have a look at our first target

**** STOP PRESS ****

One thing I should mention at this point : the TYPEs In javascript we have the following types :
Strings Number the Boolean-brothers : TRUE and FALSE NULL (aka nothing)

But now, lift the curtain :
 
 

You don't need very much knowledge about JavaScript to see, that the correct password is 'hard coded' in the program. If every JavaScript-Protection would be this way, we all could save a lot of time.  But it does not go this easy way all the time : the better protections are dealing for example with heavy maths. There will be no way to simply read the correct password, you have to understand every single line of the code.  So this is why  we are here. Let's begin with the simple things, it will get harder soon enough.
 

What you should do :
 
1. Get this page from the Sandman's site :)  Level1.html
2. Print it
3. Delete all the 'unnecessary' stuff (of course you should use a copy of LevelOne.Htm)
    Could be a good idea to uncomment the unnecessary stuff in your first approach. If your
     browser says 'no problems' , you can delete the out commented stuff.
 
 
Ready ? So, let's compare our arranged code. Here is mine :

// Cut here ------------------------------------------------------------

<SCRIPT language="Javascript">

function PassConfirm() {

var x=document.password.pass.value

if (x=="password") {

alert("YOU MAY PASS")

window.open("bingoone.htm","_self") }

else {

alert("THAT WASN'T IT")

window.open("errorone.htm","_self") }

</SCRIPT>

<CENTER><FORM name="password" method="post"></CENTER>

<CENTER><FONT FACE="Times New Roman"><FONT SIZE=+1>This is the first level,
its easy, all you have to do is type in the password.</FONT></FONT></CENTER>

<CENTER><FONT COLOR="#FF0000"><FONT SIZE=+4>Now Enter a Password</FONT></FONT></CENTER>

<CENTER><INPUT type="password" name="pass"></CENTER>

<CENTER><INPUT type="button" value="PUSH TO CONFIRM" onClick="return
PassConfirm()"></FORM></CENTER>
// I left the screen output untouched. Of course you could get rid of the colors too
 
//----- Cut here ---------------------------

(Correct, the comments outside the <Script language ..>-section are visible on the screen : I don't care)

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

Let us analyze the code. First of all, get the idea/knowledge what is happening here. Real easy
in this example : You have to do some input (the famous password), then function (only one in this code) gets called and your input will get tested.
 
(Please have a look in your reference about the 'onClick-stuff'. - To much to explain here !)
So we have :

1. INPUT  (a global variable named 'pass'  after having clicked the confirm-button
2. call function (with the name Passconfirm)
      put our input in a local variable named 'x'
       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 could be the time for your colored pencils : you can mark FORMs, functions, INPUT and variables in different colors. Hey, I know, in this small piece of  code this is rather silly. But we are here to train ourselves for greater tasks !
 
Do it now and compare with my version : (right, you can'T see my colors. Little bit difficult in a txt-file.)

// Cut here ------------------------------------------------------------
 
// Start of the JavaScript-Section
<SCRIPT language="Javascript">

function PassConfirm()                  // called to  test if user has the correct password
 {   // START of function PassConfirm
var x=document.password.pass.value

if (x=="password")
  {
    alert("YOU MAY PASS")
    window.open("bingoone.htm","_self")
   }
  else
    {
     alert("THAT WASN'T IT")
    window.open("errorone.htm","_self")
    }       // END if (x=='password')
  }        // END of fiunction

</SCRIPT>
// End of the JavaScript-Sction

// Beginning of the information on the screen

<CENTER><FORM name="password" method="post"></CENTER>

<CENTER><FONT FACE="Times New Roman"><FONT SIZE=+1>This is the first level,
its easy, all you have to do is type in the password.</FONT></FONT></CENTER>

<CENTER><FONT COLOR="#FF0000"><FONT SIZE=+4>Now Enter a Password</FONT></FONT></CENTER>

<CENTER><INPUT type="password" name="pass"></CENTER>
// End of Screen-Info
// Input your code please
<CENTER><INPUT type="button" value="PUSH TO CONFIRM" onClick="return
PassConfirm()"></FORM></CENTER>
// that's all
 

Already finished ? Your rather quick. O.k., next stage has to be stage 3 :

Let's analyze the js-programming code words. There will be rather a plenty homework for you. I think that your references will give you a better explanation than I can do, so I will give you just some short comments :

function : a function is a small program within the program, thinking of assembler language you could compare it with the famous CALL address.  A function can handle with  global and with local variables

What's that ? you ask. Well a global  variable is a variable, which is  declared outside any function. So any function  can use this variable (and its  value), a local variable is declared inside a function and lives only inside this function. Image a house with many doors. The main key is the global variable (unlock every door), the chamber key can only open the chamber's
  door. Got it ?
 
alert    : writes text on the screen. :)
very useful for 'debugging' .We will use this command in the next lessons
 

window   : One of the famous JavaScript-objects. Please study your reference.
 

the if-loop very important ! It works like a trigger, making the decisions. First it checks, if our password is the same as the hard coded passwords. Should this be true, then you have won and may enter the next page. Should this NOT be true, you have to handle with the second branch of the loop and you will reach the beggar-page.
 
To say it in plan english :
 
IF condition 1 is TRUE, THEN do plan_a
ELSE (our condition is FALSE) time for plan_b
 
The decision is in our example easy to do, because there are only 2 possibilities. But imagine, the program would compare every single char of your input - the loop would be a little bit longer. It could look this way :
 
 IF char_1 == first_letter_of_correct_password
  THEN IF char_2 == second_letter_of correct_password
     THEN .......
 
and so on. Could be a real good exercise for you. Why don't you give it a try. (and don't forget what to do if any of the chars is NOT the correct one : you can already leave the loop ) . GIVE IT A TRY ?

Waiting for your solutions ! Should it be to hard, put it aside, the day will come, when you mange such tasks on the fly.

the '=='
 
This is no product of shaky fingers, the 2 '=' are used for a compare.
 
If your code has the expression
 
x=2 then the variable x gets the value 2.
 
 BUT
 
if your code says
 
IF  x==2 .... then you are just testing the value of the variable x.
 
Speaking in plain english :  IF it is TRUE that x has the value of 2 then ...
 
Speaking again in assembler terms :

  CMP x, 2
  JE --> Beggar
  Code for Good Buyer

The opposite of '==' is the '!='. This tests, if something is NOT TRUE aka FALSE. You would say : If it is FALSE (aka NOT TRUE) that .........
.

THE END
 
I am rather happy to come to an end with this lesson. To know something is one cup of tea, to 'teach' something  another cup of tea. I hope I could help you a little bit. If you did not understand something, then feel free to ask. And don't forget : study your tutorials, read your references AND try to code. Writing small programs for yourself will probably bring you very far.

You get a feeling for the code.
 

ATTENTION ! BEWARE ! HOMEWORK !

Homework 1 :  change program to go always to the correct page
There are some possible solutions. One would be to change the variable x, the other would be to change some code in the else-branch of the function.

Homework 2 : Use inside the function the '!='  instead of the '==' and rewrite the program to reach the correct  page. Take the code as it looked before homework one and try to re-code the if-then-loop using the '!=' instead of the '==' as your point of decision

Homework 3 :  Rewrite the program, so that there is not a 'hard coded' compare but a compare for every single char. You could even try to use the ascii-codes of the correct password instead of the alphabetic value.
 
Homework 4 : prepare the 2nd password-crackme the same way we worked on levelone.htm
in this lesson. You know : eliminate some code, use your colored pencils, try to understand what happens in this code.
 
- any questions ? What are the differences to LevelOne ?
 
We will manage the second lesson much faster ! Watch out ! Coming soon !
 
In Lesson Two we will also have a deeper work with the funny '{' and the if-then-loop will get another time our attention.

Hope I see some of you in Lesson Two!