Man-in-the-middle yourself: Debugging Production Web Apps

Learn how to debug JS web apps against production and various other environments by leveraging proxies. All this while security mechanisms like HTTPS, SOP, secure cookies and HSTS are in place. Man-in-the-middle yourself!

Transcript

1. Man-in-the-middle yourself: Debugging Production Web Apps Ben Ripkens
2. Ben Ripkens Lead Web Engineer – Instana
4. Debugging Production Web Apps Getting Informed About Problems of the JavaScript which is executed in our users’ browsers
7. TrackJS is on the right track not affiliated but lacks crucial source map features
8. undefined is not an object (evaluating 'r.get(\"data\").get(\"keyspaces\").sort) at render (index.js:1:32487) Error occurred at 2016-01-15T08:31:04.874Z So, which source map was deployed at
 that time on that machine?
10. At Instana we apply source maps automatically at the moment the error is reported and send reports to Slack
11. level: "error" logger: "in-component.Jail" serverTime: "2016-01-15T12:32:12.835Z" user: id: "569665348c5bea000d52e153" email: "ben@instana.com" version: revision: "7b7fa6ceb1960bdd5a139855e71f856dd75c90c6" date: "2016-01-15T08:31:04.874Z" url: “https://demo.instana.io/#/dashboard?pluginId=cassandraNode…” userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit…” platform: "MacIntel" error: message: "undefined is not an object (evaluating 'r.get(\"data\").get(\"keyspaces \").sort')" readableStack: - "at sort (webpack:///in-forge/cassandraNode/Dashboard/Content.es6:41:60)" - "at render (webpack:///~/react/lib/ReactCompositeComponent.js:767:0)" - "at _renderValidatedComponentWithoutOwnerOrContext (webpack:///~/react/lib/ ReactCompositeComponent.js:793:0)" - "at _renderValidatedComponent (webpack:///~/react/lib/ReactCompositeComponent.js: 227:0)" - "at rootID (webpack:///~/react/lib/ReactReconciler.js:38:0)" - "much more stuff…"
12. Objective: Fix issues before they are noticed by users
13. Debugging Production Web Apps Debugging and Fixing Code
14. remote debugging workflow try to get source maps to work endlessly navigate because code looks different realise that we cannot add code to verify assumptions try to fix code locally fail because we didn’t have access to production data
15. local development workflow Inspect Result Write Code Think
16. How can we align the
 remote debugging workflow
 with the local development workflow ?
17. 1. Use the same application version, 2. in the same configuration, 3. with the same data, 4. in the same browser, 5. on the same platform, 6. in the same environment. Debugging Workflow Requirements
18. 1. Use the same application version, 2. in the same configuration, 3. with the same data, 4. in the same browser, 5. on the same platform. Debugging Workflow Requirements
19. 1. Use the same application version, 2. in the same configuration, 3. with the same data. Debugging Workflow Requirements
20. $ curl https://demo.instana.io/build.json { "revision": "354b1c175759d4572b…", "version": "1.0.0-prerelease" } $ git checkout 354b1c175759d4572b… Use the version reported with the stack trace – or – 1. Use the same application version
21. Highly application specific – examples: 2. Use the same configuration 1. Environment variables 2. compilation modes 3. feature flags
22. Browser Local Dev Server Static Files
 XHR
 WebSocket 3. Use the same data
23. Browser Local Dev Server WebSocket
 XHR Webpack Static Files 3. Use the same data (contd.)
24. Browser Local Dev Server Proxy Static Files Webpack WebSocket / XHR 3. Use the same data (contd.) Man-In-the-Middle
25. Browser Component A
 (Local) Component B
 (Production) Component C
 (Production) 3. Use the same data (contd.)
26. Demo See examples in github.com/bripkens/proxrox
27. Looks complicated, but is actually easy to setup! $ npm install -g proxrox
 $ brew install nginx
 $ proxrox start .proxrox.yaml
28. port: 4000 # Port to bind to. root: target/ # Directory with static files. tls: true # Local HTTPS with self-signed cert. http2: true # Use HTTP 2 where possible. proxy: # Webpack dev server (local). /: http://127.0.0.1:3000 # Authentication system (production environment). /auth: https://instana.io # Error reporting endpoint (demo environment). /uiTracker/: http://demo.instana.io/, websocketProxy: # Data provider (demo environment). /api/data: http://demo.instana.io/api/data
29. 1. Use the same application version,
 git checkout!
 2. in the same configuration,
 Requires some work!
 3. with the same data.
 Use proxies! Conclusion
30. Debugging Production Web Apps Why We Need Proxies
31. HTTP Strict Transport Security Enforces HTTPS and optionally pins certificates { "name": "accounts.google.com", "include_subdomains": true, "mode": "force-https", "pins": "google" } Pinned certificates are almost
 impossible to work around Pinning Users
 Dropbox Facebook Google SpiderOak Tor Twitter Yahoo
32. Make your life easier – use proxies!
33. @BenRipkens bripkens.de THANK YOU! Real-time, next-gen monitoring
 instana.com
34. References • HSTS Preload List
 https://code.google.com/p/chromium/codesearch#chromium/ src/net/http/transport_security_state_static.json • DevTools: Disable HSTS for development purposes
 https://code.google.com/p/chromium/issues/detail? id=574345& • Proxrox
 https://github.com/bripkens/proxrox • StackOverflow: Disable same origin policy in Chrome
 http://stackoverflow.com/questions/3102819/disable-same- origin-policy-in-chrome