Cross-Origin Resource Sharing (CORS)

    Cross-Origin Resource Sharing(CORS)

Cross-Origin resource sharing(cors) is a mechanism that describes the additional HTTP headers and provides to the browser to let web application which is running at one origin to get permission to access resources of a server at a different origin. Web applications use Cross-Origin HTTP request when requested resource has a different origin (domain, protocol, port) than its own origin. That means CORS allows a restricted resource to be accessible from another domain. The CORS allow to describe requested information to the server to read using browser.

Example : Front end of javascript code for web application from domain_a.com uses XmlHttpRequest to make request domain_b.com

Same-Origin Resource Sharing

Resources from domain let allow to interact with resources of the same domain but not with resources from different domain. Example: XMLHttpRequest and Fetch API belongs to same domain. For security reasons browser restrict to Cross-Origin HTTP requests.

Sending response and request:

When browser sends OPTION with origin and the value of origin is the domain then this domain become parent page. When page example.com wants to attempt data from service.com then following request header send to the service.example.com.

Origin: http://www.example.com

And the server at service.example.com response with

Access-Control-Allow-Origin: http://www.example.com, allows a particular domain

If Access-Control-Allow-Origin responds with ” * “, allowed to access all domains. This is wildcard policy.

If server does not allow Cross-Origin then browser will show error.

A wildcard policy is perfect when uses same-origin that is page and API’s intended to accessible to everyone.

When domain requesting to interact with another domain resource first domain add following requests in headers

Request Headers:

Origin:  The browser sends the OPTION request with Origin.

Access-Control-Request-Method: This shows to server which HTTP method will be used when the actual request made. HTTP method request includes GET,POST,DELETE.

syntax for Access-Control-Request-Method:

Access-Control-Request-Method: <method> For example,

Access-Control-Request-Method: POST

Access-Control-Request-Headers: This header request is used when applying preflight request.

Syntax for Access-Control-Request-Headers:
Access-Control-Request-Headers: <header-name>,<header-name>, ………

When second domain adds response to first domain the second domain adds following response headers :

Response Headers:

Access-Control-Allow-Origin: The value will be particular domain or *  as mentioned above, allows particular domain or all domains respectively.

Access-Control-Allow-Creditionals: Credentials are cookies, authorization headers or TLS client certificates. When a domain requests credential then browser response frontend JavaScript code if Access-Control-Allow-Origin value is true.

     Syntax:

Access-Control-Allow-Origin: true

Access-Control-Allow-Headers: These headers are used to response preflight request this indicates actual request than. These response headers include values Accept, Accept-Language, Content-type, X-pingother

The syntax for Access-Control-Allow-Headers:

Access-Control-Allow-Headers: <header-name>[, <header-name>]*

Access-Control-Max-Age: This header gives the value in seconds how long response to preflight request can be cached for without sending another preflight request.

Access-Control-Allow-Methods: Methods used in reponses header such as GET, POST, OPTIONS, DELETE.

For example,

Access-Control-Allow-Methods: GET, POST, OPTIONS

Access-Control-Expose-Headers: Is indicates which header can be expose as a part of response.

Working of Cross-Origin:

User opens a web page and references another domain.

Users browser creates a connection to second domain by adding “Origin”.

And second domain responses with ‘Access-control-allow-origin’ HTTP header.

If the first domain makes a request then second domain response to the request.