Gleb Bahmutov

@bahmutov

github.com/bahmutov

slides.com/bahmutov

Conferences: ng-conf, AngularConnect 2016, etc.

I write things down

glebbahmutov.com/blog

@bahmutov

- "Unit testing AngularJS code in record time"

- "Stop (silent) Angular (name) overrides"

- "Improving Angular web app performance"

@bahmutov

Work at Kensho

A DATA ANALYTICS AND MACHINE INTELLIGENCE COMPANY

Boston / NYC

Work at Kensho

A DATA ANALYTICS AND MACHINE INTELLIGENCE COMPANY

What happens to the value of X when Y happens?

@bahmutov

The Keynote was like

source: SimCity: Cities of the Future expansion

@bahmutov

This presentation is like

Source: Uruk (modern Iraq)

time

today

Presentation timeline

The Theme

Security is compromised when there is mismatch of expectations between two parts of the system

@bahmutov

Example

Database code assumes user email has been validated and sanitized

sqlCommand('SELECT * FROM USERS WHERE email=' + email)

@bahmutov

Example

Website code assumes database code checks the email in secure fashion

sqlCommand('SELECT * FROM USERS WHERE email=' + email)

https://mysite.com/user?email=joe@mysite.com

Example

Mismatch of expectations between the website and database systems

// the input data has been sanitized and can be trusted

// I expect SQL library to guard against invalid inputs

Injection attack

2013 uTest (now Applause)

Mobile test + crash + App Store data = profit

@bahmutov

@bahmutov

Current rating: 2.5

+ performance improvements

= 4.5

@bahmutov

Let us build a dashboard!

• Angular 1

• Node

• various data sources

• multiple audiences

@bahmutov

Designer

Mockups

Balsamiq mockup https://balsamiq.com/products/mockups/

Business idea: export mockups as web components

Balsamiq mockup https://balsamiq.com/products/mockups/

Complex state and REST are saving our jobs, people!

Balsamiq mockup https://balsamiq.com/products/mockups/

Pixel pushing

Lorem ipsum dolor sit amet, esse deseruisse dissentias et duo, in tantas putant urbanitas nam. Per dicant copiosae ea, duo ex omnesque copiosae. In rebum zril integre mea, an zril ornatus disputando pri. Mei at laudem ceteros, vidisse electram intellegam mel an, amet consul qui eu. Vix id melius consetetur, nam ea congue legimus oportere. Vim ne fastidii volutpat salutatus, nulla ludus at duo.

@bahmutov

Hue / Saturation / Value

http://paletton.com/

@bahmutov

Hue / Saturation / Value

value

dark

light

http://paletton.com/

@bahmutov

Designer: red!

bold! white space!

@bahmutov

Color pushing

Lorem ipsum dolor sit amet, esse deseruisse dissentias et duo, in tantas putant urbanitas nam. Per dicant copiosae ea, duo ex omnesque copiosae. In rebum zril integre mea, an zril ornatus disputando pri. Mei at laudem ceteros, vidisse electram intellegam mel an, amet consul qui eu. Vix id melius consetetur, nam ea congue legimus oportere. Vim ne fastidii volutpat salutatus, nulla ludus at duo.

This background?

@bahmutov

Color pushing

Lorem ipsum dolor sit amet, esse deseruisse dissentias et duo, in tantas putant urbanitas nam. Per dicant copiosae ea, duo ex omnesque copiosae. In rebum zril integre mea, an zril ornatus disputando pri. Mei at laudem ceteros, vidisse electram intellegam mel an, amet consul qui eu. Vix id melius consetetur, nam ea congue legimus oportere. Vim ne fastidii volutpat salutatus, nulla ludus at duo.

Or this background?

@bahmutov

Color pushing

