The presentation tells about performing cross domain ajax request. Subject included principles of preflight requests and limitations of cross origin resource sharing (CORS) policy. You will be able to find implementation examples for frontend (JavaScript, jQuery, AngularJS) and for backend (.Net, Ruby on Rails). Browser compatibility is covered in section ‘Limitation in IE 8,9‘ and there shown possible workarounds. And finally there are couple words about Content Security Policy – the latest approach in Web Application Security.

1. Web Security
Cookies, Domains and CORS
Perfectial, LLC
info@perfectial.com

2. What’s all about?
● Same-origin policy
● Cross domain requests use-cases
● Making requests with XHTTPRequest
● CSRF attacks
● Simple and not-so-simple requests
● Cross-domain limitations & Access Control
● Back-end implementation examples
● Limitation in Internet Explorer 8, 9
● Workarounds (proxy, JSONP)
● Content Security Policy

3. URL1 origin = URL2 origin ⇔
scheme, host and port are
equal
Exceptions:
• link
• img
• iframe
• object
• script
http://en.wikipedia.org/wiki/Same-origin_policy
http://
username:pass@
sub.domain.com
:8080
/folder/index.html
?id=42&action=add
#first-section
URI
↓
URL
scheme
authorization
host
port
path
query
fragment id
http://username:pass@sub.domain.com:8080/folder/index.html?id=42&actio
n=add#first-section
Same-origin
policy

4. • Share buttons
• Visitors analytics
• Advertisments
• Maps
• Payment systems
• REST API
• Shared services
Use cases

5. Requests with XHTTPRequest 2
Plain JavaScript
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", transferSuccessful, false);
xhr.open(method, url, async, user, password);
xhr.send(data);
//for compatibility with XHTTPRequest v1
xhr.onreadystatechange = function (req) {
if (req.readyState != 4) return;
if (req.status == 200 || req.status == 304) {
promise.success([req]);
} else {
promise.fail([req]);
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

6. Requests with XHTTPRequest 2 - Events
Plain JavaScript
var xhr = new XMLHttpRequest();
xhr.addEventListener("progress" , updateProgress , false);
xhr.addEventListener("error" , transferFailed , false);
xhr.addEventListener("abort" , transferCanceled , false);
xhr.addEventListener("load" , transferSuccessful , false);
xhr.addEventListener("loadstart", transferStart , false);
xhr.addEventListener("loadend" , transferEnd , false);
xhr.addEventListener("timeout" , transferTimeout , false);
xhr.withCredentials = true;
xhr.open(method, url, async, user, password);
xhr.send(data);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

7. Requests with XHTTPRequest 2
jQuery
$.ajax(url, {
xhrFields: {
withCredentials: true
}
})
.done(callback);
//Persistent:
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
options.xhrFields = {
withCredentials: true
};
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

8. Requests with XHTTPRequest 2
AngularJS
myApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.useXDomain = true;
delete $httpP~.defaults.headers.common['X-Requested-With'];
}]);
1
2
3
4
5
6
7
8
9

9. Hacking time!

10. What’s all about?
● Same-origin policy
● Cross domain requests use-cases
● Making requests with XHTTPRequest
● CSRF attacks
● Simple and not-so-simple requests
● Cross-domain limitations & Access Control
● Back-end implementation examples
● Limitation in Internet Explorer 8, 9
● Workarounds (proxy, JSONP)
● Content Security Policy

