Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SBA Live Academy: A Primer in Single Page Application Security by Thomas Konrad

58 views

Published on

Target Audience: Everyone involved in software development (developers and team leaders in software-oriented companies)
Focus: technical
Talk language: English

Abstract
**********
Single Page Application frameworks have brought us a boost in clean application architecture and also security, mainly because of a better separation of concerns. But using an SPA framework alone does not automatically get you bullet-proof security. There is still a lot to look out for, and, for example, XSS is not a fully solved problem yet. In this talk, we’ll explore the most important security pitfalls SPA frameworks and how to solve them. We’ll also compare some of the security features of the most common SPA frameworks Angular, React and Vue.js.

About the Speaker:
*********************
Thomas Konrad is Principal Security Consultant at SBA Research and has been part of software security team since 2010. He focuses on secure software development, web application security, penetration testing, secure software design, architecture, and process, and trains software development teams in those areas.

Published in: Technology
  • Be the first to comment

SBA Live Academy: A Primer in Single Page Application Security by Thomas Konrad

  1. 1. Classification: Public Welcome to the SBA Live Academy #bleibdaheim #remotelearning Today: A Primer in Single Page Application Security by Thomas Konrad You are automatically muted by entry, please use the chat for interacting with us. This talk will be recorded as soon as the presentation starts! Recording will end BEFORE the Q&A Session starts.
  2. 2. Classification: Public A Primer in Single Page Application Security Thomas Konrad, SBA Research SBA Research gGmbH, 2020
  3. 3. Classification: Public 3 What are Single Page Applications? SBA Research gGmbH, 2020 Imagesource:https://dotcms.com/blog/post/what-is-a- single-page-application-and-should-you-use-one-
  4. 4. Classification: Public 4 Popular SPA Frameworks SBA Research gGmbH, 2020
  5. 5. Classification: Public 5 SPAs: Advantages • Speed • Re-use of APIs • Offline app usage (PWA) • Separation of Concerns • Security. • But! SBA Research gGmbH, 2020 Imagesource:https://dotcms.com/blog/post/what-is-a- single-page-application-and-should-you-use-one-
  6. 6. Classification: Public 6 SPA Security Concerns Tag Cloud SBA Research gGmbH, 2020 CORS Outdated Libraries Server-side Template Injection CSRF Authentication Transport Security
  7. 7. Classification: Public 7 Cross-Site Scripting (XSS) And its relation to Single Page Application frameworks SBA Research gGmbH, 2020
  8. 8. Classification: Public 8 SPAs and XSS? SPA XSS = DOM XSS Easy to introduce, hard to detect SBA Research gGmbH, 2020 https://www.youtube.com/watch?v=H_XDL1juAkQ
  9. 9. Classification: Public 9 DOM XSS: A Basic Example • User-controlled input • DOM XSS sink SBA Research gGmbH, 2020 <script> var x = window.location.hash; document.querySelector('#el').innerHTML = x; </script> <script> var x = window.location.hash; document.querySelector('#el').innerHTML = x; </script> https://example.com/#<img src=x onerror=alert(1)/>https://example.com/#<img src=x onerror=alert(1)/>
  10. 10. Classification: Public 10 The DOM Is A Mess: XSS Sinks SBA Research gGmbH, 2020 Imagesource:https://www.youtube.com/watch?v=vYA81UAExKA https://github.com/wisec/domxsswiki/wiki
  11. 11. Classification: Public 11 SPAs, innerHTML and XSS SBA Research gGmbH, 2020 <span [innerHTML]="html"></span><span [innerHTML]="html"></span> Angular sanitizes this! <span dangerouslySetInnerHTML={html}></span><span dangerouslySetInnerHTML={html}></span> Makes you fear! <span v-html="html"></span><span v-html="html"></span> Makes you feel safe! const html = '<img src=x onerror=alert(1)/>';const html = '<img src=x onerror=alert(1)/>';Input: <img src=x />
  12. 12. Classification: Public 12 SPAs, href and XSS SBA Research gGmbH, 2020 <a [href]="link">Click</a><a [href]="link">Click</a> Angular sanitizes this! <a href={link}>Click</a><a href={link}>Click</a> <a :href="link">Click</a><a :href="link">Click</a> Makes you feel safe! const link = 'javascript:alert(1)';const link = 'javascript:alert(1)';Input: Makes you feel safe! unsafe:javascript:alert(1)
  13. 13. Classification: Public 13 DOMPurify SBA Research gGmbH, 2020 import createDOMPurify from 'dompurify'; const purify = createDOMPurify(); purify.sanitize('<img src=x onerror=alert(1)//>’); // becomes <img src="x"> purify.sanitize('<svg><g/onload=alert(2)//<p>'); // becomes <svg><g></g></svg> purify.sanitize('<p>abc<iframe//src=jAva&Tab;script:aler t(3)>def</p>’); // becomes <p>abcdef</p> import createDOMPurify from 'dompurify'; const purify = createDOMPurify(); purify.sanitize('<img src=x onerror=alert(1)//>’); // becomes <img src="x"> purify.sanitize('<svg><g/onload=alert(2)//<p>'); // becomes <svg><g></g></svg> purify.sanitize('<p>abc<iframe//src=jAva&Tab;script:aler t(3)>def</p>’); // becomes <p>abcdef</p> https://github.com/cure53/DOMPurify
  14. 14. Classification: Public 14 Limitations of the Angular Sanitizer • It is strict and does not allow e.g. style, custom tags, customization • Then people do this: SBA Research gGmbH, 2020 https://angular.io/guide/security#sanitization-and-security- contexts import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; @Pipe({ name: 'sainitizeHtml', pure: false }) export class sanitizeHtmlPipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) {} transform(content) { return this.sanitizer.bypassSecurityTrustHtml(content); } } import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; @Pipe({ name: 'sainitizeHtml', pure: false }) export class sanitizeHtmlPipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) {} transform(content) { return this.sanitizer.bypassSecurityTrustHtml(content); } } Don’t do this!
  15. 15. Classification: Public 15 Creating an Angular Pipe safeHtml SBA Research gGmbH, 2020 import createDOMPurify from 'dompurify'; @Pipe({ name: 'safeHtml'}) export class SafeHtmlPipe implements PipeTransform { private domPurify; constructor(private sanitized: DomSanitizer) { this.domPurify = createDOMPurify(); } transform(value) { return this.sanitized.bypassSecurityTrustHtml( this.domPurify.sanitize(value, { ADD_TAGS: ['custom-element'], // Explicitly allow this tag ADD_ATTR: ['x-data'] // Be careful with the style attribute! [1] [2] }) ); } } import createDOMPurify from 'dompurify'; @Pipe({ name: 'safeHtml'}) export class SafeHtmlPipe implements PipeTransform { private domPurify; constructor(private sanitized: DomSanitizer) { this.domPurify = createDOMPurify(); } transform(value) { return this.sanitized.bypassSecurityTrustHtml( this.domPurify.sanitize(value, { ADD_TAGS: ['custom-element'], // Explicitly allow this tag ADD_ATTR: ['x-data'] // Be careful with the style attribute! [1] [2] }) ); } } [1] https://code.google.com/archive/p/browsersec/wikis/Part1.wiki (see section „Cascading stylesheets“) [2] https://github.com/angular/angular/blob/master/packages/core/src/sanitization/style_sanitizer.ts
  16. 16. Classification: Public 16 Defense in Depth: Content Security Policy (CSP) • HTTP response header (or meta tag) • Created for reducing XSS risk • Whitelist for dynamic resources 2020 - SBA Research Content-Security-Policy: script-src 'self' cdn.example.com <script src="//cdn.example.com/jquery.min.js"></script> <script src="/js/app.js"></script> <script src="http://evil.com/pwnage.js"></script> Refused to load the script 'http://evil.com/pwnage.js' because it violates the following Content Security Policy directive: "script-src 'self' cdn.example.com".
  17. 17. Classification: Public 17 The Heart of CSP • By default, o inline scripts are prohibited, o eval() is prohibited, o setTimeout() and setInterval() with inline code are prohibited, o the Function() constructor is prohibited SBA Research gGmbH, 2020
  18. 18. Classification: Public 18 CSP and SPAs Are Friends If you go the happy path, there are no inline scripts! SBA Research gGmbH, 2020 <!DOCTYPE html> <html> <head> <title>My App</title> <link href=/js/app.4d3dc64c.js rel=preload as=script> <link href=/js/chunk-vendors.6cb936cb.js rel=preload as=script> <link href=/css/app.5a859f25.css rel=stylesheet> <link href=/css/chunk-vendors.87ee1366.css rel=stylesheet> </head> <body> <div id=app></div> <script src=/js/chunk-vendors.6cb936cb.js></script> <script src=/js/app.4d3dc64c.js></script> </body> </html> <!DOCTYPE html> <html> <head> <title>My App</title> <link href=/js/app.4d3dc64c.js rel=preload as=script> <link href=/js/chunk-vendors.6cb936cb.js rel=preload as=script> <link href=/css/app.5a859f25.css rel=stylesheet> <link href=/css/chunk-vendors.87ee1366.css rel=stylesheet> </head> <body> <div id=app></div> <script src=/js/chunk-vendors.6cb936cb.js></script> <script src=/js/app.4d3dc64c.js></script> </body> </html>
  19. 19. Classification: Public 19 The Future: Trusted Types • The idea o Don’t pass strings to DOM XSS sinks o Use objects instead o Make security decisions explicit o Strongly typed DOM API! SBA Research gGmbH, 2020 const el = document.createElement('div'); el.innerHTML = { toString: () => 'test' }; el.innerHTML; // "test" const el = document.createElement('div'); el.innerHTML = { toString: () => 'test' }; el.innerHTML; // "test"
  20. 20. Classification: Public 20 Trusted Types: CSP SBA Research gGmbH, 2020 Content-Security-Policy: trusted-types * const el = document.createElement('div'); el.innerHTML = '<img src=x onerror=alert(1)/>'; const el = document.createElement('div'); el.innerHTML = '<img src=x onerror=alert(1)/>';
  21. 21. Classification: Public 21 Trusted Types: Browser Support SBA Research gGmbH, 2020
  22. 22. Classification: Public 22 Trusted Types: Angular SBA Research gGmbH, 2020
  23. 23. Classification: Public 23 SPA Developer’s Checklist: XSS ❑ Follow the “happy path” wherever possible ❑ A.k.a. avoid DOM Kung-fu ❑ Blacklist common DOM XSS sinks via the linter ❑ If you process HTML, sanitize it with DOMPurify ❑ Use event handlers instead of dynamic href ❑ Never use non-trusted templates ❑ Use a sensible Content Security Policy SBA Research gGmbH, 2020
  24. 24. Classification: Public 24 Outdated Libraries And approaches to get them under control SBA Research gGmbH, 2020
  25. 25. Classification: Public 25 Angular Project with Router and SCSS SBA Research gGmbH, 2020 > cloc node_modules ------------------------------------------------------ Language files blank comment code ------------------------------------------------------ JavaScript 16214 171274 786507 3076493 JSON 1887 298 0 247588 Markdown 1628 73253 4 177074 TypeScript 3069 16591 128264 153548 HTML 227 13191 214 25464 CSS 135 380 2275 22039 > cloc node_modules ------------------------------------------------------ Language files blank comment code ------------------------------------------------------ JavaScript 16214 171274 786507 3076493 JSON 1887 298 0 247588 Markdown 1628 73253 4 177074 TypeScript 3069 16591 128264 153548 HTML 227 13191 214 25464 CSS 135 380 2275 22039 https://github.com/cure53/DOMPurify
  26. 26. Classification: Public 26SBA Research gGmbH, 2020 https://angular.io/guide/setup-local
  27. 27. Classification: Public 27 npm audit SBA Research gGmbH, 2020 > npm audit # ... found 81959 vulnerabilities (81914 low, 45 moderate) in 2120806 scanned packages run `npm audit fix` to fix 81624 of them. 335 vulnerabilities require manual review. See the full report for details. > npm audit # ... found 81959 vulnerabilities (81914 low, 45 moderate) in 2120806 scanned packages run `npm audit fix` to fix 81624 of them. 335 vulnerabilities require manual review. See the full report for details.
  28. 28. Classification: Public 28 Automate Dependency Checks! 1. Trigger them automatically on every git push 2. Fail the build! 3. Do it regularly even if no pushes happen! SBA Research gGmbH, 2020
  29. 29. Classification: Public 29 SPA Developer’s Checklist: Dependencies ❑ Choose your dependencies wisely ❑ Check your dependencies in an automated way ❑ Fail the build if there are severe vulnerabilities ❑ Run the check regularly even if there is no push ❑ Advanced ❑ Have a good test coverage ❑ A bot submits a pull request with updates ❑ Merge it automatically if tests are green SBA Research gGmbH, 2020
  30. 30. Classification: Public 30 A Few More Things Transport Security, CSRF, CORS, Server-side Template Injection, WebSockets SBA Research gGmbH, 2020
  31. 31. Classification: Public 31 SPA Developer’s Checklist: Multiple Topics ❑ Use TLS with Strict-Transport-Security and Preload! ❑ Use the SameSite Cookie flag or explicit auth against CSRF! ❑ Don’t use a * whitelist or Origin reflection for CORS! ❑ For WebSockets, check the Origin header on the server! ❑ Never render SPA templates dynamically on the server! SBA Research gGmbH, 2020
  32. 32. Classification: Public 32 Thomas Konrad SBA Research gGmbH Floragasse 7, 1040 Wien +43 664 889 272 17 tkonrad@sba-research.org @_thomaskonrad SBA Research gGmbH, 2020
  33. 33. Classification: Public 33 Photo by Emily Morter on Unsplash Follow me on Twitter! @_thomaskonradFollow me on Twitter! @_thomaskonrad
  34. 34. Classification: Public 34 Resources • Krzysztof Kotowicz on Trusted Types & the end of DOM XSS: https://youtu.be/vYA81UAExKA • Philippe De Ryck – Angular / OWASP Top 10 Cheat Sheet: https://pragmaticwebsecurity.com/files/cheatsheets/angularowasptop10.pdf • Philippe De Ryck – React XSS Avoidance Cheat Sheet: https://pragmaticwebsecurity.com/files/cheatsheets/reactxss.pdf • W3C GitHub repository on Trusted Types: https://github.com/w3c/webappsec-trusted-types • Anguar DOM Sanitizer docs: https://angular.io/api/platform-browser/DomSanitizer • React docs on dangerouslySetInnerHTML: https://reactjs.org/docs/dom- elements.html#dangerouslysetinnerhtml • Vue.js docs on security: https://vuejs.org/v2/guide/security.html • GitHub docs on Security Alerts: https://help.github.com/en/github/managing-security- vulnerabilities/about-security-alerts-for-vulnerable-dependencies • GitLab docs on Dependency Scanning: https://docs.gitlab.com/ee/user/application_security/dependency_scanning/ SBA Research gGmbH, 2020
  35. 35. Classification: Public 35 Professional Services Penetration Testing Architecture Reviews Security Audit Security Trainings Incident Response Readiness ISMS & ISO 27001 Consulting Bridging Science and Industry Applied Research Industrial Security | IIoT Security | Mathematics for Security Research | Machine Learning | Blockchain | Network Security | Sustainable Software Systems | Usable Security SBA Research Knowledge Transfer SBA Live Academy | sec4dev | Trainings | Events | Teaching | sbaPRIME Contact us: anfragen@sba-research.org
  36. 36. Classification: Public 36 #bleibdaheim #remotelearning Coming up @ SBA Live Academy Mi, 22. April, 13.00 Uhr, live Datenschutz Teil 1: Wozu Datenschutzgesetze? Gerald Sendera Join our Meetup group! https://www.meetup.com/Security-Meetup-by-SBA-Research/

×