DLint and JITProf. [FSE 15] JITProf: Pinpointing JIT-unfriendly JavaScript code Liang Gong, Michael Pradel, Koushik Sen

Transcription

1 DLint and JITProf DLint: Dynamically Checking JS Coding Practice [ISSTA 15] DLint: Dynamically Checking Bad Coding Practices in JavaScript Liang Gong, Michael Pradel, Manu Sridharan, Koushik Sen JITProf: Find JS code that prohibit JIT-optimization [FSE 15] JITProf: Pinpointing JIT-unfriendly JavaScript code Liang Gong, Michael Pradel, Koushik Sen 1

2 DLint and JITProf for Web Pages mitmproxy Observe requests & intercepts responses that contain JS and webpages 2

3 DLint and JITProf DLint: Dynamically Checking JS Coding Practice [ISSTA 15] DLint: Dynamically Checking Bad Coding Practices in JavaScript Liang Gong, Michael Pradel, Manu Sridharan, Koushik Sen JITProf: Find JS code that prohibit JIT-optimization [FSE 15] JITProf: Pinpointing JIT-unfriendly JavaScript code Liang Gong, Michael Pradel, Koushik Sen 3

4 What are coding practices? Good coding practices Informal rules Improve code quality Better quality means: Fewer correctness issues Better performance Better usability Better maintainability Fewer security loopholes Fewer surprises 4