11. • Only GET, HEAD or POST
• No custom headers
• Content-Type only
application/x-www-form-urlencoded,
multipart/form-data, or text/plain
• All other will have
preflighted request
Not-so-simple and
simple requests
http OPTIONS (Origin: http://example.com:81)
200 Access-Control-Allow- ...
direct GET/POST/PUT/DELETE request
as allowed by access headers
preflightedapplication

12. • Request always contains an
Origin
• Allow-Origin can be * for
read requests
• For modify requests it should
be set manually
• Allow-Origin can’t be * with
Allow-Credentials: true
Access-Control
headers
Origin: origin
Access-Control-Request-Method: put
Access-Control-Request-Headers: …
Access-Control-Allow-Origin: origin | *
Access-Control-Max-Age: 300
Access-Control-Allow-Credentials: bool
Access-Control-Allow-Methods: put, get
Access-Control-Allow-Headers: …
Access-Control-Expose-Headers: …
preflighted
requestresponse
http://www.html5rocks.com/en/tutorials/cors/

13. • Have white list of origins
• If not possible use X-
CSRF-Token
Prevent attacks
set header X-CSRF-Token
previous
request
next
request
return X-CSRF-Token
server
validation
server response with new X-CSRF-
Token
http://mircozeiss.com/using-csrf-with-express-
and-angular/

14. What’s all about?
● Same-origin policy
● Cross domain requests use-cases
● Making requests with XHTTPRequest
● CSRF attacks
● Simple and not-so-simple requests
● Cross-domain limitations & Access Control
● Back-end implementation examples
● Limitation in Internet Explorer 8, 9
● Workarounds (proxy, JSONP)
● Content Security Policy

15. Back-end implementation
.Net
// library Thinktecture
public static void Register(HttpConfiguration config){
var corsConfig = new WebApiCorsConfiguration();
corsConfig.RegisterGlobal(config);
corsConfig.ForAll().AllowAll();
}
//more details:
//http://brockallen.com/2012/06/28/cors-support-in-webapi-mvc-
and-iis-with-thinktecture-identitymodel/
1
2
3
4
5
6
7
8
9
10
11
12
13
14

16. Back-end implementation
Ruby
module YourProjectName
class Application < Rails::Application
......
config.action_dispatch.default_headers = {
"Access-Control-Allow-Origin" => "*",
"Access-Control-Allow-Methods" => "PUT, GET, POST, DELETE,
OPTION",
"Access-Control-Allow-Headers" => "Origin, X-Requested-With,
X-File-Name, Content-Type,
Cache-Control, X-CSRF-Token,
Accept",
"Access-Control-Allow-Credentials" => "true",
"Access-Control-Max-Age" => "1728000"
}
......
end
end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

17. • Most probably you will
never need it, but in case
flowchart is under link
below
Manual
implementation
http://www.html5rocks.com/en/tutorials/cors/

18. What’s all about?
● Same-origin policy
● Cross domain requests use-cases
● Making requests with XHTTPRequest
● CSRF attacks
● Simple and not-so-simple requests
● Cross-domain limitations & Access Control
● Back-end implementation examples
● Limitation in Internet Explorer 8, 9
● Workarounds (proxy, JSONP)
● Content Security Policy

19. • IE ≤ 7 is not a browser
• IE10+ is already a browser
• IE8-9 can be handled with
XDomainRequest
Most loved browser

20. Limitation in Internet Explorer 8, 9
Feature detection
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
//"withCredentials" only exists on XMLHTTPRequest2 objects
xhr.open(method, url, async, user, password);
} else if (typeof XDomainRequest != "undefined") {
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
//Otherwise, CORS is not supported by the browser
xhr = null;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

21. 1. The target URL must be accessed using only the methods GET and
POST
2. No custom headers may be added to the request
3. Only text/plain is supported for the request's Content-Type header
4. No authentication or cookies will be sent with the request
5. Requests must be targeted to the same scheme as the hosting page
6. The target URL must be accessed using the HTTP or HTTPS protocols
7. Requests targeted to Intranet URLs may only be made from the Intranet
Zone
Limitation in Internet Explorer 8, 9
Things to remember
http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

22. Third party services
Proxy
Client
Workarounds

23. Workarounds
JSONP Concept
<script src="http://3rd-party.com/api/v1/users/27"></script>
#responce from http://3rd-party.com/api/v1/users/27:
callbackFn({"id":1,
"name":"Jack",
"email":"jack@perfectial.com",
"startDate":"2010-01-01T12:00:00",
"endDate":null,
"vacationRate":1.67,
"admin":true,
"defaultRecipient":true,
"userRequestCount":0,
"requestToUserCount":0
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

24. Workarounds
JSONP with jQuery
<script src="http://3rd-party.com/api/v1/users/27"></script>
$.ajax("http://3rd-party.com/api/v1/users/27", {
"crossDomain": true,
"dataType" : "jsonp"
});
#request URL will be:
http://3rd-
party.com/api/v1/users/27?callback=jQuery111008519500948023051_139817
7525599&_=1398177525600
#responce from http://3rd-party.com/api/v1/users/27:
jQuery111008519500948023051_1398177525599({
"id":1,
"name":"Jack",
"email":"jack@perfectial.com",
...
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

25. Workarounds
JSONP Limitations
● JavaScript Object Notation is for read, not eval.
● Can’t add custom headers.
● Require ability to modify backend.
● Only GET method.

26. Workarounds... kind of
Document messaging
window.addEventListener("message", function(event){
if (event.origin !== "http://example.org"){
return;
}
}, false);
window.parent.postMessage("Hi there!", "http://example.org");
1
2
3
4
5
6
7
8
9
10
https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

27. What’s all about?
● Same-origin policy
● Cross domain requests use-cases
● Making requests with XHTTPRequest
● CSRF attacks
● Simple and not-so-simple requests
● Cross-domain limitations & Access Control
● Back-end implementation examples
● Limitation in Internet Explorer 8, 9
● Workarounds (proxy, JSONP)
● Content Security Policy

28. • Only latest browsers
• With prefix 'X-' in IE10-11
• Inline script won’t work
• eval() too
• Report and Report-Only
https://www.youtube.com/watch?v=C2x1jEekf3g
http://www.html5rocks.com/en/tutorials/security/cont
ent-security-policy/
http://en.wikipedia.org/wiki/Content_Security_Policy
Content Security
PolicyContent-Security-Policy:
default-src 'unsafe-eval' 'unsafe-inline';
connect-src 'none';
font-src https://themes.googleusercontent.com;
frame-src 'self';
img-src http://cdn.example.com/;
media-src http://cdn.example.com/;
object-src http://cdn.example.com/;
style-src http://cdn.example.com/;
script-src 'self';
report-uri /csp_report_parser;

29. © 2014 Yura Chaikovsky
Perfectial, LLC
http://perfectial.com
info@perfectial.com