Slide 1
Slide 1 text
Tangled World of Web Technology
― Are we safe? ―
Takashi Yoneuchi (@lmt_swallow, https://shift-js.info)
Slide 2
Slide 2 text
© 2018 shift-js.info All Rights Reserved.
@y0n3uchy
‣ 5BLBTIJ:POFVDIJ
‣ 6OEFSHSBEVBUFBU65PLZP
‣ KB!MNU@TXBMMPX
‣ EPEPEPEP $5'5FBN
J
‣ 8FC4FDVSJUZ3FTFBSDIFS
8BOOBCF
‣ IUUQTTIJGUKTJOGP
Slide 3
Slide 3 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Contents
‣ Goal: Learn and think the "Tangled World of Web
Technology" from the viewpoint of security.
‣ Overview
‣ Tangled World ?
‣ Case Studies
1. JS Libraries
2. Service Worker and Sandbox Domains
3. Content Security Policy
‣ What can we do in the Tangled World ?
3
Slide 4
Slide 4 text
Overview
Tangled World of Web Technology
Slide 5
Slide 5 text
Service
Worker
Web APIs
WebRTC
Indexed
DB
Push API
Vue.js
Frontend
React
Angular.js
Polymer
jQuery
Package
Manager
Laravel
k8s
Docker
API
Design
CSP
Suborigins
Clear-Site-
Data
Referrer
Policy
Mixed
Content
Security
Standards
Backend
Notificat
ion API
Slide 6
Slide 6 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Rethink Classical Vulns
6
Classical vulnerabilities are threats even now,
with new opportunities and patterns !
XSS CSRF
SQLi
With Service Worker With Script Gadgets
With CSP
Slide 7
Slide 7 text
Case Study 1:
JS Libraries
Slide 8
Slide 8 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
JS Libraries
‣ JavaScript is an essential component in modern
web frontend development.
‣ Especially, some JavaScript libraries such as React,
Vue.js, and AngularJS have gained popularity.
8
React: Copyright © 2018 Facebook Inc. https://reactjs.org, AngularJS: ©2010-2018 Google, https://angularjs.org, Vue.js: © 2014-2018 Evan You, https://vuejs.org
Slide 9
Slide 9 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Example: Vue.js
Declarative Rendering and v-html
9
{{ message }}
var app = new Vue({
el: '#app',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
‣ Declarative Rendering works without writing $(...) nor
document.getElementId() :-)
‣ If you'd like to modify innerHTML directly, v-html works.
Slide 10
Slide 10 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Example: Vue.js
Directives
10
Now you see me
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
‣ Vue.js gives you the power of v-* directives !
‣ v-for, v-on, v-bind, ...
Slide 11
Slide 11 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Rethink XSS
11
‣ Classical XSS still exists even in 2018 :-(
‣ Efforts have been made by browsers:
‣ XSS Filter
‣ Content-Security-Policy
‣ What changes have been made by the new techniques?
alert(1)
Slide 12
Slide 12 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
More Patterns
XSS with JS libraries
12
{{''.constructor.constructor('alert(1)')()}}
‣ Just only some tags such as and some
attributes such as src should be suspicious?
‣ The answer is NO.
‣ Even a <div> can be a XSS payload :-(
Slide 13
Slide 13 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
More Sources
XSS with JS libraries
13
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
Now you see me
‣ Additional attributes or properties introduced by libraries
supply more sources for DOM-Based XSS.
‣ e.g. v-* of Vue.js might be a source of eval or innerHTML.
Slide 14
Slide 14 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Mustache Injection
Examples of XSS with Vue.js
14
var app = new Vue({
el: '#app',
data: {
message: 'A message'
}
})
{{ message }}
{{this.$el.ownerDocument.defaultView.alert(1)}}
alert(1)
{{this.$el.ownerDocument.defaultView.alert(1)}}
Slide 15
Slide 15 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Mustache Injection
Examples of XSS with Vue.js
15
{{ ''.constructor.constructor("alert(1)")() }}
{{this.$el.ownerDocument.defaultView.alert(1)}}
‣ Server side and client-side templating have different contexts.
‣ {{ }} won't be escaped by ordinary escape functions for
HTML because it is not special in HTML.
‣ However, {{ }} has a meaning in Vue Template.
‣ Here you can see the difference of contexts :-)
Slide 16
Slide 16 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Injection into Directives
Examples of XSS with Vue.js
16
![]()
‣ Directives (e.g. v-on, v-show, v-if, v-for, v-bind, ...) evaluate
the given value :-(
‣ Vue markup in the HTML is a Vue template; it should be
kept in mind that they might be eval()-ed.
‣ Content Security Policy without unsafe-eval will prohibit
the use of such templates, but it needs us to use the
render function or pre-compile templates into it.
Slide 17
Slide 17 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Arbitrary VNode Injection
Examples of XSS with Vue.js
17
var title = {
domProps: {
innerHTML: ""
}
};
var app = new Vue({
el: "#app",
render: function(createElement) {
return createElement("h1", title);
}
});
Slide 18
Slide 18 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Some of Payloads I Found :-)
Examples of XSS with Vue.js
18
![]()
![]()
{{ ''.constructor.constructor("alert(1)")() }}
{{this.$el.ownerDocument.defaultView.alert(1)}}
Slide 19
Slide 19 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Arbitrary Props Injection
Examples of XSS with React
19
React.createElement("span", props);
‣ You should care about props injection.
‣ dangerouslySetInnerHTML controls innerHTML of the tag.
{
"dangerouslySetInnerHTML":{
"__html":""
}
}
Slide 20
Slide 20 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Injection to Specific Props
Examples of XSS with React
20
link
‣ Classical XSS is often overlooked :-(
javascript:alert(1)
red;background:red;
‣ The following works with ReactDOMServer.
‣ react-dom/server often causes problem like:
https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html#detailed-description
Slide 21
Slide 21 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Injection into SSR State
Examples of XSS with React (+ Redux)
21
https://github.com/reduxjs/redux/issues/1855
function renderFullPage(html, preloadedState) {
return `
Redux Universal Example
${html}
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
`
}
Slide 22
Slide 22 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Script Gadgets
‣ Breaking XSS mitigations via Script Gadgets
https://www.blackhat.com/docs/us-17/thursday/us-17-Lekies-Dont-Trust-The-DOM-
Bypassing-XSS-Mitigations-Via-Script-Gadgets.pdf
‣ Script Gadgets are defined as follows:
"Script Gadgets is an existing JS code on the page
that may be used to bypass mitigations."
‣ Here are PoCs for major JS libraries:
https://github.com/google/security-research-pocs/tree/master/script-gadgets
‣ XSS in the era of *.js - JS ϥΠϒϥϦ࣌ͷ XSS (θ
ϩ͔Β࢝ΊΔηΩϡϦςΟೖษڧձ #15)
https://speakerdeck.com/lmt_swallow/xss-in-the-era-of-star-dot-js-js-raiburarishi-dai-false-
xss-zerokarashi-merusekiyuriteiru-men-mian-qiang-hui-number-15
22
Slide 23
Slide 23 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Writeups in the real world
‣ Imgur - XSS via React element spoofing
https://hackerone.com/reports/124277
‣ Six Security Vulnerabilities learned from a Year of
HackerOne
https://flexport.engineering/six-vulnerabilities-from-a-year-of-hackerone-808d8bfa0014
‣ XSS in Google Colaboratory + CSP bypass
https://blog.bentkowski.info/2018/06/xss-in-google-colaboratory-csp-bypass.html
‣ [mercantile.wordpress.org] Reflected XSS via
AngularJS Template Injection
https://hackerone.com/reports/230234
23
Slide 24
Slide 24 text
Case Study 2:
Service Worker
Slide 25
Slide 25 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
ServiceWorker: Overview
25
Web Browser Service Worker
Cache
Network
JavaScript MIME Type
in Secure Context
Slide 26
Slide 26 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
ServiceWorker
" Service workers essentially act as proxy servers that
sit between web applications, the browser, and the
network (when available). "
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
26
‣ A replacement for Application Cache (AppCache)
‣ AppCache has some pitfalls :-(
‣ Use case
‣ Progressive Web Applications (PWA)
Slide 27
Slide 27 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
ServiceWorker: Scope
‣ Service Worker has a scope:
‣ if a scope is specified, it is the scope.
‣ if not, the parent directory of the JS is the scope.
27
// the scope is /path1
navigator.serviceWorker.register("/path1/sw.js");
// the scope is /path1
navigator.serviceWorker.register("/path1/sw.js", {scope: '/path1'});
// the scope is /path1/path2
navigator.serviceWorker.register("/path1/sw.js", {scope: '/path1/path2'});
// cannot be registered
navigator.serviceWorker.register("/path1/sw.js", {scope: '/path3'});
Slide 28
Slide 28 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Rethink XSS
‣ JS is registered by JS as Service Worker.
‣ ServiceWorker can control under the scope
‣ Requirements
‣ a XSS to register a Service Worker
‣ a JavaScript served with JS MIME type to be
registered as a Service Worker
‣ The wider scope will give attacks with Service
Worker more powerful
28
Slide 29
Slide 29 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Content Takeover
29
Web Browser Service Worker
GET /y0n3uchy/201808/11/uploadedfile
Host: sandbox.example.com
HTTP/1.1 200 OK
...
alert(1)
Network
Request
Response
Slide 30
Slide 30 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Hidden Path/Content Leakage
30
Web Browser Service Worker
(Works just as a proxy)
Network
GET /any/secret/path/like/tmpurl
Host: sandbox.example.com
SW can steal a secret path (& its content) silently :-)
Slide 31
Slide 31 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
JSONP
‣ A JSONP endpoint returns text/javascript :-)
‣ If an arbitrary JS code can be injected into the
callback function name, it can be a SW.
31
// /path/jsonp_endpoint?callback=[SW CODE HERE]
HTTP/1.1 200 OK
Content-Type: text/javascript; charset=UTF-8
...
[SW_CODE_HERE](...);
Slide 32
Slide 32 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Uploaded Files
Path
32
‣ Requirements:
‣ Content-Type
‣ Wide scope
‣ All developers should care about the followings:
‣ Where to store user-provided files
‣ Bad: /arbitraryname.js
‣ Good: /username/someid/somethingrandom.js
‣ Content-Type (SW should be served with JS MIME types)
Slide 33
Slide 33 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Uploaded Files
Sandbox Domains
‣ Web Origins for high-risk contents should be
isolated from the applications (e.g. user supplied files).
‣ Use "sandbox" domain for them.
‣ e.g. *.googleusercontent.com
‣ However, just sandboxing is not enough.
‣ Bad upload control may give powers XSS! X-(
‣ Be careful about the Content-Type & scope !
‣ If SW can work in / ... ?
33
Slide 34
Slide 34 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Further Reading
‣ ߈ܸऀࢹͰݟΔ Service Worker / PWA Study SW
(awesome presentation by @masatokinugawa written in Japanese )
@masatokinugawa, https://speakerdeck.com/masatokinugawa/pwa-study-sw
‣ OWASP AppSecEU 2018 – Attacking "Modern" Web
Technologies
@fransrosen, https://www.slideshare.net/fransrosen/attacking-modern-web-technologies
‣ Content hosting for the modern web
@SecurityMB, https://security.googleblog.com/2012/08/content-hosting-for-modern-
web.html
34
Slide 35
Slide 35 text
Case Study 3:
Content Security Policy
Slide 36
Slide 36 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Content Security Policy
36
"Content Security Policy (CSP) is an added layer of
security that helps to detect and mitigate certain types
of attacks, including Cross Site Scripting (XSS) and
data injection attacks."
( https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP )
‣ Roughly speaking, CSP describes the range of
resources that a web page can load and execute .
‣ e.g. img-src, script-src, ...
Slide 37
Slide 37 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
CSP: Overview
37
example.com
a.example.com b.example.com
HTTP/1.1 200 OK
Content-Security-Policy: script-src 'self'; img-src a.example.com
...
Slide 38
Slide 38 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Cross-Origin Redirection & CSP
38
HTTP/1.1 200 OK
Content-Security-Policy: script-src 'self' b.example.com
...
HTTP/1.1 302 FOUND
Location: https://b.example.com/test
...
https://example.com/test
https://example.com
HTTP/1.1 302 FOUND
Location: https://b.example.com/test
...
https://b.example.com/test
Slide 39
Slide 39 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Cross-Origin Redirection & CSP
39
HTTP/1.1 200 OK
Content-Security-Policy: script-src 'self' b.example.com
...
https://example.com
HTTP/1.1 302 FOUND
Location: https://b.example.com/test
...
https://b.example.com/test
A violation occurs when loading :-(
HTTP/1.1 302 FOUND
Location: https://b.example.com/test
...
https://example.com/test
Slide 40
Slide 40 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Detect Cross-Origin Redirection
With CSP
40
HTTP/1.1 200 OK
Content-Security-Policy: script-src origin1.example; report-uri /report
...
HTTP/1.1 302 FOUND
Location: https://origin2.example/
...
https://origin1.example
https://tester.example
HTTP/1.1 302 FOUND
Location: https://b.example.com/test
...
https://origin2.example
A violation occurs when loading :-(
A report will be sent.
=> tester.example can
detect a Cross-origin
redirection :-)
Slide 41
Slide 41 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Rethink the System Design
How does your web application work?
41
‣ An occurrence of a cross-origin redirection might
be observed by attackers.
‣ Here is an example:
‣ If the user is authenticated, return 302 to a
different origin.
‣ If the user is not authenticated or not logged in,
return 200 with authorization or login dialog.
‣ Umm, I'm afraid everyone knows such an
architecture
Slide 42
Slide 42 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Where do redirections occur?
Example: OAuth 2.0
42
Authorization Server
Client
User Agent
Authorize or deny
Return redirect_uri
Access with
redirect_uri
Slide 43
Slide 43 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Example: Facebook Login
If you have never authenticated an app?
43
https://www.facebook.com/v3.1/dialog
oauth?
client_id={app-id}
&redirect_uri={redirect-uri}
‣ HTTP/1.1 200 OK.
‣ No redirection occurs.
Slide 44
Slide 44 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Example: Facebook Login
If you have already authenticated an app and re-auth is enabled?
44
https://www.facebook.com/v3.1/dialog
oauth?
client_id={app-id}
&redirect_uri={redirect-uri}
‣ If the app needs
reauthentication?
‣ HTTP/1.1 200 OK.
‣ No redirection occurs.
Slide 45
Slide 45 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Example: Facebook Login
If you have already authenticated an app and re-auth is disabled?
45
https://www.facebook.com/v3.1/dialog
oauth?
client_id={app-id}
&redirect_uri={redirect-uri}
‣ If the app does not need
reauthentication?
‣ HTTP/1.1 302 FOUND.
‣ Here occurs a cross-
origin redirection!
‣ to redirect_uri
Slide 46
Slide 46 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
Further Reading
‣ Detect the Same-Origin Redirection with a bug in
Firefox's CSP Implementation
@y0n3uchy, https://diary.shift-js.info/csp-fingerprinting/
‣ Using Content-Security-Policy for Evil
@homakov, http://homakov.blogspot.com/2014/01/using-content-security-policy-for-
evil.html
‣ Content Security Policy Level 3
W3C, https://www.w3.org/TR/CSP3/
‣ CSP: Content Security Policy - The History and the
Future of CSP
@y0n3uchy, https://shift-js.info/publications/201711-CSP.pdf
46
Slide 47
Slide 47 text
What can we do
in the Tangled World ?
Slide 48
Slide 48 text
© 2018 shift-js.info
Tangled World of Web Technology ― Are we safe?
ALL WE CAN DO
‣
Follow the news and use it.
‣ e.g. Tweets of security (engineer|researcher)s.
‣ See who @y0n3uchy follows. :)
‣ Recommend: @intenttoship - browsrs
‣
Combine them with classical techniques.
‣ DO comprehensively and empirically.
‣
Share what you've found.
‣ An idea is often inspired by another; let us know
your findings :)
48
Slide 49
Slide 49 text
Thank you for
listening :-)
Any Questions?
Takashi Yoneuchi
ja: @lmt_swallow, en: @y0n3uchy
https://shift-js.info