Cross-Origin Resource Sharing

Cross-Origin Resource Sharing

11 أكتوبر 2022

 Wikipedia says that CORS

"...is a mechanism that allows restricted resources on a web page to be requested from a domain other than the domain from which the resource was first served."

Well, it looks like you read this explanation and did not understand anything. If yes, then everything is fine! Those who are not programmers, or beginners, may find this definition confusing and complex.
A few weeks ago, our Drupal performance optimization team got together over coffee, and we decided to create a new, coherent blog about cross-origin resource sharing. 
We are finally ready to present it to you and the programming community. Our team really believes that this will simplify life for backend developers, front-end developers, web administrators, and anyone who has seen the "Access-Control-Allow-Origin" header.
 

What is cross origin resource sharing?

CORS refers to a particular security mechanism of modern browsers called Cross-Origin Resource Sharing. By using it, you can allow web pages to access resources from other domains. Without such technology, this would not be possible, and all sites would only have access to resources of the same origin.
At its core, cross origin resource sharing is a browser wrapper. A cross-origin resource sharing capability is a crucial part of the world of complex web applications, and all modern browsers support it.
Do all browsers support CORS?
The majority of modern browsers support CORS. If you notice that your browser does not support it, then most likely, you just need to update it.

What is CORS used for?

First of all, cross-origin resource sharing (cors) is about server-side security. To be more exact, it is a weakened security standard.
AJAX requests to other servers are not allowed by default in browsers for security reasons. This is called the same-origin policy. Once upon a time, this was considered normal, but not today, in the era of IT technologies.
CORS is one option to bypass the same-origin policy; using it does not open access to everyone but only to those whom you have indicated. Without the CORS feature, site users will not be able to access different origins resources.

What does CORS apply to?

  • Web Fonts
  • Iframes
  • WebGL textures
  • CSS Shapes
  • Stylesheets
  • Scripts
  • Сross-origin images and videos

How does CORS work?

Cross-origin resource sharing (cors) works by adding special HTTP headers. After adding them, browsers will know if they can fulfill your request or if it is better to avoid it. Enabling CORS allows the server to tell the browser that it is allowed to use the secondary origin.
1. After you have added cors, your browser will see this and add a special origin header.
2. The server then finds this header and also adds an Access-Control-Allow-Origin header to the response indicating the requesting origin.
3. Eventually, if the browser finds the correct Access-Control-Allow-Origin header from the server, it will allow the request to proceed.
This process is comparable to checking tickets at the entrance to a cinema.

What is an example of CORS?

There are two types of CORS requests:

  • Simple requests: GET, POST, or HEAD

Example of the simple request access control scenarios.

Origin: https://www.google.com/
Access-Control-Allow-Origin: https://www.google.com/
An error if the cross-origin requests are not allowed

  • Preflight requests: HTTP method

A preflight request is the second type of CORS request. Before executing it, the browser sends a pre-request to check if it has the appropriate permissions before sending the request to the server.
Example of the preflight request access control scenarios.
Origin: http://domainx.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header
Access-Control-Allow-Origin: https://www.google.com/
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: X-Custom-Header

How to prevent CORS problems?

Our experience shows that most CORS problems arise from incorrect settings. Here are three top tips for avoiding CORS errors and attacks.
1. Trusted websites
We recommended adding only trusted sites to the Access-Control-Allow-Origin header.
2. Wildcards
It is best to avoid using wildcards on internal networks. There are use cases where a wildcard is acceptable, such as a public API, but care must be taken in other cases.
3. Security policies 
To get a 100% result, you should configure not only CORS but also implement the protection of confidential data on the server side.

How do I enable the CORS header in Drupal?

Luckily, you can set up the CORS header in Drupal in different ways.

First way: The setting of CORS in Drupal 8 in services.yml
Put only those headers that you need, and don't put extras. For security reasons, enable only those configurations that you need.

Second way: Drupal 8 cors set Nginx settings
CORS can be configured on the origin server. If you want to enable CORS for static resources, you will need to add the following code to your server.

location ~ \.(ttf|ttc|otf|eot|woff|font.css|css|js|gif|png|jpe?g|svg|svgz|ico|webp)$ {
    add_header Access-Control-Allow-Origin "*";
}

Third way: RESTful web service
RESTful web services are built into Drupal 8 and since version 8.2. We no longer need the Cors module. To use services, just include and configure the default.service.yml.

cors.config:
    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: ['x-csrf-token,authorization,content-type,accept,origin,x-requested-with']
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: ['POST, GET, OPTIONS, DELETE, PUT']
    # Configure requests allowed from specific origins.
    allowedOrigins: ['*']
    # Sets the Access-Control-Expose-Headers header.
    exposedHeaders: false
    # Sets the Access-Control-Max-Age header.
    maxAge: 1000
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: false

Fourth way: Opt-in CORS support
Check out this page for more information and instructions on how to set it up.

Fifth way: Contact experienced Drupal solution providers
If you're already familiar with sharing resources sharing, you shouldn't have any difficulty. However, if you still don't feel confident in this matter, it's better to conduct the Drupal site audit and adjust CORS precisely to your needs.

Conclusion

Today, we looked at Drupal 8 CORS, and Drupal 9 CORS settings, and how we can use them to resolve cross-origin requests.
Our team hopes this material will be useful to you. Any questions? Welcome to the comments! Happy day to you all, and may you have fewer CORS errors.