5 Rule: avoid using for..in over arrays var sum = 0, value; var array = [11, 22, 33]; for (value in array) { sum += value; > sum? 5

6 Rule: avoid using for..in over arrays var sum = 0, value; var array = [11, 22, 33]; for (value in array) { sum += value; > sum? => 66 array index (not array value) => 3 array index : string 0+"0"+"1"+"2" => "0012" 6

7 Rule: avoid using for..in over arrays var sum = 0, value; var array = [11, 22, 33]; for (value in array) { sum += value; > sum? => 66 array index (not array value) => 3 array index : string 0+"0"+"1"+"2" => "0012" 7 Cross-browser issues Result depends on the Array prototype object > "0012indexOftoString..."

8 Rule: avoid using for..in over arrays var sum = 0, value; var array = [11, 22, 33]; for (value in array) { sum += value; > sum? for (i=0; i < array.length; i++) { sum += array[i]; 8 function addup(element, index, array) { sum += element; array.foreach(addup);

9 Rule: avoid using for..in over arrays var sum = 0, value; var array = [11, 22, 33]; for (value in array) { sum += value; > sum? for (i=0; i < array.length; i++) { sum += array[i]; 9 function addup(element, index, array) { sum += element; array.foreach(addup);

10 Coding Practices and Lint Tools Existing Lint-like checkers Inspect source code Detect common mistakes Limitations: Approximates behavior Unknown aliases Lint tools favor precision over soundness Difficulty: Precise static program analysis 10

11 DLint Dynamic Linter checking code quality rules for JS Open-source, robust, and extensible framework Formalized and implemented 28 rules Counterparts of static rules Additional rules Empirical study It is better to use DLint and static linter together 11

12 Detect for..in over arrays with Jalangi var sum = 0, value; var array = [11, 22, 33]; for (value in array) { sum += value; > sum? for (i=0; i < array.length; i++) { sum += array[i]; 12 function addup(element, index, array) { sum += element; array.foreach(addup);

13 Detect for..in over arrays with Jalangi for (value in obj) { sum += value; 13

14 Detect for..in over arrays with Jalangi for (value in obj) { sum += value; Have a warning when obj in for-in is an array. 14

15 Detect for..in over arrays with Jalangi for (value in obj) { sum += value; instrumentation Jalangi Instrumented Code Have a warning when obj in for-in is an array. 15

16 Detect for..in over arrays with Jalangi for (value in obj) { sum += value; instrumentation Jalangi Instrumented Code Have a warning when obj in for-in is an array. function forinobject(iid, val) { 16

17 Detect for..in over arrays with Jalangi for (value in obj) { sum += value; instrumentation Jalangi Instrumented Code Have a warning when obj in for-in is an array. function forinobject(iid, val) { 17

18 Detect for..in over arrays with Jalangi for (value in obj) { sum += value; instrumentation Jalangi Instrumented Code Have a warning when obj in for-in is an array. function forinobject(iid, val) { if (isarray(val)) { // report warning! 18

19 Detect for..in over arrays with Jalangi for (value in obj) { sum += value; instrumentation Jalangi Instrumented Code Have a warning when obj in for-in is an array. function forinobject(iid, val) { if (isarray(val)) { // report warning! 19

20 Detect for..in over arrays with Jalangi for (value in obj) { sum += value; instrumentation Jalangi Instrumented Code Have a warning when obj in for-in is an array. 20 function forinobject(iid, val) { if (isarray(val)) { // J$.iidToLocation(iid); report warning!

21 Detect for..in over arrays with Jalangi for (value in obj) { sum += value; instrumentation Jalangi Instrumented Code Have a warning when obj in for-in is an array. 21 function forinobject(iid, val) { if (isarray(val)) { // J$.iidToLocation(iid); report warning! file.js:<start line>:<start col>:<end line>:<end col>

22 Detect for..in over arrays with Jalangi for (value in obj) { sum += value; instrumentation Jalangi Instrumented Code Have a warning when obj in for-in is an array. 22 function forinobject(iid, val) { if (isarray(val)) { // J$.iidToLocation(iid); report warning! file.js:<start line>:<start col>:<end line>:<end col>

23 Checkers CheckNaN.js ConcatUndefinedToString.js NonObjectPrototype.js SetFieldToPrimitive.js OverFlowUnderFlow.js StyleMisuse.js ToStringGivesNonString.js UndefinedOffset.js NoEffectOperation.js AddEnumerablePropertyToObject.js ConstructWrappedPrimitive.js InconsistentNewCallPrefix.js UncountableSpaceInRegexp.js FloatNumberEqualityComparison.js FunctionToString.js ShadowProtoProperty.js ForInArray.js NonNumericArrayProperty.js OverwrittenPrototype.js GlobalThis.js CompareFunctionWithPrimitives.js InconsistentConstructor.js FunctionCalledWithMoreArguments.js IllegalUseOfArgumentsVariable.js DoubleEvaluation.js EmptyClassInRegexp.js UseArrObjConstrWithoutArg.js MissRadixArgInParseNum.js 23

24 a.f = b.g Chained Analysis PutField(Read("a", a), "f", GetField(Read("b", b), "g")) Chained Analysis functions PutField Read Checker-1 functions PutField Read Checker-2 functions PutField Read Checker-n functions PutField Read 24

25 Other Resources Jalangi (v2) Github DLint + JITProf Github based on Jalangi (v2) JITProf Visualization Github based on Jalangi (v2) 25

26 DLint and JITProf DLint: Dynamically Checking JS Coding Practice [ISSTA 15] DLint: Dynamically Checking Bad Coding Practices in JavaScript Liang Gong, Michael Pradel, Manu Sridharan, Koushik Sen JITProf: Find JS code that prohibit JIT-optimization [FSE 15] JITProf: Pinpointing JIT-unfriendly JavaScript code Liang Gong, Michael Pradel, Koushik Sen 26

27 Motivation of JITProf Dynamic language features: Simplifies coding Write less, do more more productive Code is less verbose easier to understand 27

28 Motivation of JITProf Dynamic language features: Simplifies coding Write less, do more more productive Code is less verbose easier to understand Slow execution Too many runtime checks Object property lookup -> hash table lookup... 28

29 Pinpointing JIT-unfriendly JavaScript Code Code snippet from Google Octane Benchmark: SplayTree.prototype.insert = function(key, value) {... var node = new SplayTree.Node(key, value); if (key > this.root_.key) { node.left = this.root_; node.right = this.root_.right;... else { node.right = this.root_; node.left = this.root_.left;... this.root_ = node; ; 29

30 Pinpointing JIT-unfriendly JavaScript Code Code snippet from Google Octane Benchmark: SplayTree.prototype.insert = function(key, value) {... var node = new SplayTree.Node(key, value); if (key > this.root_.key) { node.left = this.root_; node.right = this.root_.right;... else { node.right = this.root_; node.left = this.root_.left;... this.root_ = node; ; Cause of poor performance: node has two layouts: offset of left in node can be 0 or 1 JIT cannot replace node.left with node[0] or node[1] 30

31 Pinpointing JIT-unfriendly JavaScript Code Code snippet from Google Octane Benchmark: SplayTree.prototype.insert = function(key, value) {... var node = new SplayTree.Node(key, value); if (key > this.root_.key) { node.left = this.root_; node.right = this.root_.right;... else { node.right = this.root_; node.left = this.root_.left;... this.root_ = node; ; Performance boost: 15% 6.7% 31

32 Pinpointing JIT-unfriendly JavaScript Code Code snippet from Google Octane Benchmark: SplayTree.prototype.insert = function(key, value) {... var JITProf node = new Simulates SplayTree.Node(key, the Hidden value); Classes if (key > this.root_.key) { based node.left on the = this.root_; information provided by Jalangi node.right = this.root_.right;... 15% else { node.right = this.root_; 6.7% node.left = this.root_.left;... this.root_ = node; ; Performance boost: 32

33 Back to the Motivating Example function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; Each object has a meta information associated with it The meta information keeps track of its object layout and its transition history. for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; 33

34 Back to the Motivating Example function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; 34

35 Back to the Motivating Example function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; Objects Anonymous Hidden Class Hidden Classes Property Offset proto Hidden class simulation before the statement for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; 35

36 Back to the Motivating Example function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; Objects Anonymous Hidden Class Objects Anonymous Offset 0 4 Hidden Class Hidden Classes Property Offset proto Hidden class simulation before the statement Hidden Classes Property Offset proto Property Offset b 0 proto Hidden class simulation after the statement 36

37 Back to the Motivating Example function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; Objects Anonymous Offset 0 4 Offset 1 3 Hidden Class Objects Anonymous2 Offset 0 2 Offset 1 3 Hidden Class Hidden Classes Property Offset proto Property Offset b 0 proto Property Offset b 0 a 1 proto Property Offset a 0 proto Property Offset a 0 b 1 proto 37

38 Back to the Motivating Example function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; Objects Anonymous Hidden Class Hidden Classes Property Offset proto Hidden class simulation before the statement Property Offset Offset 0 4 proto Hidden Class Property Offset b 0 proto Hidden class simulation after the statement 38

39 function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; invoke Back to the Motivating Example for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; Objects Anonymous Hidden Class Offset 0 4 Hidden Class Hidden Classes Property Offset proto Hidden class simulation before the statement Property Offset proto function putfieldpre (iid, base, offset, val ) { // logic for updating the hidden class Jalangi Property Offset b 0 proto Hidden class simulation after the statement 39

40 function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; invoke Back to the Motivating Example for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; Objects Anonymous Hidden Class Offset 0 4 Hidden Class Hidden Classes Property Offset proto Hidden class simulation before the statement Property Offset proto function putfieldpre (iid, base, offset, val ) { // logic for updating the hidden class Jalangi this.b = 4; Property Offset b 0 proto Hidden class simulation after the statement 40

41 function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; invoke Back to the Motivating Example for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; Objects Anonymous Hidden Class Offset 0 4 Hidden Class Hidden Classes Property Offset proto Hidden class simulation before the statement Property Offset proto function putfieldpre (iid, base, offset, val ) { // logic for updating the hidden class Jalangi this.b = 4; Property Offset b 0 proto Hidden class simulation after the statement 41

42 function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; invoke Back to the Motivating Example for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; Objects Anonymous Hidden Class Offset 0 4 Hidden Class Hidden Classes Property Offset proto Hidden class simulation before the statement Property Offset proto function putfieldpre (iid, base, offset, val ) { // logic for updating the hidden class Jalangi this.b = 4; 'b' Property Offset b 0 proto Hidden class simulation after the statement 42

43 function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; invoke Back to the Motivating Example for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; Objects Anonymous Hidden Class Offset 0 4 Hidden Class Hidden Classes Property Offset proto Hidden class simulation before the statement Property Offset proto function putfieldpre (iid, base, offset, val ) { // logic for updating the hidden class Jalangi this.b = 4; 'b' Property Offset b 0 proto Hidden class simulation after the statement 43

44 function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; invoke Back to the Motivating Example Jalangi for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; Objects Anonymous Hidden Class Offset 0 4 Hidden Class Hidden Classes Property Offset proto Hidden class simulation before the statement this.b = 4; 'b' Property Offset proto function putfieldpre (iid, base, offset, val ) { Property Offset var sobj = J$.smemory.getShadowObject(base); b 0 sobj.hiddenclass... proto Hidden class simulation after the statement 44

45 Back to the Motivating Example function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; Intercept putfield to update the hidden class for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; var o = {a: 1, b: 2; 45

46 Back to the Motivating Example function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; Intercept putfield to update the hidden class Intercept invokefun to record object creation location for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; var o = {a: 1, b: 2; 46

47 Back to the Motivating Example function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; Intercept putfield to update the hidden class Intercept invokefun to record object creation location Intercept getfield to record inline cache misses var o = {a: 1, b: 2; 47

48 Back to the Motivating Example function Thing(flag) { if (!flag) { this.b = 4; this.a = 3; else { this.a = 2; this.b = 1; for(var i = 0; i< ;i++) { var o = new Thing(i%2); result += o.a + o.b; var o = {a: 1, b: 2; Intercept putfield to update the hidden class Intercept invokefun to record object creation location Intercept getfield to record inline cache misses Intercept literal to update hidden class + record object creation location 48

49 JIT-unfriendly Code Checked by JITProf Use inconsistent object layout Access undeclared property or array element Store non-numeric value in numeric arrays Use in-contiguous keys for arrays Not all properties are initialized in constructors and more 49

50 Install DLint and JITProf with Jalangi2 npm install (third-party framework) pip install pyopenssl pip install mitmproxy== Install the mitmproxy certificate manually (drag-and-drop) 50

51 (third-party framework) man-in-the-middle proxy Interactive, SSL-capable proxy for HTTP with a console interface. Intercept http communication between the client and the server for instrumentation. request forwarded request Browser forwarded response mitmproxy response Server 51

52 Install mitmproxy pip install pyopenssl pip install mitmproxy==

53 Install mitmproxy pip install pyopenssl pip install mitmproxy==

54 The HTTPS Problem Man-in-the-middle Proxy SSL and HTTPS is designed against MITM HTTPS Handle shake error due to uncertified modification via instrumentation request forwarded request Browser response mitmproxy + Jalangi Instrumentation Server 54

55 The HTTPS Problem Man-in-the-middle Proxy SSL and HTTPS is designed against MITM HTTPS Handle shake error due to uncertified modification via instrumentation request forwarded request response Browser mitmproxy + Jalangi Instrumentation Server + a Certificate Authority Implementation 55

56 The HTTPS Problem Man-in-the-middle Proxy SSL and HTTPS is designed against MITM HTTPS Handle shake error due to uncertified modification via instrumentation request forwarded request response Browser mitmproxy + Jalangi Instrumentation Server + a Certificate Authority Implementation 56

57 Install the CA System of mitmproxy pip install mitmproxy== Then run mitmproxy in the terminal In browser, configure HTTP and HTTPS proxy Server: Port:

58 Install the CA System of mitmproxy pip install mitmproxy== Then run mitmproxy in the terminal In browser, configure HTTP and HTTPS proxy Server: Port:

59 Install the CA System of mitmproxy pip install mitmproxy== Then run mitmproxy in the terminal In browser, configure HTTP and HTTPS proxy Server: Port:

60 Install the CA System of mitmproxy pip install mitmproxy== Then run mitmproxy in the terminal In browser, configure HTTP and HTTPS proxy Server: Port:

61 Install the CA System of mitmproxy 1. Type mitmproxy in the console 2. Open the browser with proxy configured 3. Go to mitm.it URL 61

62 Install the CA System of mitmproxy Click on the icon of the OS you are using 62

63 Install the CA System of mitmproxy A certificate file will be downloaded 63

64 Install the CA System of mitmproxy Open the Keychain app in Mac OS 64

65 Install the CA System of mitmproxy Drag and drop the cer file into the keychain 65

66 Other Resources Jalangi (v2) Github DLint + JITProf Github based on Jalangi (v2) JITProf Visualization Github based on Jalangi (v2) Questions 66

67 67

68 68

69

70 Rule #5: Use Contiguous Keys for Array var array = []; for (var i=10000;i>=0;i--){ array[i] = i; 70

71 Rule #5: Use Contiguous Keys for Array var array = []; for (var i=10000;i>=0;i--){ array[i] = i; array[10000] = 10000; array[9999] = 9999;... non-contiguous array To save memory, JIT-engine decides to represent the array with slow data structures like hash table. 71

72 Rule #5: Use Contiguous Keys for Array var array = []; for (var i=10000;i>=0;i--){ array[i] = i; for (var i=0;i<=10000;i++){ array[i] = i; 10X+ speedup! 72

73 Rule #5: Use Contiguous Keys for Array var array = []; for (var i=10000;i>=0;i--){ loc1: array[i] = i; Intercept putfield operation of arrays Rank locations by number assignments to non-contiguous arrays 73

74 (*)means smaller is better group average sunspider-chrome-sha1 (*) octane-firefox-splay Sunspider-String-Tagcloud (*) octane-firefox-deltablue octane-chrome-box2d octane-chrome-raytrace original refactored original refactored original refactored original refactored original refactored original refactored improve rate 26.3% 3.5% 11.7% 1.4% 7.5% 12.9% higher better 74

75 (*)means smaller is better group average octane-chrome-splay octane-chrome-splaylatency sunspider-chrome-3d-cube (*) sunspider-firefox-sha1 (*) sunspider-firefox-xparb (*) sunspider-chrome-md5 (*) sunspider-chrome-format-tofte (*) original refactored original refactored original refactored original refactored original refactored original refactored original refactored improve rate 15.1% 3.8% 1.1% 3.3% 19.7% 24.6% 3.4% higher better 75

76 DLint: Dynamically Checking Bad Coding Practices in JavaScript Liang Gong, Michael Pradel, Manu Sridharan, Koushik Sen [ISSTA 15] Designed and Implemented in 10 days Not all decisions were well-thought Problematic language features Error prone Poor performance Prone to security vulnerabilities Problematic features are still around Backward compatibility 76

77 Hidden Class Objects var obj = {a:1,b:2 var obj2 = {a:3,b:4 Map in V8 Shape in SpiderMonkey Structure in JavaScriptCore obj Offset 0 1 Offset 1 2 Hidden Class obj2 Offset 0 3 Offset 1 4 Hidden Class Hidden Classes Property Offset a 0 b 1 proto 77

78 Hidden Class Objects var obj = {a:1,b:2 var obj2 = {a:3,b:4 function geta(o){ return o.a; geta(obj); obj Offset 0 1 Offset 1 2 Hidden Class obj2 Offset 0 3 Offset 1 4 Hidden Class Hidden Classes Property Offset a 0 b 1 proto 78

79 Hidden Class + Inline Caching Objects var obj = {a:1,b:2 var obj2 = {a:3,b:4 function geta(o){ return o.a; geta(obj); obj Offset 0 1 Offset 1 2 Hidden Class obj2 Offset 0 3 Offset 1 4 Hidden Class function geta(o){ if(o is an object && o.hiddenclass == cached_hiddenclass) return o[cached_a_offset]; else{ // jump to V8 runtime Hidden Classes Property Offset a 0 b 1 proto 79

80 Hidden Class + Inline Caching Objects var obj = {a:1,b:2 var obj2 = {a:3,b:4 function geta(o){ return o.a; geta(obj); obj Offset 0 1 Offset 1 2 Hidden Class obj2 Offset 0 3 Offset 1 4 Hidden Class function geta(o){ if(o is an object && o.hiddenclass == cached_hiddenclass) return o[cached_a_offset]; else{ // jump to V8 runtime Hidden Classes Property Offset a 0 b 1 proto An inline cache hit 80

81 Hidden Class + Inline Caching Objects var obj = {a:1,b:2 var obj2 = {a:3,b:4 function geta(o){ return o.a; geta(obj); obj Offset 0 1 Offset 1 2 Hidden Class obj2 Offset 0 3 Offset 1 4 Hidden Class function geta(o){ if(o is an object && o.hiddenclass == cached_hiddenclass) return o[cached_a_offset]; else{ // jump to V8 runtime Hidden Classes Property Offset a 0 b 1 proto An inline cache hit An inline cache miss 81

82 Hidden Class + Inline Caching A monomorphic inline cache hit requires 3-10 instructions, while an inline cache miss requires 1000 ~ 4000 instructions [1] function geta(o){ if(o is an object && o.hiddenclass == cached_hiddenclass) return o[cached_a_offset]; else{ // jump to V8 runtime An inline cache hit An inline cache miss [1] Wonsun Ahn et al. PLDI 14 82