JS Applications need to exchange data with Backend APIs running on domains other than your own – understanding the same origin policy CSP, CORS and postMessage. Talk held on Grill.js conference in Wroclaw, Poland on 2018-08-18.

1. Berlin, 2018-01-01
JavaScript Security
Mastering Cross Domain Communications
in complex JS applications
Grill.js Wrocław, 2018-08-18, 7pm
<thomas.witt@infopark.com>
@thomas_witt
linkedin.com/in/thomaswitt
Thomas Witt
Co-Founder

3. @thomas_witt

4. We're hiring!
Boston · Berlin · Wrocław

7. The Problem

8. JS Applications
need to exchange data with
Backend APIs
running on domains other than your own
SECURELY

9. Challange
Only load code from trusted origins,
don't execute malicious JS code,
don't let people steal your data.

10. Same Origin Policy
For security reasons, browsers restrict cross-
origin HTTP requests initiated from within
scripts.
For example, XMLHttpRequest and the Fetch
API follow the same-origin policy. This means
that a web application using those APIs can
only request HTTP resources from the same
origin the application was loaded from.
– https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
“

11. How to …
Exchange data
from JS applications with backend APIs

12. Two ways how to talk to other services
CORS postMessage

13. #1: CORS
Cross-Origin Resource Sharing

14. Same Origin Policy
A web application using those APIs can only
request HTTP resources from the same origin
the application was loaded from, unless the
response from the other origin includes
the right CORS headers.
– https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
“

15. The easy one:
Simple Requests

16. Simple GET request via CORS
var req = new XMLHttpRequest();
var url = 'http://bar.other/resources/public-data/';
function callOtherDomain() {
if(req) {
req.open('GET', url, true);
req.onreadystatechange = handler;
req.send();
}
}

17. Simple GET request via CORS
var req = new XMLHttpRequest();
var url = 'http://bar.other/resources/public-data/';
function callOtherDomain() {
if(req) {
req.open('GET', url, true);
req.onreadystatechange = handler;
req.send();
}
}
GET /resources/public-data/ HTTP/1.1
Origin: http://foo.example
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Client (foo.example) Server (bar.other)

18. The uglyness:
Preflight Requests
aka not-so-simple-requests

19. Preflighted POST request via CORS
var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/post-here/';
var body = '<?xml version="1.0"?><person><name>Thomas Witt</name></person>';
function callOtherDomain(){
if(invocation)
{
invocation.open('POST', url, true);
invocation.setRequestHeader('Content-Type', 'application/xml');
invocation.onreadystatechange = handler;
invocation.send(body);
}
}

20. Preflighted POST request via CORS - Overview
Client (foo.example) Server (bar.other)
OPTIONS /resources/post-here/ HTTP/1.1
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400
var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/post-here/';
var body = '<?xml version="1.0"?><person><name>Thomas Witt</name></person>';
function callOtherDomain(){
if(invocation)
{
invocation.open('POST', url, true);
invocation.setRequestHeader('Content-Type', 'application/xml');
invocation.onreadystatechange = handler;
invocation.send(body);
}
}
POST /resources/post-here/ HTTP/1.1
Content-Type: text/xml; charset=UTF-8
Origin: http://foo.example
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://foo.example
PreflightPhaseMainRequestPhase

21. For every new resource accessed,
a preflight request will be issued.

23. CORS Security
Introducing CSP

24. CORS vs CSP
CORS
CORS allows a server (bar.other) to give
permission to a site (foo.example) to read
(potentially private) data from a server
(bar.other), using the visitor's browser and
credentials.
CSP
CSP allows a site (foo.example) to prevent itself
from loading (potentially malicious) content
from unexpected sources (e.g. against XSS).
GET /resources/public-data/ HTTP/1.1
Origin: http://foo.example
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Content-Security-Policy: base-uri 'none'; default-
src 'self' 'unsafe-inline' data: https: wss:; object-
src 'none'; script-src 'self' https://beta-
api.scrivito.com; upgrade-insecure-requests;

25. 0,133%
of all 1M Alexa sites implement a CSP
June 2015, "CSP adoption: current status and future prospects", Ming Ying / Shu Qin Li

26. Example Response: www.scrivito.com (shortened)
HTTP/1.1 200 OK
Connection: keep-alive
Content-Encoding: gzip
Content-Security-Policy: base-uri 'none'; default-src 'self' 'unsafe-inline' data: https: wss:;
object-src 'none'; script-src 'self' https://assets.scrivito.com https://beta-api.scrivito.com https://
maps.googleapis.com https://www.google-analytics.com; upgrade-insecure-requests;
Content-Type: text/html; charset=UTF-8
Date: Wed, 18 Aug 2018 19:00:00 GMT

27. Implementation
A closer look

