Counter spells and the art of keeping you application safe

Emberconf 2017

An Engineer's guide to front-end security using Ember .

Transcript

1. counter-spells KEEPING YOUR APPLICATION SAFE and the art of
2. ENGINEER @ingridepure Hi! @ingride
4. IN WHICH I REALLY WISH I DON’T DIE
6. story time
7. 2008: first-ever Android device Google releases Chrome HTML 5 is introduced GIFAR attack - someone discovers a way to hide an executable jar in a GIF
8. 2012: IMA(G)JS - hide executable code in JPEG images
10. attacker script runs under Same-Origin browser permits scripts to access user data ( cookies )
11. yes, cats are planning to kill you or at least steal your identity and your money
12. [ the first rule of web security is to never ( ever! ) trust user-submitted data ]
13. moar story
14. 37 authors 190 commits to master 220 commits to all branches March 13, 2017 - March 20, 2017 892 file changes 5816 additions / 15584 deletions shipping to prod > 100times a day
15. Jun 2016: Ingrid starts working with Ember Ingrid has to fix an image uploading / real time preview issue without introducing an XSS vulnerability. Sep 2016: Ingrid has a backend and infra background, so she goes and decides to look more into it.
16. prepare for battle
17. [ know your enemy. ]
18. TL;DR USER INPUT SAME ORIGIN POLICY BROWSER SECURITY FEATURES CONTENT SECURITY POLICY HTML AS INPUT IN EMBER
19. GET http://myapp.com/list/all?search_term=coffee Results for coffee HTML HTTP
20. GET http://myapp.com/list/all?search_term=<img """><script>alert("mwahaha")</script>"> GET http://myapp.com/list/all?search_term=<img “""><script>document.cookie</script>"> reflected XSS
21. [ prepare your spells. ]
22. Ember HTML ESCAPING CONTENT SECURITY POLICY
23. Html Escaping Hypertextescaptus (hyper-text-ESC-aptus ) By default Ember's rendering layer escapes HTML H Use for protection against XSS
24. .js .hbs .html
25. https://gist.github.com/ingride
26. Content Security Policy SecuritasContentus (SECUR-itas-kontent-us ) New browser feature for mitigating XSS and data-injection attacks CSP Use to whitelist "safe" script hosts ember-cli-content-security-policy
27. Content-Security-Policy: script-src 'self' static.mysite.com HTTP Refused to load the script ‘http://pure-evil.com/evil.js' because it violates the following Content Security Policy directive: "script-src 'self' static.mysite.com”. HTML
28. https://github.com/rwjblue/ember-cli-content-security-policy use CSP v2 and V3 only hash-source and nonce-source for inline script support https://content-security-policy.com/
29. Controllers & Components htmlSafe() GOOD HELPERS
30. Avoid htmlSafe htmlTutusExpellus (html-tutus-expellus) S Never use directly on user input Use only with proper sanitization Your controller should not html Power up: contextual components
32. application.hbs card-component.hbs application.js
33. https://embermap.com/topics/contextual- components
34. application.hbs
35. application.hbs super-card-component.hbs
36. super-card-title-component.hbs super-card-body-component.hbs
37. application.hbs
38. Good Helpers BonumAuxilium (bonum-auxilium) GH Prefer updating the DOM over returning HTML
39. Em.Handlebars.Utils.escapeExpression (params[0]); sanitize user input: use htmlSafe to tell Ember it’s ok to display as HTML
40. use the DOM to create a text node set style attributes append the anchor child element return the the node
42. Templates {{{ HTML ESCAPING }}} target=‘_blank’
43. Avoid Triple Curlies TripliciCrispusExpellus (Tri-pli-ci-crispus ) using on direct user input can introduce vulnerabilities {{{ htmlSafe() for templates Mark HTML code as safe to execute
44. [ be deliberate and mindful about what you vouch for. ]
45. good helpers + contextual components = ♥
46. Thou Shall Noopen NoopenerNoreferrerExpellus (apertus-tour-expellus) N always use noopener AND noreferrer with target=‘_blank’
47. partial access to the linking page via the window.opener object. newly opened tab can change the window.opener.location to a phishing page some of the permissions are automatically negated by cross-domain restrictions, but window.location is fair game
49. https://github.com/rwjblue/ember-template-lint available in the latest version
50. Static analysers esLint regexp are evil watermarks are ♥
51. story time
52. [ before esLint there was… grep]
53. postBuild hook to get real-time feedback find + grep + regexp + wc to get the count compare the count against a static limit fail the build if numbers don’t match
54. [ regexp are like black magic. They're powerful & get the job done, but you also fear them and might have to sell your soul in the process ] [ regexp rage by ingride ]
55. EsLint BonumLintum (bonum-LINT-um) EL Introduce a line in the sand for blacklisted methods Use linters for real-time feedback in dev
56. esLint plugin with a custom rule that checks for blacklisted methods
58. esLint CLI + custom rule to get the count fail the build if errorCount > max allowed enable esLint cache for increased performance
60. from ♥ with [ blacklist methods addon coming soon]
61. [ consult with other wizards. ]
62. OWASP TOP 10 CROSS SITE SCRIPTING (XSS) Sensitive Data Exposure Information Disclosure Broken Authentication 
 & Session Management
63. Bug Bounties BugBeneficentia (BUGUS-eneficentia) B Great way to get experts to test your app
64. [ thank you. ] @ingridepure