Lorem ipsum dolor sit amet, esse deseruisse dissentias et duo, in tantas putant urbanitas nam. Per dicant copiosae ea, duo ex omnesque copiosae. In rebum zril integre mea, an zril ornatus disputando pri. Mei at laudem ceteros, vidisse electram intellegam mel an, amet consul qui eu. Vix id melius consetetur, nam ea congue legimus oportere. Vim ne fastidii volutpat salutatus, nulla ludus at duo.

#1e1e1e

#222222

@bahmutov

color swatch

AngularConnect with custom colors

@bahmutov

Color pushing by

• Sitting together with designer

• Designer running local deploy

• Something better?

@bahmutov

https://github.com/bahmutov/color-pusher

<!-- assumes jQuery / Bootstrap / Angular 1 -->
<link rel="stylesheet" href="color-pusher/dist/color-pusher.css">
<script src="color-pusher/dist/color-pusher.js"></script>

If you own the page

@bahmutov

load color-pusher via code snippet

If you do not control the page source

color-pusher demo

color-pusher widget

Requires changes to the page 👎

@bahmutov

color-pusher code snippet

DevTools, hard to update 👎

@bahmutov

color-pusher Chrome extension!

@bahmutov

color-pusher in Chrome store

@bahmutov

color-pusher DevTools panel

@bahmutov

Panels can be inspected just like other web apps in DevTools

@bahmutov

color-pusher extension

<link href="libs/bootstrap.min.css" rel="stylesheet" />
<link href="libs/color-pusher.css" rel="stylesheet" />
<link href="libs/angular-csp.css" rel="stylesheet" />
<link href="color-pusher-panel.css" rel="stylesheet" />

<script src="libs/jquery.min.js"></script>
<script src="libs/bootstrap.min.js"></script>
<script src="libs/angular.js"></script>
<script src="libs/color-pusher.js"></script>

<script src="color-pusher-panel.js"></script>

Note 1: where is the lib code?

color-pusher extension

<link href="https://maxcdn.../font-awesome.min.css"
    rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.1.0.min.js">
</script>

Can load resources from https, blob, filesystem, http://localhost

@bahmutov

Extension docs

https://developer.chrome.com/extensions/contentSecurityPolicy

Currently, we allow whitelisting origins with the following schemes: blob, filesystem, https, chrome-extension, and chrome-extension-resource.

@bahmutov

Security rule 1

Whitelisting good behavior works. Blacklisting all possible bad behavior does not.

@bahmutov

Example: make a list of trusted websites

@bahmutov

Allowing only secure resources (https, wss) is a simple whitelisting rule

@bahmutov

Insecure features are cut

No data from JSONP http

var url = 'http://www.colourlovers.com/api/palette/' 
  + $scope.paletteId
var options = {
  url: url,
  params: {
    format: 'json',
    jsonCallback: 'JSON_CALLBACK'
  }
}
$http.jsonp(url, options)

@bahmutov

Why does JSONP exist?

@bahmutov

source: http://www.summitpost.org/

WWW

1989

2000

2004

2006

Remember: Internet is like Rome

@bahmutov

https://www.nostarch.com/tangledweb.htm

Read this book

@bahmutov

color-pusher extension

Note 2: ng-csp

<!DOCTYPE html>
<html ng-csp ng-app="color-pusher-panel">
 ...
</html>

@bahmutov

Quick definitions

Inline script

<script>
alert('foo')
</script>

<button onclick="alert('foo')">Click</button>

@bahmutov

Quick definitions

External script

<script src="lib/foo.js"></script>
<script src="https://whatever.com/foo.js"></script>

@bahmutov

Quick definitions

Inline style

<style>
h1 { color: red }
</style>

<button style="color: red">Click</button>

@bahmutov

Quick definitions

External style

<link rel="stylesheet" href="lib/app.css">
<link rel="stylesheet" 
    href="https://whatever.com/app.css">

@bahmutov

https://docs.angularjs.org/api/ng/directive/ngCsp

Chrome Extension DevTools Panel runs in Content Security Policy (CSP) mode

@bahmutov

Angular 1 creates inline style tag

@bahmutov

