© 2017 Synopsys, Inc. 1
Performing JavaScript Static Analysis
A high-level overview of performing code review on JavaScript apps
Lewis Ardern
January 26, 2018
© 2017 Synopsys, Inc. 2
About Me
• Sr. Security Consultant @ Synopsys Software Integrity Group (SIG)
– Formerly Cigital
– 4 years within the security space
– Ph.D. Candidate at Leeds Beckett University
• Prior to Cigital
– B.Sc. in Computer Security and Ethical Hacking
– Founder of the Leeds Ethical Hacking Society
– Software Developer
– Security Consultant
• Synopsys
– Historically all about hardware
– SIG formed to tackle software
– Team consisting of well-known organizations
– BlackDuck
– Coverity
– Codenomicon
– Cigital
– Codiscope
Lewis
© 2017 Synopsys, Inc. 3
Agenda
• JavaScript Landscape
• JavaScript Security Issues
• Static Code Analysis and Review Methods
• Challenges with JavaScript Code Analysis
• Tools and Automation
• Customizing Tools
© 2017 Synopsys, Inc. 4
JavaScript Landscape
From the beginning to now
© 2017 Synopsys, Inc. 5
A Time Once forgotten
• JavaScript was introduced in 1995
• JavaScript as we know it is an implementation of ECMAScript
• The web was predominantly Server Based
– Client: HTML, CSS, and JavaScript
– Server: .NET, PHP, Java, etc
– Database: MSSQL, MySQL, Oracle, etc
• The old view was that you only had to protect the Server
• The client was for aesthetics
© 2017 Synopsys, Inc. 6
Life as we know it
"JavaScript is the most commonly used programming language on earth. Even back-end developers are
more likely to use it than any other language.” – 2016 Stack Overflow Developer Survey
https://insights.stackoverflow.com/survey/2017
© 2017 Synopsys, Inc. 7
Example of Full-Stack JavaScript
Database
MongoDB
Server
Node.js/Express.js
Client
Angular/AngularJS
© 2017 Synopsys, Inc. 8
Lets be REACTtive!
• Every week, new JavaScript frameworks are created
• Frameworks are terrific development tools, but they all come
with their own specific security features, and threats
• Frameworks are sometimes vulnerable by default
– Abusing JavaScript frameworks to bypass XSS mitigations
• Teams transition to different frameworks in rapid succession
• Automated security tools are slow to adopt new frameworks
© 2017 Synopsys, Inc. 9
JavaScript Security Issues
Identifying issues by looking at code
© 2017 Synopsys, Inc. 10
Personal Tips
When working with a new language or framework here are my tips:
• Learn the idioms of the language
• Learn one issue well before moving onto the next
• Always document issues that you have found, and keep the code as a reference
• Use tools but do NOT rely on them
© 2017 Synopsys, Inc. 11
Covered Today
• Captured by automated code scanners
–Dynamic Execution of JavaScript
• Often misunderstood by Developers and Security Consultants
–postMessage
• Not easily detected by automated code scanners
–Client-Side Trust
© 2017 Synopsys, Inc. 12
Dynamic Execution of JavaScript
Method Example
eval(expression) eval("ale"+"rt(document.co"+"okie)");
execScript(expression [, language]) window.execScript("alert(document.cookie)");
setTimeout(expression, milliseconds) setTimeout("alert('XSS')",3000);
setInterval(expression, milliseconds [,
language])
setInterval("alert('XSS')",3000);
JavaScript provides various ways to execute JavaScript dynamically
• DOM-XSS happens quite often through Dynamic Execution of JavaScript
• Avoid the use of user-input in execution queries such as eval
© 2017 Synopsys, Inc. 13
Dynamic Execution of JavaScript
When worlds collide
JavaScript
ExecutionClient
RCEServer
© 2017 Synopsys, Inc. 14
Dynamic Execution of JavaScript Demo
When worlds collide
© 2017 Synopsys, Inc. 15
postMessage
• Websites by default are not able to communicate with each other due to the Same Origin
Policy (SOP)
• window.postMessage method enables cross-origin communication between Window objects
– Page and a popup it spawned
– Page and an embedded iframe
• If the developer does not validate the origin, any website can communicate with the message
© 2017 Synopsys, Inc. 16
postMessage Example
© 2017 Synopsys, Inc. 17
postMessage Exploit
© 2017 Synopsys, Inc. 18
postMessage Remediation
© 2017 Synopsys, Inc. 19
postMessage Demo
Crossing the origin
© 2017 Synopsys, Inc. 20
Client-Side Trust Issues
With the introduction of all of these frameworks, a lot of the heavy load has moved to the client
• Wrong assumptions:
• Data stored on the client is not accessible to attackers
• Data submitted by the client to the server is controlled by the client-side code
• In fact:
• Data stored on the client is almost always accessible to attackers
• Actions performed on the client are fully controlled by attackers
• HTML5 storage persists
• Sensitive information should not be stored in caches pages, forms data, or cookies
• Sensitive information should only be stored in sessionStorage, rather than localStorage
• Sometimes only client-side controls are relied on to protect Sensitive Data
• https://finnwea.com/blog/stealing-passwords-from-mcdonalds-users/
© 2017 Synopsys, Inc. 21
They are client-side checks!
© 2017 Synopsys, Inc. 22
Static Code Analysis and Review Methods
Let’s walk the tree
© 2017 Synopsys, Inc. 23
Static Analysis
• Manual Code Review is painful and can be boring if you have millions of lines to look at
• The term is commonly used to describe the automated process of reviewing the code using
Static Code Analysis (SCA)
• Usually carried out at the implementation phase of a Software Development Life Cycle (SDLC)
© 2017 Synopsys, Inc. 24
Static Analysis
• It helps identify:
– Security vulnerabilities introduced due to coding errors
– Security vulnerabilities deliberately introduced in source code
© 2017 Synopsys, Inc. 25
Source
Code
Tokens Lex Parse Semantics
Abstract
Syntax
Tree
Walk the
tree
Static Analysis Process
Recommended -
https://www.youtube.com/watch?v=DE18fHyZ0GI
https://interpreterbook.com/
http://astexplorer.net
http://resources.jointjs.com/demos/javascript-ast
© 2017 Synopsys, Inc. 26
Challenges with JavaScript Code Analysis
• JavaScript is an object-based prototypal language, which can be dynamically changed at run-
time
• Every JavaScript object has a prototype object, which can be overridden to do something
different:
© 2017 Synopsys, Inc. 27
Variables of JavaScript Can Contain Different Types
© 2017 Synopsys, Inc. 28
In addition, JavaScript Has Type Coercion
• Type Coercion converts one type of object to a new object with similar content, but of a
different type
© 2017 Synopsys, Inc. 29
JavaScript Has Higher Order Functions
• Higher-order functions can take another function as an argument
© 2017 Synopsys, Inc. 30
JavaScript By Default Is Forgiving
• Strongly Typed JavaScript frameworks to created to make developer lives easier
• Strongly typed JavaScript === less bugs
© 2017 Synopsys, Inc. 31
New Languages and Features
• Everyone wants to invent their own way of building modern applications
• GWT - Java to JavaScript
• TypeScript – Typed JavaScript to JavaScript
• Pyscript – Python to JavaScript
• FunScript – FSharp to JavaScript
• More - http://todomvc.com
• The support is low for automated code scanning against these frameworks
• Strongly Typed JavaScript is transpiled to JavaScript before interpreted
• Issues can be identified in the JavaScript code, but need to be mapped back to the problem location
• New features such as ES6/7/8 require updates to the static analysis process
© 2017 Synopsys, Inc. 32
Data Flow Analysis
Explaining Sources and Sinks in JavaScript
• Dynamic Execution of JavaScript
• AngularJS XSS
© 2017 Synopsys, Inc. 33
Commercial products that perform
JavaScript data flow analysis:
• Coverity
• Fortify
• Checkmarx
• AppScan Source
• VeraCode
Tools that look for known issues in
JavaScript libraries:
• Retire.js
• NSP
• Snyk
Tools that look for areas of interest:
• Burp Passive Scanner
• ScanJS (Deprecated)
• JSHint
• JSLint
• ESLint
Tools that deobfuscate JavaScript:
Closure Compiler
JStillery
Use what works for you
JavaScript Static Analysis Tools
© 2017 Synopsys, Inc. 34
ESLint
• ESLint is an open-source pluggable linting utility for JavaScript
• Linters parse ASTs to identify code quality and security issues
• ESLint was created was to allow developers to enforce rules
• Can be hooked into the development release cycle
– Many developers do not allow code to be pushed with ESLint issues flagged
– You can create Git Hooks
– Can be part of CI/CD pipeline
• Allows custom rules to enforce domain specific guidance
© 2017 Synopsys, Inc. 35
ESLint
• ESLint is now the go-to tool to JavaScript developers
https://stateofjs.com/2017/other-tools/
© 2017 Synopsys, Inc. 36
ESLint Security Rules
• ESLint can help security consultants look for points of interest
• Default security rule configs
– NodeJS https://github.com/nodesecurity/eslint-config-nodesecurity
– VanillaJS https://github.com/mozfreddyb/eslint-config-scanjs
– AngularJS https://github.com/LewisArdern/eslint-config-angular-security
– React https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules
• Security rules
– eslint-plugin-scanjs
– eslint-plugin-security
– eslint-plugin-react
– eslint-plugin-angular-security
– eslint-plugin-no-wildcard-postmessage
– eslint-plugin-no-unsafe-innerhtml
© 2017 Synopsys, Inc. 37
Problem: In AngularJS security assessments I want to identify problem locations quickly
Solution: Create ESLint rules to run on every assessment as a starting point:
• Current
– Basic rules to identify points of interest
– Identifies:
– Security Misconfigurations
– Expression Injection
– Client-Side Open-Redirection
• Roadmap:
– More rules
– Angular 2/4 support to come
– Maintain state of variable declarations
– Improve the rules to only identify actual issues
Creating Your Own Rules
© 2017 Synopsys, Inc. 38
• Create a test with true positive and false positive
• Walk the JavaScript AST and identify your requirements
• Create a rule from the AST output
• Make sure the test passes
Steps To Create a Rule
© 2017 Synopsys, Inc. 39
Creating a Test
© 2017 Synopsys, Inc. 40
Identifying The Requirements
© 2017 Synopsys, Inc. 41
Create The Rule
© 2017 Synopsys, Inc. 42
ESLint Demo
Capturing points of interest on AngularJS
© 2017 Synopsys, Inc. 43
Summary
• JavaScript is a wonderful and weird language
• Learn types of issues well, to be able to detect them easier
• You have to be concerned of JavaScript on the Client and the Server
• Learning the underlying process of static analysis can help you identify issues easier and
quicker
• Use and extend tools but do NOT rely on them
Thank You
BSides Leeds -  Performing JavaScript Static Analysis