28. CSP Directives
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
<script>
<img>
<link rel="stylesheet"> <style>
<audio> <video>
<iframe>
@font-face
WebSocket, XMLHttpRequest, EventSource
<embed> <object>

29. script-src Values
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
self
unsafe-inline
unsafe-eval
*
none
my.url.com
<script src="/public/mylib.js" />
<script>
alert('Hello JavaScript!');
</script>
setTimeout();
eval();
All of it
None of it
Space-separated (*.js.com | api.js.com | https: | https://api.js.com | data:)

30. Examples
default-src 'none';

31. Examples
default-src *;

32. Examples
default-src 'self';

33. Our typical CSP
Content-Security-Policy:
base-uri 'none';
default-src 'self' https: wss:;
script-src 'self'
https://api.scrivito.com
https://assets.scrivito.com
https://www.google-analytics.com
https://maps.googleapis.com
https://whatever.service.you.need.com;
object-src 'none';
upgrade-insecure-requests;

34. CSP Key Takeaways

35. Every JavaScript application
should have a CSP.

36. It will most likely break your site
At the first try

37. script-src is most important

38. Always set default-src

39. Test it!

40. CSP v1 Browser Support
https://caniuse.com/#search=csp

41. CSP - further reading
developer.mozilla.org/docs/Web/HTTP/CSP
content-security-policy.com
csp-evaluator.withgoogle.com
cspvalidator.org
caniuse.com/#feat=contentsecuritypolicy

42. #2: postMessage
via iFrame

43. Cross-domain communication via window.postMessage
<iframe name="receiver"
src="https://bar.other/my.js">
<script>
let win = window.frames.receiver;
win.postMessage("message",
"https://bar.other");
</script>
window.addEventListener("message",
function(event) {
if (event.origin !=
'https://foo.example') {
// Unknown domain? Ignore!
return;
}
alert( "Rcvd: " + event.data );
});
Sender (foo.example) Receiver (bar.other)

44. That's it

45. window.postMessage vs CORS/CSP
Advantages
CORS is not very simple, postMessage is
No pre-flight requests
No need to modify HTTP headers
Not convinced?
Google uses it as well in it's Google API JS SDK
<iframe name="receiver"
src="https://bar.other/my.js">
<script>
let win = window.frames.receiver;
win.postMessage("message",
"https://bar.other");
</script>
window.addEventListener("message",
function(event) {
if (event.origin !=
'https://foo.example') {
// Unknown domain? Ignore!
return;
}
alert( "Rcvd: " + event.data );
});

46. window.postMessage Security
Security caveats
No side can figure out whether malicious code
has been inserted via XSS!
Check-List
Does the browser support postMessage?
Is the message origin correct and known?
Is the message data sanitized and validated?
Are origins matched using strict equality
(no indexOf(".foo.com") > 0)?
Are messages sent without using wildcards in the
origin?
<iframe name="receiver"
src="https://bar.other/my.js">
<script>
let win = window.frames.receiver;
win.postMessage("message",
"https://bar.other");
</script>
window.addEventListener("message",
function(event) {
if (event.origin !=
'https://foo.example') {
// Unknown domain? Ignore!
return;
}
alert( "Rcvd: " + event.data );
});

47. Bonus Tip:
github.com/jpillora/xdomain

48. Xdomain
A pure JavaScript CORS alternative.
No server configuration required - just add a
proxy.html on the domain you wish to
communicate with.
– https://github.com/jpillora/xdomain
“

49. window.postMessage - further reading
developer.mozilla.org/docs/Web/API/Window/postMessage
seclab.stanford.edu/websec/frames/post-message.pdf
labs.detectify.com/2016/12/08/the-pitfalls-of-postmessage/
caniuse.com/#feat=x-doc-messaging

50. Summary

51. Always have a CSP!

52. Use postMessage instead of CORS
when implementing Cross Domain Communication.

53. There's one more thing…

54. Bonus Tip #2:
HSTS
(You use TLS, right?)

55. Example Response: www.scrivito.com
HTTP/1.1 200 OK
Age: 83186
Cache-Control: public, max-age=0, must-revalidate
Connection: keep-alive
Content-Encoding: gzip
Content-Length: 1313
Content-Security-Policy: base-uri 'none'; default-src 'self' 'unsafe-inline' data: https: wss:;
object-src 'none'; script-src 'self' https://assets.scrivito.com https://beta-api.scrivito.com https://
maps.googleapis.com https://www.google-analytics.com; upgrade-insecure-requests;
Content-Type: text/html; charset=UTF-8
Date: Wed, 15 Aug 2018 12:59:51 GMT
Etag: "7cbc5a14104f9d58b476b606e830533b-ssl-df"
Server: Netlify
Strict-Transport-Security: max-age=31536000
Vary: Accept-Encoding

56. We're hiring.
In Wroclaw!

57. Your questions?

58. Can I haz question, please?