<!DOCTYPE html>
<html ng-csp ng-app="color-pusher-panel">
<link href="libs/angular-csp.css" rel="stylesheet" />
<script src="libs/angular.js"></script>
</html>

Angular 1 in locked down CSP mode

Note: ng-csp mode can make $parse service 30% slower

no eval used

@bahmutov

What if a tree's password is stolen in the forest and no one hears it?

@bahmutov

@bahmutov

Open Web Application Security Project (OWASP)

Top 10 security threats

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

@bahmutov

1. Injection
2. Authentication / session
3. Cross-site scripting (XSS)
4. Direct object reference
5. Security misconfiguration
6. Sensitive data exposure
7. Lack of access control
8. Cross-site request forgery (XSRF)
9. Insecure 3rd party code
10. Unvalidated redirects

https://www.owasp.org/index.php/Top_10_2013-Top_10

Top 10 attacks 2013

OWASP Top 10 free video course from PluralSight

@bahmutov

We will look at these 3 threats

1. Injection
2. Authentication / session
3. Cross-site scripting (XSS)
4. Direct object reference
5. Security misconfiguration
6. Sensitive data exposure
7. Lack of access control
8. Cross-site request forgery (XSRF)
9. Insecure 3rd party code
10. Unvalidated redirects

https://www.owasp.org/index.php/Top_10_2013-Top_10

Authentication / session

Who are you again?

An attacker impersonating a legitimate user can do a lot of damage

@bahmutov

Common problems

User authentication token is sent via insecure connection

@bahmutov

https* SSL can be tricky

https://www.ssllabs.com/ssltest

@bahmutov

Old and weak SSL ciphers

nginx config from https://weakdh.org/sysadmin.html

# put strong ciphers first
# ban weak ciphers at the end
ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:!CAMELLIA:!DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA';

@bahmutov

SSL part way

http://bahmutov.github.io

https://glebbahmutov.com

GitHub pages

CloudFlare

@bahmutov

Insecure auth token storage

Auth cookie not marked "httpOnly" and "secure"

@bahmutov

General advice

Leave password management and authentication to the professionals

@bahmutov

Cross-site scripting (XSS)

Is this code or data?

Attacker's input is treated as trusted code and is executed when another user views the website

www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet

@bahmutov

Name:

@bahmutov

Name:

<span>{{ name }}<span>

@bahmutov

innerText or innerHTML?

Direct text or escaped?    ">" or "&gt;"

@bahmutov

innerText or innerHTML?

Dangerous, but has styling, elements, etc

@bahmutov

My Site

My content

User comments

Ads, etc

<script>stealStuff()</script>

http://excess-xss.com/

@bahmutov

Will a script embedded in the user-entered content be executed (for another user)?

@bahmutov

Story time: how bad things happen to good people

@bahmutov

// server
const app = koa()
app.use(function * () {
  this.render('index.jade', {
    greeting: 'Hello world'
  })
})

// Jade template
doctype html
html(lang="en")
  head
    title Example
  body
    h1 #{greeting}

@bahmutov

<body>
  <h1>Hello world</h1>
</body>

@bahmutov

// server
const app = koa()
app.use(function * () {
  this.render('index.jade', {
    greeting: '<script>alert("1");</script>'
  })
})

// Jade template
doctype html
html(lang="en")
  head
    title Example
  body
    h1 #{greeting}

Jade variables are HTML escaped by default

@bahmutov

<body>
 <h1>&lt;script&gt;alert(&quot;1&quot;);&lt;/script&gt;</h1>
</body>

@bahmutov

// server
const app = koa()
app.use(function * () {
  this.render('index.jade', {
    greeting: '{{ a + b }}'
  })
})

// Jade template
doctype html
html(lang="en")
  head
    title Example
  body
    h1 #{greeting}

@bahmutov

<body>
 <h1>{{ a + b }}</h1>
</body>

@bahmutov

// server
const app = koa()
app.use(function * () {
  this.render('index.jade', {
    greeting: '{{ a + b }}'
  })
})