BSides Leeds - Performing JavaScript Static Analysis

  • 1.
    © 2017 Synopsys,Inc. 1 Performing JavaScript Static Analysis A high-level overview of performing code review on JavaScript apps Lewis Ardern January 26, 2018
  • 2.
    © 2017 Synopsys,Inc. 2 About Me • Sr. Security Consultant @ Synopsys Software Integrity Group (SIG) – Formerly Cigital – 4 years within the security space – Ph.D. Candidate at Leeds Beckett University • Prior to Cigital – B.Sc. in Computer Security and Ethical Hacking – Founder of the Leeds Ethical Hacking Society – Software Developer – Security Consultant • Synopsys – Historically all about hardware – SIG formed to tackle software – Team consisting of well-known organizations – BlackDuck – Coverity – Codenomicon – Cigital – Codiscope Lewis
  • 3.
    © 2017 Synopsys,Inc. 3 Agenda • JavaScript Landscape • JavaScript Security Issues • Static Code Analysis and Review Methods • Challenges with JavaScript Code Analysis • Tools and Automation • Customizing Tools
  • 4.
    © 2017 Synopsys,Inc. 4 JavaScript Landscape From the beginning to now
  • 5.
    © 2017 Synopsys,Inc. 5 A Time Once forgotten • JavaScript was introduced in 1995 • JavaScript as we know it is an implementation of ECMAScript • The web was predominantly Server Based – Client: HTML, CSS, and JavaScript – Server: .NET, PHP, Java, etc – Database: MSSQL, MySQL, Oracle, etc • The old view was that you only had to protect the Server • The client was for aesthetics
  • 6.
    © 2017 Synopsys,Inc. 6 Life as we know it "JavaScript is the most commonly used programming language on earth. Even back-end developers are more likely to use it than any other language.” – 2016 Stack Overflow Developer Survey https://insights.stackoverflow.com/survey/2017
  • 7.
    © 2017 Synopsys,Inc. 7 Example of Full-Stack JavaScript Database MongoDB Server Node.js/Express.js Client Angular/AngularJS
  • 8.
    © 2017 Synopsys,Inc. 8 Lets be REACTtive! • Every week, new JavaScript frameworks are created • Frameworks are terrific development tools, but they all come with their own specific security features, and threats • Frameworks are sometimes vulnerable by default – Abusing JavaScript frameworks to bypass XSS mitigations • Teams transition to different frameworks in rapid succession • Automated security tools are slow to adopt new frameworks
  • 9.
    © 2017 Synopsys,Inc. 9 JavaScript Security Issues Identifying issues by looking at code
  • 10.
    © 2017 Synopsys,Inc. 10 Personal Tips When working with a new language or framework here are my tips: • Learn the idioms of the language • Learn one issue well before moving onto the next • Always document issues that you have found, and keep the code as a reference • Use tools but do NOT rely on them
  • 11.
    © 2017 Synopsys,Inc. 11 Covered Today • Captured by automated code scanners –Dynamic Execution of JavaScript • Often misunderstood by Developers and Security Consultants –postMessage • Not easily detected by automated code scanners –Client-Side Trust
  • 12.
    © 2017 Synopsys,Inc. 12 Dynamic Execution of JavaScript Method Example eval(expression) eval("ale"+"rt(document.co"+"okie)"); execScript(expression [, language]) window.execScript("alert(document.cookie)"); setTimeout(expression, milliseconds) setTimeout("alert('XSS')",3000); setInterval(expression, milliseconds [, language]) setInterval("alert('XSS')",3000); JavaScript provides various ways to execute JavaScript dynamically • DOM-XSS happens quite often through Dynamic Execution of JavaScript • Avoid the use of user-input in execution queries such as eval
  • 13.
    © 2017 Synopsys,Inc. 13 Dynamic Execution of JavaScript When worlds collide JavaScript ExecutionClient RCEServer
  • 14.
    © 2017 Synopsys,Inc. 14 Dynamic Execution of JavaScript Demo When worlds collide
  • 15.
    © 2017 Synopsys,Inc. 15 postMessage • Websites by default are not able to communicate with each other due to the Same Origin Policy (SOP) • window.postMessage method enables cross-origin communication between Window objects – Page and a popup it spawned – Page and an embedded iframe • If the developer does not validate the origin, any website can communicate with the message
  • 16.
    © 2017 Synopsys,Inc. 16 postMessage Example
  • 17.
    © 2017 Synopsys,Inc. 17 postMessage Exploit
  • 18.
    © 2017 Synopsys,Inc. 18 postMessage Remediation
  • 19.
    © 2017 Synopsys,Inc. 19 postMessage Demo Crossing the origin
  • 20.
    © 2017 Synopsys,Inc. 20 Client-Side Trust Issues With the introduction of all of these frameworks, a lot of the heavy load has moved to the client • Wrong assumptions: • Data stored on the client is not accessible to attackers • Data submitted by the client to the server is controlled by the client-side code • In fact: • Data stored on the client is almost always accessible to attackers • Actions performed on the client are fully controlled by attackers • HTML5 storage persists • Sensitive information should not be stored in caches pages, forms data, or cookies • Sensitive information should only be stored in sessionStorage, rather than localStorage • Sometimes only client-side controls are relied on to protect Sensitive Data • https://finnwea.com/blog/stealing-passwords-from-mcdonalds-users/
  • 21.
    © 2017 Synopsys,Inc. 21 They are client-side checks!
  • 22.
    © 2017 Synopsys,Inc. 22 Static Code Analysis and Review Methods Let’s walk the tree
  • 23.
    © 2017 Synopsys,Inc. 23 Static Analysis • Manual Code Review is painful and can be boring if you have millions of lines to look at • The term is commonly used to describe the automated process of reviewing the code using Static Code Analysis (SCA) • Usually carried out at the implementation phase of a Software Development Life Cycle (SDLC)
  • 24.
    © 2017 Synopsys,Inc. 24 Static Analysis • It helps identify: – Security vulnerabilities introduced due to coding errors – Security vulnerabilities deliberately introduced in source code
  • 25.
    © 2017 Synopsys,Inc. 25 Source Code Tokens Lex Parse Semantics Abstract Syntax Tree Walk the tree Static Analysis Process Recommended - https://www.youtube.com/watch?v=DE18fHyZ0GI https://interpreterbook.com/ http://astexplorer.net http://resources.jointjs.com/demos/javascript-ast
  • 26.
    © 2017 Synopsys,Inc. 26 Challenges with JavaScript Code Analysis • JavaScript is an object-based prototypal language, which can be dynamically changed at run- time • Every JavaScript object has a prototype object, which can be overridden to do something different:
  • 27.
    © 2017 Synopsys,Inc. 27 Variables of JavaScript Can Contain Different Types
  • 28.
    © 2017 Synopsys,Inc. 28 In addition, JavaScript Has Type Coercion • Type Coercion converts one type of object to a new object with similar content, but of a different type
  • 29.
    © 2017 Synopsys,Inc. 29 JavaScript Has Higher Order Functions • Higher-order functions can take another function as an argument
  • 30.
    © 2017 Synopsys,Inc. 30 JavaScript By Default Is Forgiving • Strongly Typed JavaScript frameworks to created to make developer lives easier • Strongly typed JavaScript === less bugs
  • 31.
    © 2017 Synopsys,Inc. 31 New Languages and Features • Everyone wants to invent their own way of building modern applications • GWT - Java to JavaScript • TypeScript – Typed JavaScript to JavaScript • Pyscript – Python to JavaScript • FunScript – FSharp to JavaScript • More - http://todomvc.com • The support is low for automated code scanning against these frameworks • Strongly Typed JavaScript is transpiled to JavaScript before interpreted • Issues can be identified in the JavaScript code, but need to be mapped back to the problem location • New features such as ES6/7/8 require updates to the static analysis process
  • 32.
    © 2017 Synopsys,Inc. 32 Data Flow Analysis Explaining Sources and Sinks in JavaScript • Dynamic Execution of JavaScript • AngularJS XSS
  • 33.
    © 2017 Synopsys,Inc. 33 Commercial products that perform JavaScript data flow analysis: • Coverity • Fortify • Checkmarx • AppScan Source • VeraCode Tools that look for known issues in JavaScript libraries: • Retire.js • NSP • Snyk Tools that look for areas of interest: • Burp Passive Scanner • ScanJS (Deprecated) • JSHint • JSLint • ESLint Tools that deobfuscate JavaScript: Closure Compiler JStillery Use what works for you JavaScript Static Analysis Tools
  • 34.
    © 2017 Synopsys,Inc. 34 ESLint • ESLint is an open-source pluggable linting utility for JavaScript • Linters parse ASTs to identify code quality and security issues • ESLint was created was to allow developers to enforce rules • Can be hooked into the development release cycle – Many developers do not allow code to be pushed with ESLint issues flagged – You can create Git Hooks – Can be part of CI/CD pipeline • Allows custom rules to enforce domain specific guidance
  • 35.
    © 2017 Synopsys,Inc. 35 ESLint • ESLint is now the go-to tool to JavaScript developers https://stateofjs.com/2017/other-tools/
  • 36.
    © 2017 Synopsys,Inc. 36 ESLint Security Rules • ESLint can help security consultants look for points of interest • Default security rule configs – NodeJS https://github.com/nodesecurity/eslint-config-nodesecurity – VanillaJS https://github.com/mozfreddyb/eslint-config-scanjs – AngularJS https://github.com/LewisArdern/eslint-config-angular-security – React https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules • Security rules – eslint-plugin-scanjs – eslint-plugin-security – eslint-plugin-react – eslint-plugin-angular-security – eslint-plugin-no-wildcard-postmessage – eslint-plugin-no-unsafe-innerhtml
  • 37.
    © 2017 Synopsys,Inc. 37 Problem: In AngularJS security assessments I want to identify problem locations quickly Solution: Create ESLint rules to run on every assessment as a starting point: • Current – Basic rules to identify points of interest – Identifies: – Security Misconfigurations – Expression Injection – Client-Side Open-Redirection • Roadmap: – More rules – Angular 2/4 support to come – Maintain state of variable declarations – Improve the rules to only identify actual issues Creating Your Own Rules
  • 38.
    © 2017 Synopsys,Inc. 38 • Create a test with true positive and false positive • Walk the JavaScript AST and identify your requirements • Create a rule from the AST output • Make sure the test passes Steps To Create a Rule
  • 39.
    © 2017 Synopsys,Inc. 39 Creating a Test
  • 40.
    © 2017 Synopsys,Inc. 40 Identifying The Requirements
  • 41.
    © 2017 Synopsys,Inc. 41 Create The Rule
  • 42.
    © 2017 Synopsys,Inc. 42 ESLint Demo Capturing points of interest on AngularJS
  • 43.
    © 2017 Synopsys,Inc. 43 Summary • JavaScript is a wonderful and weird language • Learn types of issues well, to be able to detect them easier • You have to be concerned of JavaScript on the Client and the Server • Learning the underlying process of static analysis can help you identify issues easier and quicker • Use and extend tools but do NOT rely on them
  • 44.