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. Classification: Public
A Primer in
Single Page Application Security
Thomas Konrad, SBA Research
SBA Research gGmbH, 2020

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. Classification: Public 4
Popular SPA Frameworks
SBA Research gGmbH, 2020

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. Classification: Public 6
SPA Security Concerns Tag Cloud
SBA Research gGmbH, 2020
CORS
Outdated Libraries
Server-side Template Injection
CSRF
Authentication
Transport Security

7. Classification: Public 7
Cross-Site Scripting (XSS)
And its relation to Single Page Application frameworks
SBA Research gGmbH, 2020

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Classification: Public 21
Trusted Types: Browser Support
SBA Research gGmbH, 2020

22. Classification: Public 22
Trusted Types: Angular
SBA Research gGmbH, 2020

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. Classification: Public 24
Outdated Libraries
And approaches to get them under control
SBA Research gGmbH, 2020

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. Classification: Public 26SBA Research gGmbH, 2020
https://angular.io/guide/setup-local

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. 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. 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. Classification: Public 30
A Few More Things
Transport Security, CSRF, CORS, Server-side Template
Injection, WebSockets
SBA Research gGmbH, 2020

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. 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. Classification: Public 33
Photo by Emily Morter on Unsplash
Follow me on Twitter! @_thomaskonradFollow me on Twitter! @_thomaskonrad

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. 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. 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/