JavaScript Puzzlers!

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

JavaScript Puzzlers: Puzzles to Make You Think (and write fewer bugs)Charles Bihis | Computer Scientist

1


Who am I?

Charles Bihis Computer Scientist Adobe Identity Team

Blog: blogs.adobe.com/charles Twitter: @charlesbihis GitHub: github.com/charlesbihis

2


What can I expect?

What are we going to talk about? Puzzlers!

Maximus the Confused! Block Party! Let’s Print Some ZIP-Codes! Loopty Loop! Why Are We Bankrupt?! A Case of Mistaken Identity

Will deal with only pure JavaScript (i.e. no libraries!)

3

What are we NOT going to talk about? 3rd- party libraries or frameworks

e.g. jQuery, Node.js, etc.

Bugs


What is a Puzzler?

A Puzzler is a very simple programming puzzle that demonstrates or exploits weird behaviours and quirky edge-cases of a given

programming language.

4


How does this work?

1. Code – I introduce the code.

2. Question – I pose a multiple-choice question and you guess what the answer is…think hard!

3. Walkthrough – I walk through a reasonable explanation.

4. Answer – I tell you the real answer.

5. Moral – How can you avoid making mistakes like this in your own code. 5


Let’s start!

6


JavaScript Puzzler – Maximus the Confused!

7

var commodusRule = 'thumbsUp';alert('Maximus the ' + (commodusRule === 'thumbsUp') ? 'Gladiator' : 'Merciful');

What does this print?

a)Maximus the Gladiator

b)Maximus the Merciful

c)Error

d) It varies

e)None of the above

prints only "Gladiator"


But why?

Order of operations dictates that the binary “+” operator takes precedence over the conditional “?” operator.

8

*Reference: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Operator_Precedence

'Maximus the ' + (commodusRule === 'thumbsUp') ? 'Gladiator' : 'Merciful';

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Operator_Precedence



But why?


9


'Maximus the true' ? 'Gladiator' : 'Merciful';




But why?


10


'Gladiator';




But why?


According to the MDN (Mozilla Developer Network), the binary “+” operator has a precedence of 6 while the conditional “?” operator has a precedence of 15.

Note: This is below MOST commonly used operators (i.e. “*”, “/”, “%”, “<“, “>>” “!=”, “===“, etc).

11


'Gladiator';




JavaScript Puzzler – Maximus the Confused…FIXED!

12

var commodusRule = 'thumbsUp';alert('Maximus the ' + (commodusRule === 'thumbsUp') ? 'Gladiator' : 'Merciful');


JavaScript Puzzler – Maximus the Confused…FIXED!

13

var commodusRule = 'thumbsUp';alert('Maximus the ' + (commodusRule === 'thumbsUp' ? 'Gladiator' : 'Merciful'));


Moral

Be aware of order-of-operations!

Be explicit and place parenthesis accordingly to ensure correct and predictable order of execution.

14


JavaScript Puzzler – Block Party!

// global var

var name = "World!";

(function() {

// check if "name" defined

if (typeof name === "undefined") {

// local "shadow" var

var name = "Mr. Bond.";

alert("Goodbye, " + name);

} else {

alert("Hello, " + name);

}

})();

15


a) “Hello, World!”

b) “Goodbye, Mr. Bond.”

c) “Hello, ”

d) “Hello, undefined”

e) Error

f) It varies

g) None of the above


But why?

1. No block scope!

2. “Hoisting”

16

for (var i = 0; i < MAX; i++){

// do something}alert(i); // Note: "i" exists here!

alert(i);for (var i = 0; i < MAX; i++){

// do something}

// Note: "i" exists here too!


But why?

1. No block scope!

2. “Hoisting”

17

for (var i = 0; i < MAX; i++){

// do something}alert(i); // Note: "i" exists here!

var i;alert(i); // Note: "i" exists here too!for (i = 0; i < MAX; i++){

// do something}


JavaScript Puzzler – Block Party…FIXED!

// global var


(function() {






} else {


}

})();

18



// global var


(function() {

var name;




name = "Mr. Bond.";


} else {


}

})();19

// declaration hoisted here

// assignment remains here



// global var


(function() {





} else {


}

})();