// Jade template
doctype html
html(lang="en")
  head
    script(src="https://code.angularjs.org/1.0.1/angular-1.0.1.js")
    title Example
  body(ng-app)
    h1 #{greeting}

@bahmutov

<body ng-app="" class="ng-scope">
    <h1 class="ng-binding">0</h1>
</body>

@bahmutov

"AngularJS better not execute {{ <script>...</script> }} tags or I will loose it!"

@bahmutov

AngularJS does NOT execute {{ <script>...</script> }} tags

@bahmutov

// server
const app = koa()
app.use(function * () {
  this.render('index.jade', {
    greeting: 'Hi {{constructor.constructor(\'alert(1)\')()}}'
  })
})

// Jade template
doctype html
html(lang="en")
  head
    script(src="https://code.angularjs.org/1.0.1/angular-1.0.1.js")
    title Example
  body(ng-app)
    h1 #{greeting}

@bahmutov

@bahmutov

Template is NOT in DOM

@bahmutov

Runs on every digest cycle

Mismatch between Jade, Angular, template strings and developer's expectations

@bahmutov

constructor.constructor

{{ eval('alert(42)') }} 
// does not work

@bahmutov

constructor.constructor

Need to get "Function" somehow

@bahmutov

Will never happen to me

Angular 1.0 edition

{{constructor.constructor('alert(1)')()}}

from: http://www.slideshare.net/x00mario/an-abusive-relationship-with-angularjs

@bahmutov

constructor.constructor

@bahmutov

angular 1.2.5 JavaScript code

@bahmutov

// Sandboxing Angular Expressions
// ------------------------------
// Angular expressions are generally considered safe because these expressions only have direct
// access to $scope and locals. However, one can obtain the ability to execute arbitrary JS code by
// obtaining a reference to native JS functions such as the Function constructor.
//
// As an example, consider the following Angular expression:
//
//   {}.toString.constructor(alert("evil JS code"))
//
// We want to prevent this type of access. For the sake of performance, during the lexing phase we
// disallow any "dotted" access to any member named "constructor".
//
// For reflective calls (a[b]) we check that the value of the lookup is not the Function constructor
// while evaluating the expression, which is a stronger but more expensive test. Since reflective
// calls are expensive anyway, this is not such a big deal compared to static dereferencing.
//
// This sandboxing technique is not perfect and doesn't aim to be. The goal is to prevent exploits
// against the expression language, but not to prevent exploits that were enabled by exposing
// sensitive JavaScript or browser apis on Scope. Exposing such objects on a Scope is never a good
// practice and therefore we are not even trying to protect against interaction with an object
// explicitly exposed in this way.
//
// A developer could foil the name check by aliasing the Function constructor under a different
// name on the scope.
//
// In general, it is not possible to access a Window object from an angular expression unless a
// window or some DOM object that has a reference to window is published onto a Scope.

Angular expressions are generally considered safe

Blacklisting and setting high security expectations are difficult to pull off

@bahmutov

{{ (_=''.sub).call.call({}[$='constructor'].getOwnPropertyDescriptor ( _.__proto__,$).value,0,'alert(1)')() }}

from: http://www.slideshare.net/x00mario/an-abusive-relationship-with-angularjs

Will never happen to me

continued

works in Angular 1.2

@bahmutov

{{ objectPrototype = ({})[['__proto__']]; objectPrototype[['__defineSetter__']]('$parent', $root.$$postDigest); $root.$$listenerCount[['constructor']] = 0; $root.$$listeners = [].map; $root.$$listeners.indexOf = [].map.bind; functionPrototype = [].map[['__proto__']]; functionToString = functionPrototype.toString; functionPrototype.push = ({}).valueOf; functionPrototype.indexOf = [].map.bind; foo = $root.$on('constructor', null); functionPrototype.toString = $root.$new; foo(); }} {{ functionPrototype.toString = functionToString; functionPrototype.indexOf = null; functionPrototype.push = null; $root.$$listeners = {}; baz ? 0 : $root.$$postDigestQueue[0]('alert(location)')(); baz = true;'' }} 

