What is the use of CORS for complexity?
Everything has its cause, first to mention the same origin policy , which is one of the most important security policies on modern browsers that launched Netscape in 1995. Basically, This is a policy that dictates the content of a domain that can only be read and changed by another component that belongs to the same domain, requests from other domains will be blocked.
If you do not have the same origin policy , on a good day you open your browser to Facebook and in another tab you are visiting a malicious website and the script is set on this page to make a request to the server. From there, Facebook can get information, access some basic features with the source of the Facebook tab. For this reason, the browser must have a mechanism to distinguish which source request is allowed to access the source from which to avoid unwanted fake attacks.
Although SOP is effective in preventing unauthorized access from different domains, it also prevents valid interactions between trusted servers or clients. For example, api.example.com and image.example.com , these two domains are definitely not of the same origin.
CORS (Cross Origin Resource Sharing) is a new feature integrated in HTML5, adding HTTP headers instructing web browsers to use and manage cross-domain content, allowing to retrieve data from another site. via XMLHttpRequest.
How does CORS work?
When the browser sends a request to another domain to request to do something, these requests will be appended with a header named origin to identify the client’s origin, this value is automatically added by the browser and Nobody can change it. This header represents the query origin.
Orgin is structured based on three parts:
- Protocol / Scheme: (Http / Https)
- Host: server / domain
- Port: port, if this value is 80 default value is not required
The server will consider if origin in the request the user sent is valid or not, if it is valid, it will return a response with the Access-Controll-Allow-Origin header. This header will indicate whether the client is valid or not and from there the browser continues to process the request. Access-Control-Allow-Origin lists the domains that are allowed to make CORS requests. The * character allows all other domains to make requests. However, this method is often considered unsafe unless your API is used for public purposes and everyone has permission to access.
For example, a reequest from https://foo.example :
1 2 3 4 5 6 7 8 9 | GET /resources/public-data/ HTTP/1.1 Host: bar.other User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Connection: keep-alive Origin: https://foo.example |
Response
1 2 3 4 5 6 7 8 9 10 11 | HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 00:23:53 GMT Server: Apache/2 Access-Control-Allow-Origin: * Keep-Alive: timeout=2, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: application/xml […XML Data…] |
If there is no Header Access-Control-Allow-Origin or its value is not valid, the browser will report an error.
CORS related headers all have prefixes beginning with Access-Controll . In addition to Access-Controll-Allow-Origin , headers related to CORS may contain:
- Access-Control-Allow-Methods : List of HTTP methods that the server allows clients to use (GET, POST, PUT, DELETE …), cannot be overwritten or modified.
- Access-Control-Allow_Headers : contains the list of headers that the server currently supports (x-authentication-token, …), if the client-side request does not contain any headers that are not in this list, it will be removed by the server. by.
- Access-Control-Max-Age : Describes the valid time of preflight request, if overdue, the browser will create a new pre-flight request.
Queries that use CORS
According to international standards, the following queries will have to use CORS:
- Queries using XMLHttpRequest or Fetch API go to another domain.
- Photos and videos are drawn into the canvas using
drawImage. - Web fonts query to another domain via
fontfacein CSS, where a website can only use True Type fonts if allowed. - WebGL Texture
Pre-flight requests
Pre-flight request is a type of CORS request, sent when there are requests affecting the database such as POST, PUT, DELETE, … First, the browser will send a request with OPTION method to the resource of the domain before sending. The main request is to probe whether the main request is supported by the server or whether this request is valid or not. Also, in case you add custom headers to your request, sending a pre-flight request first is also necessary.
For example in a browser we visit https://www.alice.com and send a request to POST: https://www.api.alice.com/users . The browser will first send a pre-flight request (OPTION) to the server side with the request method and the assumed request header of the main request where the Access-Control-Request-Method and Access-Control-Request-Headers headers will be browser automatically added.
1 2 3 4 5 6 7 | OPTIONS /users/ HTTP/1.1 Host: api.alice.com Origin: https://www.alice.com Access-Control-Request-Method: POST Access-Control-Request-Headers: Authorization, Content-Type [Rest of request...] |
The server sends back a reponse containing the allowed HTTP methods and headers.
1 2 3 4 5 6 7 | HTTP/1.1 200 OK Access-Control-Allow-Origin: https://www.alice.com Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: Authorization, Content-Type Content-Type: application/json [Rest of response...] |
If the request is allowed, the browser will send a CORS request (main request), the following steps are the same.
1 2 3 4 5 6 7 | POST /users/ HTTP/1.1 Host: api.alice.com Authorization: root Content-Type: application/json Origin: https://www.alice.com [Rest of request...] |
The server-based reponse contains the origin value in Access-Control-Allow-Origin , and the browser will now process and send subsequent requests.
Conclude
Above are the basic parts of CORS that I can learn, hopefully they will help some.
If you have questions or suggestions for the article, you leave a small message in the comment section so I can answer and improve the article better.
Thank you for reading to the end of the article.