CORS
CORS
Cross Origin Resource Sharing
CORS
Cross Origin Resource Sharing
aka
HTTP access control
WAT?
Cross Origin Resource Sharing
aka
HTTP access control
HTTP
HTTP
HyperText Transfer Protocol
HTTP
HyperText Transfer Protocol
The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems.
HTTP
HyperText Transfer Protocol
The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems.
Again: WAT?
HTTP
Request: http://www.hello.com/world.html
GET /world.html HTTP/1.1
Host: www.hello.com
Accept: image/gif, image/jpeg, */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
URL: Uniform Resource Locator
Protocol
Path
Host
Method/Verb
Headers
Response: http://www.hello.com/world.html
HTTP/1.1 200 OK
Last-Modified: Thu, 14 May 2009 16:26:47 GMT
Content-Type: text/html
<!DOCTYPE html>
<html>
<head><link src="./styles.css" /></head>
<body><img src="./hi.gif" /></body>
</html>
Response Headers
Response Body
More Resources
Status Code
Cross Origin Resource Sharing
aka
HTTP access control
HTTP
Resource
HTTP methods/verbs
GET fetch an existing resource
POST create new resource
PUT update resource
DELETE delete resource
OPTIONS get server capabilities
HTTP access control: limit methods that can be used on a resource from a different origin
What does a different origin even mean?
good.com
Please give us your credit card:
123
good.com server
PUT /credit-card-number HTTP 1.1
Host: good.com
{number: 123}
evil.com
Here's some harmless cat pics for you:
GET /credit-card-number
Host: good.com
AJAX: Asynchronous Javascript and XML
200 OK
{number: 123}
evil.com server
PUT /credit-card-number HTTP 1.1
Host: evil.com
{number: 123}
HTTP access control headers
In request:
Origin: http://www.hello.com
Access-Control-Request-Method: PUT
In response:
Access-Control-Allow-Origin: http://www.hello.com
Access-Control-Allow-Methods: GET, POST, PUT
Automatically inserted by browser
Have to be set explicitly by server
HTTP access control headers
In request:
Origin: http://www.world.com
Access-Control-Request-Method: PUT Host: http://www.hello.com
In response:
Access-Control-Allow-Origin: http://www.hello.com,
http://www.world.com
Access-Control-Allow-Methods: GET, POST, PUT
Where does the request come from?
Where does the request go to?
Cross Origin Resource Sharing
aka
HTTP access control
HTTP
Resource
Cross Origin
access control
DONE!
WAAAAIT...
On ALL responses please!
Access-Control-Allow-Origin: http://www.hello.com,
http://www.world.com
Access-Control-Allow-Methods: GET, POST, PUT
On ALL responses WITH ALL NEEDED METHODS please!
Access-Control-Allow-Origin: http://www.hello.com,
http://www.world.com
Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS
Preflight requests
Request:
OPTIONS /hello.html HTTP/1.1
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://www.evil.com
Response
HTTP/1.1 200 OK
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: https://www.evil.com
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 86400
Do this in development, but NEVER in production:
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS
Wildcard that allows ALL origins.
Thank you :)
CORS
By bastianalbers