from: http://www.slideshare.net/x00mario/an-abusive-relationship-with-angularjs

Will never happen to me

for Angular 1.3

@bahmutov

{{ 'this is how you write a number properly. also, numbers are basically arrays.'; 0[['__proto__']].toString = [][['__proto__']].pop; 0[['__proto__']][0] = 'alert("TROLOLOLn"+document.location)'; 0[['__proto__']].length = 1; 'did you know that angularjs eval parses, then re-stringifies numbers? :)'; $root.$eval("x=0", $root); }}

from: http://www.slideshare.net/x00mario/an-abusive-relationship-with-angularjs

Will never happen to me

for Angular 1.4

@bahmutov

Searching for sandbox escapes

@bahmutov

Vue.js

The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use triple mustaches

http://vuejs.org/guide/syntax.html#Raw-HTML

Aurelia

http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/securing-your-app

@bahmutov

Angular 1.6

The Angular expression sandbox will be removed from Angular from 1.6 onwards, making the code faster, smaller and easier to maintain

http://angularjs.blogspot.com/2016/09/angular-16-expression-sandbox-removal.html

Expression Sandbox Removal

@bahmutov

Angular 1.6

 the existence of the sandbox only made some developers incorrectly believe that the expression sandbox protected them [from XSS attacks]

http://angularjs.blogspot.com/2016/09/angular-16-expression-sandbox-removal.html

Expression Sandbox Removal

@bahmutov

Solution: disable inline JavaScript

<body>
  <script>function willNotRun() {...}</script>
  <script src="assets/js/script.js"></script>
</body>

@bahmutov

Attacker (probably*) cannot change JavaScript on our server

@bahmutov

Disable inline JavaScript with Content-Security-Policy header

Content-Security-Policy:
  default-src 'self'; 
  script-src 'self' ajax.googleapis.com/angularjs/1.5.8/

Wide support for CSP (browsers, web apps)

https://cspvalidator.org/

@bahmutov

GitHub headers

$ curl -I https://github.com/
HTTP/1.1 200 OK
Server: GitHub.com
Date: Thu, 21 Jan 2016 00:23:13 GMT
Content-Type: text/html; charset=utf-8
Status: 200 OK
Cache-Control: no-cache
Vary: X-PJAX
X-UA-Compatible: IE=Edge,chrome=1
Set-Cookie: logged_in=no; domain=.github.com; path=/; expires=Mon, 21 Jan 2036 00:23:13 -0000; secure; HttpOnly
X-Request-Id: 49ac67736ceec9bf127572e7c42c8235
X-Runtime: 0.007182
Content-Security-Policy: default-src *; base-uri 'self'; 
connect-src 'self' live.github.com wss://live.github.com uploads.github.com status.github.com 
api.github.com www.google-analytics.com api.braintreegateway.com client-analytics.braintreegateway.com 
github-cloud.s3.amazonaws.com; font-src assets-cdn.github.com; form-action 'self' github.com 
gist.github.com; frame-src 'self' render.githubusercontent.com gist.github.com checkout.paypal.com; 
img-src 'self' data: assets-cdn.github.com identicons.github.com www.google-analytics.com 
checkout.paypal.com collector.githubapp.com *.githubusercontent.com *.gravatar.com *.wp.com; 
media-src 'none'; object-src assets-cdn.github.com; script-src assets-cdn.github.com; 
style-src 'self' 'unsafe-inline' 'unsafe-eval' assets-cdn.github.com
Strict-Transport-Security: max-age=31536000; includeSubdomains; preload
Public-Key-Pins: max-age=300; pin-sha256="WoiWRyIOVNa9ihaBciRSC7XHjliYS9VwUGOIud4PB18="; pin-sha256="JbQbUG5JMJUoI6brnx0x3vZF6jilxsapbXGVfjhN8Fg="; includeSubDomains
X-Content-Type-Options: nosniff
X-Frame-Options: deny
X-XSS-Protection: 1; mode=block
Vary: Accept-Encoding
X-Served-By: d0e230454cb69aa01d4f86fc3a57b17f
X-GitHub-Request-Id: AC552DBA:3AD3:FB489A:56A024F1

