What I learned

This week I studied about CORS.

What is CORS?

CORS (Cross-Origin Resource Sharing) is a concept that allows resources in one origin to access resources in another origin. Literally, it is the sharing of cross-origin resources. If you're requesting a resource from another origin, it is called a cross-origin request.

What is Origin?

CORS and SOP are both origin-related concept. So we need to know what Oirigin is.

The source is defined in three ways: URL scheme(protocol), host(domain), and port. In other words, to determine which URLs are from the same source, we need to check if the protocol, domain, and port of the URLs are all the same.

• http://example.com/hello and http://example.com/bye are different URLs, but they all have the same protocol, domain, and port, so they are of the same origin.

• http://example.com and https://example.com point to the same resource, but they are not the same origin because the protocols are different.

• http://example.com and http://example.com:80 look like different sources, but in the former case, the default port of http 80 is omitted, so they can be said to be the same source.

What is SOP?

SOP (Same-Origin Policy) prevents other-origin attacks by preventing read access to resources queried from other origins. However, it accepts several tags, such as {img} for images from other sourcces and {link} for external addresses. There is no exact implementation specification of the same-origin policy, but modern browsers follow certain rules.

The SOP allowed very limited fetching of other-origin resources. And as SPA and media-focused websites become more and more popular, the rules around them continued to grow. Therefore, CORS has emerged to increase accessibility to other origin resources.

What requests use CORS?

There are three different origin request policies. They are Simple Request, Preflighted Request and Credential Request.

What is Simple Request?

-Only GET, HEAD, POST requests are allowed

• CORS safety list headers such as Accept, Accept-Language, Content-Language, Content-Type or User-Agent headers
• Content-Type header can only be application/x-www-form-urlencoded, multipart/form-data and text/plain
• ReadableStream object is deprecated
• When making a request using XMLHttpRequest object, no event listerns are registered on the object returned by XMLHttpRequest.upload used in the request

1. The browser sends a request to another origin with its address https://www.site.com as the origin.
2. The server checks the request and returns the result by including the address in the access-control-allow-origin that allows access to https://www.site.com from other sources.
3. access-control-allow-origin is one of the important elements of the CORS header, which determines which requests are allowed. This header value can be from one origin or "*" can be used to allow any origin.

If the server does not respond to this header, or if the header value is for a domain that does not match the origin of the request, the browser blocks the response. Also, if the requested origin is included in the server's access-control-allow-origin.

What is Preflighted Request?

Preflights send HTTP requests ahead of time with the OPTIONS method to ensure that the actual request is safe to send. This means sending it ahead of time because requests from other origins may affect user data.

Request headers contain the following values:

• origin: the address that tells the server where the request came from
• access-control-request-method: the HTTP method the actual request will send
• access-control-request-headers: headers included in the actual request

Response headers contain the follwing values:

• access-control-allow-origin: origins allowed by the server
• access-control-allow-methods: list of HTTP methods allowed by the server
• access-control-allow-headers: list of headers allowed by the server
• access-control-max-age: how long to cache preflight request responses

1. Preflight request sends your address https://www.api.com?q=test with OPTIONS. It also sends origin, access-control-request-method, and access-control-rquest-headers.

2. Access-control-allow-origin, Access-control-allow-method, Access-control-allow-headers, and Access-control-max-age are received as normal responses.

We can make a real request and get a normal response thanks to Preflight that normal requests and resopnses are possible.

What is Credentialed Request?

Credentialed Requests are requested with credentials such as cookes, authentication headers, and TLS client certificates. By default, CORS policy disallows including credentials in other origin requests. Requests can be made if the request has a flag that includes authentication or if access-control-allow-credentials is set to true.

Requests containing user identification information are handled more strictly. The client must set the cerdential option separately when sending a request. In the case of the fetch API, there are three options as follows.

1. same-origin: Authentication information can only be included in requests between the same origin
2. inclde: Authentication information can be included in all requests
3. omit: Do not include authentication information in all requests.

Summary

In the end, the red error message that plauged web developers was actually an error that occrued when resources from other sources were blocked according to the browser's SOP policy, and CORS was the solution to obtain resrouces from other sources. In summary, CORS allows resources from other origins even if the SOP policy is violated.