20


Moral

There is no block-level scoping in JavaScript

Declare ALL of your variables at the top of your function

21



a) 93021192034132959

b) 93021239220341816332959

c) 930212034132959

d) Error

e) It varies

f) None of the above

JavaScript Puzzler – Let’s Print Some ZIP Codes!

22

// array of 5 valid zip-codesvar zipCodes = new Array("93021",

"02392", "20341", "08163", "32959");

// let's do something with each zip-code// for now, display themfor (var i = 0; i < zipCodes.length; i++) {

// sanity checkif (!isNaN(parseInt(zipCodes[i])) &&

parseInt(zipCodes[i]) > 0) {alert(parseInt(zipCodes[i]));

}

}

Firefox

Chrome


But why?

Syntax

When you omit the optional “radix” parameter, the following behavior takes place: If the input string begins with “0x” or “0X”, radix of 16 is used (i.e. hexadecimal) If the input string begins with “0”, radix 8 is used (i.e. octal) OR radix 10 is used (i.e.

decimal) If the input string begins with any other values, radix 10 is used (i.e. decimal)

Particularly when dealing with string values with leading 0’s, Mozilla had this to say…

23

var num = parseInt(string, radix); // "radix" is optional

Exactly which radix is chosen is implementation-dependent. For this reason ALWAYS SPECIFY A RADIX WHEN USING parseInt.

*Reference: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt




But why?

Another important note about the parseInt() API…

A closer look…

24

// behaviour in Firefox v20.0parseInt("93021") = 93021 // displaysparseInt("02392") = (2 * 8) + (3 * 1) = 19// displaysparseInt("20341") = 20341 // displaysparseInt("08163") = 0 // does NOT displayparseInt("32959") = 32959 // displays

*Reference: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt

If parseInt encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point.





JavaScript Puzzler – Let’s Print Some ZIP Codes…FIXED!

25


"02392", "20341", "08163", "32959");


// sanity checkif (!isNaN(parseInt(zipCodes[i])) &&

parseInt(zipCodes[i]) > 0) {alert(parseInt(zipCodes[i]));

}

}


JavaScript Puzzler – Let’s Print Some ZIP Codes…FIXED!

26


"02392", "20341", "08163", "32959");


// sanity checkif (!isNaN(parseInt(zipCodes[i], 10)) && // radix value added

parseInt(zipCodes[i], 10) > 0) { // here tooalert(parseInt(zipCodes[i], 10)); // and here too

}

}


Moral

parseInt() takes an optional radix parameter.

Omitting this optional parameter will cause unpredictable behavior across browsers.

Be explicit and ALWAYS include the radix parameter.

27


JavaScript Puzzler – Loopty Loop!

28

var END = 9007199254740992;var START = END - 100;

var count = 0;for (var i = START; i <= END; i++) {

count++;}alert(count);

// Math.pow(2, 53) What does this print?

a) 0

b) 100

c) 101

d) Error

e) It varies

f) None of the above

enters infinite loop


But why?

9007199254740992 is a special number. Particularly, it is 2^53.

Why is this special?

First, we need to know something about how JavaScript represents numbers.

29

*Reference: http://ecma262-5.com/ELS5_HTML.htm#Section_8.5

http://ecma262-5.com/ELS5_HTML.htm#Section_8.5



But why?

JavaScript numbers abide by the IEEE Standard for Floating-Point Arithmetic (IEEE 754).

As such, all numbers in JavaScript are represented by double-precision 64-bit floating point values…

In binary…

30


1.2345 = 12345 10x -4

mantissa

exponent

1 11...111 11111111111...111

63 62 53 52 0

exponent mantissasign




But why?

2^53 is the largest exact integral value that can be represented in JavaScript!

From the ECMA specification…

What does this mean?

31


Note that all the positive and negative integers whose magnitude is no greater than 2^53 are representable in the Number type.

var numA = Math.pow(2, 53);var numB = numA + 1;alert(numA === numB); // true!




JavaScript Puzzler – Loopty Loop…FIXED!