Disable inline JavaScript using meta tag

<meta http-equiv="Content-Security-Policy" 
    content="script-src 'self'; ....">

Wide support for CSP (browsers, web apps)

https://cspvalidator.org/

@bahmutov

// server
const app = koa()
app.use(function * () {
  this.render('index.jade', {
    greeting: 'Hi {{constructor.constructor(\'alert(1)\')()}}'
  })
})

// Jade template
doctype html
html(lang="en")
  head
    meta(http-equiv="Content-Security-Policy",
      content="script-src https://code.angularjs.org 'self';")
    script(src="https://code.angularjs.org/1.0.1/angular-1.0.1.js")
    title Example
  body(ng-app)
    h1 #{greeting}

Back to our example

Added

@bahmutov

@bahmutov

// server
const app = koa()
app.use(function * () {
  this.render('index.jade', {
    greeting: 'Hi {{40 + 2}}'
  })
})

Regular Angular expressions work with CSP

@bahmutov

app.get('/', function (req, reqs) {
  res.render('index', {
    title: 'Example',
    analyticsId: '4xy-0123456'
  });
});

Problems: Server-side templates:

Solution: render external JS

// analytics-config.js
var analyticsId = '4xy-0123456';

@bahmutov

js-to-js middleware

bahmutov/js-to-js

// views/config.js
module.exports = {
  analyticsId: 'default-id'
}
// server.js
var app = require('express')()
var jsToJs = require('js-to-js')
app.engine('js', jsToJs)

@bahmutov

js-to-js middleware

bahmutov/js-to-js

// js/config.js
var analyticsConfig = {
  "analyticsId": "4xx-xxxxx"
};

User receives

@bahmutov

js-to-js also wraps JS scripts (like Google Analytics)

view-source:http://angularconnect.com/

@bahmutov

Pass entire config at once

var jsToJs = require('js-to-js');
app.get('/js/config.js',
  jsToJs('demoConfig', { foo: 42, bar: 21 }));

@bahmutov

With a little help, Express/Hapi/... can send ZERO inline JavaScript

@bahmutov

CSP + Ng downsides

CSP Is Dead, Long Live CSP!

On the Insecurity of
Whitelists and the Future of Content Security Policy

https://static.googleusercontent.com/media/research.google.com/en//pubs/archive/45542.pdf

http://www.slideshare.net/x00mario/an-abusive-relationship-with-angularjs

@bahmutov

There are weird Angular template exploits that do not need "Function" or "eval" (bypassing CSP)

@bahmutov

The solution is a very strict user data validation against whitelist of rules

ngSanitize, DOMPurify

@bahmutov

CSP in WebWorkers

new Worker(URL.createObjectURL(blob))

uses CSP of the parent document

@bahmutov

CSP in WebWorkers

Bad news: this is CSP level 2 spec

https://content-security-policy.com/

http://caniuse.com/#feat=contentsecuritypolicy2

@bahmutov

XSS in ServiceWorker

If an attacker can load a malicious ServiceWorker

@bahmutov

XSS into ServiceWorker via JSONP :)

Discussed in this Chromium thread

https://bugs.chromium.org/p/chromium/issues/detail?id=422966

@bahmutov

Insecure 3rd party code

Just add one more library

Are you using a library with a known security vulnerability?

@bahmutov

Upgrade to safe version

nodesecurity.io

greenkeeper.io

next-update

@bahmutov

Using old versions is a technical debt and a security risk

@bahmutov

Insecure 3rd party code

We trust this library

Can an attacker change our server / web app code?

@bahmutov

If using CDN

Be sure CDN serves what you expect using Server Resource Integrity (SRI)

