Cross-Origin Resource Sharing (CORS)

Question 1

Why was there a need to securely interact with JavaScript, HTML and DOM API entities within the scope of the browser?

Answer 1

DOM and JavaScript makes it possible to reach all properties of an HTML document.
The richness of HTML introduced additional resources, such as other documents or media items, with their own cookies, DOM, JavaScript namespace, and other rich elements.

Question 2

What did Netscape introduce in 1995?

Answer 2

The concept of same-origin policy.

Question 3

What is the same-origin policy?

Answer 3

The policy originally designed to protect access to the DOM, but has since been broadened to protect sensitive parts of the global JavaScript object.

Question 4

In web terms, what is the origin?

Answer 4

A set of common characteristics of a web resource URI, formed of three elements:
* scheme (protocol)
* hostname (domain/subdomain)
* port

Question 5

Give an example of an origin.

Answer 5

http:// www.example.com: 8080/
scheme hostname port

Question 6

All resources identified by ‘schema:hostname/anything:port’ have the same origin. [T/F]

Answer 6

T

Question 7

What kinds of attacks could happen without Same-origin policy?

Answer 7

A bad site may trick a user to login with bank details and use a JavaScript call to access the DOM elements of the user’s bank loaded in iframe, such as balance.
e.g.
frames.bank_frame.document.getElementById(“balance”).value
This accesses the iframe element ‘bank_frame’ then the HTML element ‘balance’ in its DOM and get its value.
This could be extended to transfer the user’s money.
This is a cross-site request.

Question 8

What could happen without Same-origin Policy?

Answer 8

Cross-site requests can be executed without a user’s consent or knowledge.

Question 9

What does the Same Origin Policy specify?

Answer 9

When a browser connects to an origin (e.g. http://example1.org), it will not be able to connect to resources from a different origin (http://example2.org). JavaScript AJAX code to remote websites of a different origin are not allowed.
Marked-up images/links in the HTML content are allowed.

Question 10

Same Origin Policy is a defense mechanism that operates in and is enforced by the ________.

Answer 10

Browser.

Question 11

Same Origin Policy is a Browser-based defense mechanism. [T/F]

Answer 11

T

Question 12

Same Origin Policy permits ________ contained in a first web page to access data in a second web page if both
web pages have the same _______.

Answer 12

scripts
origin

Question 13

Same Origin Policy was introduced by _______ Navigator in 1995.

Answer 13

Netscape

Question 14

Why is Same Origin policy good for security most of the time?

Answer 14

Because most of the time a script running in the browser only needs to access resources on the same origin (e.g. API calls to the same backend that served the JavaScript code in the first place).
So the fact that JavaScript cannot normally access resources on other origins is good for security.

Question 15

Give an example of a legitimate scenario where cross-origin access is desirable/necessary.

Answer 15

When an API is to be shared by multiple domains.

Question 16

What does CORS stand for?

Answer 16

Cross-origin Resource Sharing

Question 17

What are the purpose of CORS?

Answer 17

To define a way in which a browser and server can interact to determine whether it is safe to allow the cross-origin request

Question 18

CORS provide more _________ and ___________ than purely same-origin requests.

Answer 18

freedom
functionality

Question 19

CORS is more _______ than simply allowing all cross-origin requests.

Answer 19

secure

Question 20

What are the three aspects of CORS?

Answer 20

HTTP Extension
Fetch
Preflight

Question 21

In what way is HTTP extended in CORS?

Answer 21

Headers
Request/Response challenge

Question 22

What is the request header introduced by CORS?

Answer 22

Origin

Question 23

What is the Origin request header used for?

Answer 23

To indicate where a request (specifically a fetch) originates from.
e.g. Origin http://localhost:3001
It does not include any path information, but only the scheme, server name, and port.

Question 23

What is the Origin request header used for?

Answer 23

To indicate where a request (specifically a fetch) originates from.
e.g. Origin http://localhost:3001
It does not include any path information, but only the scheme, server name, and port.

Question 24

What is the response header introduced by CORS?

Answer 24

Access-Control-Allow-Origin

Question 25

What is the If the Access-Control-Allow-Origin header used for?

Answer 25

The server checks if the resource referenced in the script can be accessed by the Origin in the request (CORS).
If the recipient of the request accepts Origin, then
response succeeds, with the added Response Header:
Access-Control-Allow-Origin: «origin»
Note that wildcard * is allowed (any origin is permitted)

Question 26

What HTTP response message is returned with ‘curl -I -H “Origin: http://localhost:3001” http//localhost:3000/with-cors’ if the origin is accepted and the recipient/server is CORS configured?

Answer 26

HTTP/1.1 200 OK

Question 27

What HTTP response message is returned with ‘curl -I -H “Origin: http://localhost:3002” http//localhost:3000/with-cors’ if the origin is not accepted and the recipient/server is CORS configured?

Answer 27

HTTP/1.1 500 Internal Server Error

Question 28

What HTTP response message is returned with ‘curl -I http//localhost:3000/with-cors’ (Origin header is not provided) and the recipient/server is CORS configured?

Answer 28

HTTP/1.1 500 Internal Server Error

Question 29

What HTTP response message is returned with ‘curl -I -H “Origin: http://localhost:3001” http//localhost:3000/without-cors’ if the recipient/server is NOT CORS configured (accepts requests from any origin)?

Answer 29

HTTP/1.1 200 OK

Question 30

What HTTP response message is returned with ‘curl -I http//localhost:3000/without-cors’ with Origin header is not provided and the recipient/server is CORS configured (accepts requests from unspecified origin)?

Answer 30

HTTP/1.1 200 OK

Question 31

What is Fetch?

Answer 31

The request and response returned and the ability to check whether the response meets criteria set by the CORS Policy.

Question 32

How do you send the CORS preflight request using curl?

Answer 32

curl -I -X OPTIONS
-H “Access-Control-Request-Method: GET”
-H “Access-Control-Request-Headers: Content-Type”
-H “Origin: http://localhost:3001” http://localhost:3000/with-cors

Question 33

What is the response of a CORS preflight request with curl?

Answer 33

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://localhost:3001 Access-Control-Allow-Methods:GET, HEAD, PUT, PATCH, POST, DELETE
Access-Control-Allow-Headers: Content-Type Access-Control-Expose-Headers: Content-Length, X-Foo, X-Bar Vary: Origin,
Access-Control-Request-Headers
Content-Length: 0
Date: Sun, 02 Aug 2020 21:19:00 GMT

Question 34

Why does the CORS protocol exist?

Answer 34

To allow sharing responses cross-origin and allow for more versatile fetches than possible with HTML’s form element.

Question 35

How do more complex requests differ from simple requests?

Answer 35

A preflight request with the HTTP OPTIONS method must be sent first to check headers and origin are accepted before the GET request.

Question 36

What is the CORS protocol layered on top of and why?

Answer 36

HTTP.
Allows responses to declare they can be shared with other origins (using Access-Control-Allow-Origin header).

Question 37

Where is the decision whether JavaScript is allowed to access foreign domains using XMLHttpRequest made?

Answer 37

In the browser.

Question 38

The CORS policy does not ensure a resource is protected. Why?

Answer 38

• A Resource “cannot protect” itself from arbitrary clients
• Even a “modified Browser” may not implement CORS

The resource may still be accessed by many clients, e.g. a JavaScript, Java, curl command line or any script/program not running on the browser and having a CORS policy to enforce.