32

var END = 9007199254740992; // Math.pow(2, 53)var START = END - 100;




JavaScript Puzzler – Loopty Loop…FIXED!

33

var START = 0;var END = 100;




Moral

Be aware of your number representations and number ranges!

There are REAL limitations imposed by your computer. When dealing with large (or important) numbers, know them!

34


JavaScript Puzzler – Why Are We Bankrupt?!

35


a) 0

b) 0.2

c) 0.20

d) None of the above

var costOfCandy = 0.60; // 60 cents

function calculateChange(cost, paid) {return paid - cost;

}

// pay for candy with 80 centsalert(calculateChange(costOfCandy, 0.80));

0.20000000000000007


But why?

As we learned from the previous Puzzler, all JavaScript numbers use the IEEE 754 floating-point arithmetic specification.

Because of this, values are not represented exactly, but rather as a fraction.

Some non-integer values simply CANNOT be expressed exactly in this way. They must be approximated.

36

Example:123.45 = 12345 * 10^-2 // exact1 / 3 = 0.333333333333333 * 10^0 // approximation!


JavaScript Puzzler – Why Are We Bankrupt?!...FIXED!

37

var costOfCandy = 0.60; // 60 cents


}

// pay for candy with 80 centsalert(calculateChange(costOfCandy, 0.80));


JavaScript Puzzler – Why Are We Bankrupt?!...FIXED!

38

var costOfCandy = 60; // 60 cents


}

// pay for candy with 80 centsalert(calculateChange(costOfCandy, 80));

// Use only integer math when dealing with money! To do this,// represent your money in terms of cents to begin with!//// e.g. use 1599 instead of 15.99 to represent $15.99


Moral

Floating-point arithmetic can be inaccurate when representing fractions.

When dealing with money, deal in terms of cents! This makes all of your calculations integer-calculations, which are exact!

BUT, not completely exact, though…

Remember from our last Puzzler, it is exact only up until the largest representable integer value… 9007199254740992 (i.e. 2^53)

So, as long as you are dealing with less than $9 quintillion, you’re fine using integer arithmetic in JavaScript :)

39

*Reference: http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html

http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html

http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html


JavaScript Puzzler – A Case of Mistaken Identity!

function showCase(value) {

switch(value) {

case "A":

alert("Case A was selected.");

break;

case "B":

alert("Case B here!");

break;

case "C":

alert("This is Case C.");

break;

default:

alert("Don't know what happened.");

break;

}

}

showCase(new String("A"));

40


a) Case A was selected.

b) Case B here!

c) This is Case C.

d) Don’t know what happened.

e) Error

f) It varies

g) None of the above


But why?

The switch statement in JavaScript internally uses the strict equality operator (i.e. ===) as opposed to the non-strict equality operator (i.e. ==).

The strict equality operator behaves exactly as the non-strict version, except that no type-conversions are done.

So, when the switch statement evaluates equality, it checks that the following are true… Their types are equal Their uncast values are equal

Notice, we invoked showCase() with a new String object.

41

alert(typeof "A"); // "string"alert(typeof new String("A")); // "object"


JavaScript Puzzler – A Case of Mistaken Identity…FIXED!


switch(value) {

case "A":


break;

case "B":


break;

case "C":


break;

default:


break;

}

}

showCase(new String("A"));

42


JavaScript Puzzler – A Case of Mistaken Identity…FIXED!


switch(value) {

case "A":


break;

case "B":


break;

case "C":


break;

default:


break;

}

}

showCase("A");

43


Moral

Get used to using the strict equality operator when possible. It will make you more aware of type conversions and true equalities.

From Douglas Crockford’s book “JavaScript: The Good Parts”…

44

JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=. The good ones work the way you would expect. The evil twins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values, the rules by which they do that are complicated and unmemorable.


That’s it!

Questions?

45


Thanks for coming!

Charles Bihis Computer Scientist Adobe Identity Team

Blog: blogs.adobe.com/charles Twitter: @charlesbihis GitHub: github.com/charlesbihis

46



JavaScript Puzzler – That’s Odd!