<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuA..."
        crossorigin="anonymous"></script>

Chrome & Firefox only http://caniuse.com/#feat=subresource-integrity

@bahmutov

If using NPM

A simple Node server example depends on > 100 modules

@bahmutov

NPM for server

webpack / browserify

loaders

gulp / grunt

build plugins

lint tools

Bower for web

jQuery

Angular

Bootstrap

App code

@bahmutov

NPM for server and web

webpack / browserify

jQuery

loaders

App code

Angular

gulp / grunt

Bootstrap

build plugins

lint tools

jade-angular-template-attack@1.0.0
├─┬ koa@1.2.0
│ ├─┬ accepts@1.3.2
│ │ └── negotiator@0.6.0
│ ├── co@4.6.0
│ ├─┬ composition@2.3.0
│ │ └── any-promise@1.1.0
│ ├── content-disposition@0.5.1
│ ├── content-type@1.0.1
│ ├─┬ cookies@0.6.1
...

npm list

@bahmutov

What if someone unpublished negotiator@0.6.0 and then published malicious code under negotiator@0.6.0?

@bahmutov

Kik-gate

@bahmutov

1. Guy has bunch of NPM modules including "kik" and "left-pad"
2. Company Kik asks him to release "kik" name from NPM registry
3. Guy refuses
4. Kik goes to NPM Registry Co and Co gives "kik" name to Kik
5. Guy gets angry and removes ALL his packages from NPM registry
6. Bunch of packages depend on "left-pad" and stop working
7. Guy #2 grabs the released names AND PUBLISHES his code under same names and versions
8. NPM Registry Co un-unpublishes original modules
9. NPM Registry co changes its "unpublishing policy"

@bahmutov

You cannot* unpublish after 24 hours

* "fs" unpublished and restored: http://status.npmjs.org/incidents/dw8cr1lwxkcr

New NPM policy

@bahmutov

If you push sensitive info to public GitHub or publish to NPM registry - it is out

Problem: Can someone publish under YOUR name?

@bahmutov

All major NPM projects has some sensitive information leaked

NPM auth token, GitHub tokens, passwords, SSH keys, etc

https://github.com/ChALkeR/notes/blob/master/Do-not-underestimate-credentials-leaks.md

@bahmutov

Solution = prevention

• Code and security reviews, checklists

• ban-sensitive-files NPM module

@bahmutov

Match expectations

ng1 docs.angularjs.org/guide/security

ng2 angular.io/docs/ts/latest/guide/security.html

@bahmutov

If you find a security flaw

ng1 security@angularjs.org 

ng2 security@angular.io 

node / npm package

  https://nodesecurity.io/report

@bahmutov

Review the boundary code periodically

(your) simple code is secure

@bahmutov

function f() {
  alert('foo')
}

@bahmutov

f``

@bahmutov

@bahmutov

ES6 - WAT?!

Shai Reznik says

@bahmutov

f`` - popup

@bahmutov

Detailed overview of well known symbols

ES6 Symbols - customize JS

1. @@iterator to make the object iterable
2. @@hasInstance to customize instanceof
3. @@toPrimitive to convert an object to a primitive
4. @@toStringTag to create the default description of an object
5. @@species to create derived objects
6. Create regular expression like objects: @@match, @@replace, @@search and @@split
7. @@isConcatSpreadable to flat an object to array elements
8. @@unscopables for properties accessibility within with

@bahmutov

Test262 is a JavaScript Sideshow

Mike Pennisi

https://bocoup.com/weblog/test262-is-a-javascript-sideshow

When we started extending Test262 to cover brand new language features, we knew we were in for some surprises. Even so, we never could have anticipated the horrors we would uncover.

Test262 is a JavaScript Sideshow

Mike Pennisi

https://bocoup.com/weblog/test262-is-a-javascript-sideshow

... However, these language features can sometimes interact in strange ways. ... All of it is valid JavaScript, ... None of it would be accepted in a code review.