Dynamic Code Analysis for JavaScript

Slide 1

Slide 1 text

Dynamic Code Analysis for JavaScript @ariyahidayat Feb 12, 2014

Slide 2

Slide 2 text

/usr/bin/whoami shapesecurity.com

Slide 3

Slide 3 text

“Software Provocateur” PhantomJS Esprima

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

“YOU SHALL NOT PASS!” — Darth Vader

Slide 6

Slide 6 text

Utility Belt

Slide 7

Slide 7 text

Parser Code Coverage Code Generator Function Instrumentation +

Slide 8

Slide 8 text

Syntax Parser var answer = 42 keyword equal sign identifier number Variable Declaration Identifier Literal Constant Tokenization → Tokens Parsing → Syntax Tree

Slide 9

Slide 9 text

{ type: "Program", body: [ { type: "VariableDeclaration", declarations: [ { type: "VariableDeclarator", id: { type: "Identifier", name: "answer" }, init: { type: "Literal", value: 42, raw: "42" } } ], kind: "var" } ] } Syntax Tree var answer = 42; Terms → ECMAScript 5.1 Specification https://developer.mozilla.org/en-US/docs/SpiderMonkey/Parser_API

Slide 10

Slide 10 text

Syntax Visualization http://esprima.org/demo/parse.html

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Source Transformation Parser Code Generator In-place Modification Non-Destructive Regenerative http://ariya.ofilabs.com/2013/06/javascript-source-transformation-non-destructive-vs-regenerative.html

Slide 13

Slide 13 text

Code Coverage

Slide 14

Slide 14 text

Regenerative Transformation Parser Code Generator http://ariya.ofilabs.com/2013/06/javascript-source-transformation-non-destructive-vs-regenerative.html

Slide 15

Slide 15 text

Istanbul

Slide 16

Slide 16 text

Code Instrumentation var answer = 42; alert(answer); var __cov_l$4m7m$L464yvav5F$qhNA = __coverage__['hello.js']; __cov_l$4m7m$L464yvav5F$qhNA.s['1']++; var answer = 42; __cov_l$4m7m$L464yvav5F$qhNA.s['2']++; alert(answer);

Slide 17

Slide 17 text

Statement/Expression Coverage http://ariya.ofilabs.com/2012/12/javascript-code-coverage-with-istanbul.html function fibo(n) { return (n < 2) ? n : fibo(n-1) + fibo(n-2); } assert("fibo(1) must give 1", fibo(1) == 1);

Slide 18

Slide 18 text

Branch Coverage function inc(p, q) { if (q == undefined) q = 1; return p + q/q; } assert("inc(4) must give 5", inc(4) == 5); http://ariya.ofilabs.com/2012/12/javascript-code-coverage-with-istanbul.html

Slide 19

Slide 19 text

http://ariya.ofilabs.com/2012/09/the-hidden-trap-of-code-coverage.html Does not catch the missing code sequence

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Profile-Guided Optimization http://ariya.ofilabs.com/2013/07/profile-guided-javascript-optimization.html function isDigit(ch) { return '0123456789'.indexOf(ch) >= 0; } function isDigit(ch) { return (ch !== ' ') && '0123456789'.indexOf(ch) >= 0; }

Slide 22

Slide 22 text

Istanbul, QUnit, Karma http://ariya.ofilabs.com/2013/10/code-coverage-of-qunit-tests-using-istanbul-and-karma.html test("sqrt", function() { deepEqual(My.sqrt(4), 2, "square root of 4 is 2"); });

Slide 23

Slide 23 text

“If you think JSLint hurts your feelings, wait until you use Istanbul.” @davglass

Slide 24

Slide 24 text

...I gave you my heart But the very next day you gave it away...

Slide 25

Slide 25 text

Function Instrumentation

Slide 26

Slide 26 text

Non-Destructive Transformation Parser In-place Modification http://ariya.ofilabs.com/2013/06/javascript-source-transformation-non-destructive-vs-regenerative.html

Slide 27

Slide 27 text

String Literal Quotes http://ariya.ofilabs.com/2012/02/from-double-quotes-to-single-quotes.html console.log('Hello') console.log("Hello")

Slide 28

Slide 28 text

Timing Prepare the stopwatch Mark the start and the end Sampling Periodically check which function is being executed Tracing Track all function calls and exits http://ariya.ofilabs.com/2012/12/javascript-performance-analysis-sampling-tracing-and-timing.html

Slide 29

Slide 29 text

Fast = Enough? Alice Bob Chuck Dan ... Bob Alice Dan Chuck ... Sort How’s the speed? 2 ms to sort 10 contacts

Slide 30

Slide 30 text

Array.prototype.swap = function (i, j) { var k = this[i]; this[i] = this[j]; this[j] = k; } function sort(list) { var items = list.slice(0), swapped = false, p, q; for (p = 1; p < items.length; ++p) { for (q = 0; q < items.length - p; ++q) { if (items[q + 1] < items[q]) { items.swap(q, q + 1); swapped =true; } } if (!swapped) break; } return items; } Bubble Sort ???

Slide 31

Slide 31 text

Run-time Complexity http://ariya.ofilabs.com/2012/01/scalable-web-apps-the-complexity-issue.html Array.prototype.swap = function (i, j) { var k = this[i]; this[i] = this[j]; this[j] = k; } Array.prototype.swap = function (i, j) { Log({ name: 'Array.prototype.swap', lineNumber: 1, range: [23, 94] }); var k = this[i]; this[i] = this[j]; this[j] = k; } http://esprima.org/demo/functiontrace.html

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

“First Things First”, Steven Covey “The Big Rock” http://calendar.perfplanet.com/2013/javascript-performance-big-picture/

Slide 34

Slide 34 text

Layers of Defense

Slide 35

Slide 35 text

Being Defensive http://ariya.ofilabs.com/2012/12/quality-code-via-multiple-layers-of-defense.html

Slide 36

Slide 36 text

Being Objective Mr. Reviewer Your code sucks! Your code sucks!

Slide 37

Slide 37 text

Tests Madness T D D B D D

Slide 38

Slide 38 text

Coverage Thresholds http://ariya.ofilabs.com/2013/05/hard-thresholds-on-javascript-code-coverage.html istanbul check-coverage --statement -5 --branch -3 --function 100

Slide 39

Slide 39 text

Tools separate us

Slide 40

Slide 40 text

Final Words Dynamic code analysis for quality: ● Code coverage (statement, branch,...) ● Function instrumentation Build, write, tweak code analysis tools

Slide 41

Slide 41 text

Thank You @ariyahidayat ariya.ofilabs.com speakerdeck.com/ariya Some artworks are from http://openclipart.org.