(function(){

var values = [7, 4, '13', Infinity, -9];

for (var i = 0; i < values.length; i++) {

if (isOdd(values[i])) {

alert(values[i]);

}

}

})();

function isOdd(num) {

return num % 2 == 1;

}

48


a) 7, 13

b) 7, 13, Infinity, -9

c) 7, -9

d) 7, 13, -9


But why?

Let’s take a closer look…

49

7 % 2 = 1 // displays4 % 2 = 0 // does NOT display13 % 2 = 1 // displaysInfinity % 2 = NaN // does NOT display-9 % 2 = -1 // does NOT display


But why?

-9 % 2 = -1? Really?

JavaScript shares the same behavior as the Java implementation of the modulus (%) operator. That is, it must satisfy the following identity function for all integer values a and non-zero integer values b.

A side-implication of this behavior is that the result will have the same sign as the left operand!

50

(a / b) * b + (a % b) == a


JavaScript Puzzler – That’s Odd…FIXED!

(function(){




alert(values[i]);

}

}

})();


return num % 2 == 1;

}

51


JavaScript Puzzler – That’s Odd…FIXED!

(function(){




alert(values[i]);

}

}

})();


return num % 2 != 0;

}

52


Moral

Be careful about the signs of operands when using the modulus operator.

53


JavaScript Puzzler – Say What?!

54


a) alert("BOOM!“);

b) Hello, </script><script>alert("BOOM!");</script>

c) BOOM!

d) Error

function sayHello(name) {alert('Hello, ' + name);

}

sayHello('</script><script>alert("BOOM!");</script>');


But why?

Let’s take a look at the code again…

55

function sayHello(name) {alert('Hello, ' + name);

}

sayHello('</script><script>alert("BOOM!");</script>');


But why?


When a browser renders a page, first the HTML parser will parse the page and tokenize out all of the tags.

Only after this is done, will it then allow the JavaScript parser to tokenize and execute whatever tokens the HTML parser believes are JavaScript scripts!

56

<script>function sayHello(name) {

alert('Hello, ' + name);}

sayHello('</script><script>alert("BOOM!");</script>');</script>


But why?


Armed with this knowledge, we can see that the HTML parser will send 2 scripts to the JavaScript parser to tokenize and execute… <script>function sayHello(name) { alert('Hello, ' + name); } sayHello('</script> <script>alert("BOOM!");</script>

57

<script>function sayHello(name) {

alert('Hello, ' + name);}

sayHello('</script><script>alert("BOOM!");</script>');</script>


A closer look

Again, the HTML parser will send these two script tags to the JavaScript parser… <script>function sayHello(name) { alert('Hello, ' + name); } sayHello('</script> <script>alert("BOOM!");</script>

If that name parameter is user-controlled, perhaps taken as input from the browser, or pulled from a datasource, whatever, then this is an open invitation for XSS attacks!

Errors like this can expose huge security holes which may allow an attacker to potentially take over a user’s browser!

58


JavaScript Puzzler – Say What?!...FIXED!

In this particular case, the fix must be done on the server-side.

We want to eliminate the <script></script> tags from appearing in the source in the first place.

Suggested solution is to use the OWASP ESAPI APIs… Stands for “The Open Web Application Security Project” “Enterprise Security API” https://www.owasp.org/index.php/Category:OWASP_Enterprise_Security_API Have API bindings in all major languages including…

Java Dot NET PHP JavaScript Python PHP

59

https://www.owasp.org/index.php/Category:OWASP_Enterprise_Security_API

https://www.owasp.org/index.php/Category:OWASP_Enterprise_Security_API


JavaScript Puzzler – Say What?!...FIXED!

For this particular Puzzler, we want to use ESAPI.encoder().encodeForJavaScript()

Doing this on the server to JavaScript-encode the user-inputted variable, name, we get what we expect…

60


Moral

NEVER . TRUST . THE . USER

Validate your input.

Encode your output appropriately. i.e. HTML-encode for HTML

URL-encode for URLs JavaScript-encode for JavaScript etc.

Use standard libraries (i.e. don’t reinvent the wheel).

61

Technology

JavaScript Puzzlers!