Web Security - Cookies, Domains and CORS

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

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

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

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

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

Requests with XHTTPRequest 2 - Events
Plain JavaScript
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.send(data);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

• 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

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

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

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

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

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

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

Limitation in Internet Explorer 8, 9
Feature detection
if ("withCredentials" in xhr) {
//"withCredentials" only exists on XMLHTTPRequest2 objects
} 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

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

Third party services
Proxy
Client
Workarounds

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

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

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

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

• 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;

Web Security - Cookies, Domains and CORS

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Web Security - Cookies, Domains and CORS (20)

Recently uploaded (20)

Web Security - Cookies, Domains and CORS