In this article, we will explain what the CORS policy is and what CORS is in general, as well as how it is useful for developers.
For modern web applications, downloading resources from multiple domains is a common practice. These resources are accessed using CORS technology. For example, if you need to get user information on your site "www.mysite.com" from a server located on the site "api.website.com", you must send a request to the server and get a response in the form of JSON data.
What is CORS?
sharing resources between different sources – CORS (Cross-Origin Resource Sharin) is a mechanism that grants permissions to upload resources from one source to another, while maintaining the integrity of the site and protecting it from unauthorized access. Modern browsers use this to determine which cross-site requests are secure.
For security reasons, browsers restrict access from scripts to other resources that exist outside their domain, using the Same-Origin Policy. This policy protects against identity theft from other web servers or Cross-Site Request Forgery (CSRF) attacks.
In this case, one source, the attacker's site, tries to access the resource from the source – the online banking site. The Same-Origin Policy blocks a cybercriminal from accessing your banking data.
However, domain restriction rules restrict specialists from accessing resources from different sources. This is why the CORS HTTP protocol was developed to tell the browser that limited resources on a web page can be requested from other domains.
For example, here is a possible scenario for requesting information from an external source, such as an API (common practice for client-side JavaScript code):
Why do ICORS?
If you want to use resources from a server other than your own, you will need to use CORS.
Some examples of what you can do with CORS include:
How does CORS work?
CORS starts when a script from one source sends a request to another source. All this is controlled by a pre-request that exchanges HTTP request headers and response headers, which are called "CORS headers".
Let's take a closer look at how preliminary queries work.
Preliminary request
A preflight request is an additional HTTP request using the "OPTIONS" method. The browser does this for every insecure request that is intended to modify data, such as POST, PUT, or DELETE requests.
A pre-request is standard behavior for modern web browsers. The expected response from the app is a response containing CORS headers with the correct instructions.
Example of a preliminary request:
Here we see several specific HTTP headers. These are some of the most common CORS headers used in browser requests and server responses:
Access-Control-Allow-Origin
Imagine the following scenario: I want to allow an application hosted on , access to the resource.
In this case, I need to specify the following:
Access-Control-Allow-Origin: https://mywebsite.com
In addition, adding a custom Access-Control-Allow-Origin header to object stores such as AWS S3 or Google Storage will optimize throughput, optimize resource usage, and speed up data retrieval.
Access-Control-Allow-Origin can also be used if another site completely copies yours, which negatively affects your site's SEO. This way, your website content will not be displayed on the mirror site. But you can also file a DMCA Takedown Notice to remove your content from another site, because an attacker can bypass the Access-Control-Allow-Origin policy by using a proxy server.
Security issues with Access-Control-Allow-Origin
Quite often, you can find applications that use this notation for Access-Control-Allow-Origin:
The " * " character tells the browser to allow access to the resource from any source, effectively disabling the Same-Origin Policy. This means that the browser will not filter sources. Any code on any site can make a request to the resource (including malicious domains).
In addition, the "*" symbol is widely used by hackers, especially for web skimmers. AJAX requests are sent from checkout pages on hacked sites to malicious servers that transmit stolen payment details.
For example, this JavaScript skimmer uses a request from different sources with the corresponding CORS headers to send stolen data to a third-party server.
Basically, hackers use these CORS headers with " * " on their servers to get data from any hacked websites. This way, if you also use CORS headers with " * " for any server responses, you make it easier for attackers to use your sites to steal data.
Access-Control-Allow-Methods
When developing a RESTful API, most endpoints will accept the GET, POST, PUT, PATCH, and DELETE methods.
You can use the Access-Control-Allow-Methods header to specify exactly which HTTP methods your application should provide to external sources. This can help reduce the risk of any unwanted activity in your environment.
This header reserves the use of POST, PUT, PATCH, and any type of HTTP method that is used to modify the content of an application in your domain. This allows external applications to use read-only GET requests for resources.
Access-Control-Allow-Headers
The purpose of the Access-Control-Allow-Headers header is to allow custom headers. For example, an app that uses "X-My-Header" must respond to a preliminary request with this header in its permission list.
If the title is not allowed, the developer console displays the following error::
X header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
How do I enable CORS on my server?
You can easily change the CORS settings on any Apache server by modifying the ".htaccess " file.
For NGINX users, enabling CORS is done using the main Headers module.
How to enable CORS on WordPress
1. Configure the CORS header function
Add the following code to the file "functions.php".
Here you can check whether your environment is in working mode. If so, the value of "$origin_url" will change to your current domain.
2. Enable the CORS feature
Add the following action "rest_api_init". It is added directly below the "initCors" function that we just created.
3. Allow support for multiple sources
If you want to add support for multiple sources, create an array of allowed sources.
How do I avoid using CORS?
Working with CORS may complicate your setup. You can always bypass CORS by adding a proxy server between your web server and the API, which gives the impression that requests come and go from the same domain. However, this should only be used as a temporary solution during development.
Website Security with CORS
CORS is a way to improve the client-side protection of your web application, but it can't be used as the only layer of protection.
It is worth noting that CORS does not protect against cross-site scripting (XSS), and if configured incorrectly, it can make your site vulnerable to attacks. It is not difficult for an attacker to directly fake a request from any trusted source, so you need to implement server-side security rules.
Apply the following security measures for your site:
(c) https://www.securitylab.ru/analytics/536143.php
For modern web applications, downloading resources from multiple domains is a common practice. These resources are accessed using CORS technology. For example, if you need to get user information on your site "www.mysite.com" from a server located on the site "api.website.com", you must send a request to the server and get a response in the form of JSON data.
What is CORS?
sharing resources between different sources – CORS (Cross-Origin Resource Sharin) is a mechanism that grants permissions to upload resources from one source to another, while maintaining the integrity of the site and protecting it from unauthorized access. Modern browsers use this to determine which cross-site requests are secure.
For security reasons, browsers restrict access from scripts to other resources that exist outside their domain, using the Same-Origin Policy. This policy protects against identity theft from other web servers or Cross-Site Request Forgery (CSRF) attacks.
In this case, one source, the attacker's site, tries to access the resource from the source – the online banking site. The Same-Origin Policy blocks a cybercriminal from accessing your banking data.
However, domain restriction rules restrict specialists from accessing resources from different sources. This is why the CORS HTTP protocol was developed to tell the browser that limited resources on a web page can be requested from other domains.
For example, here is a possible scenario for requesting information from an external source, such as an API (common practice for client-side JavaScript code):
- The resource source makes a preliminary request to an external web server using CORS headers;
- The external web server then checks this preliminary request to make sure that scripts are allowed to make the request.;
- After verification, the external web server responds with its own set of HTTP headers that define valid request methods, sources, and custom headers. The server response may also include information about whether it is acceptable to transmit credentials, such as authentication headers.
Why do ICORS?
If you want to use resources from a server other than your own, you will need to use CORS.
Some examples of what you can do with CORS include:
- Using web fonts or style sheets (Google Fonts or Typekit) from a remote domain;
- Specifying users ' location on the map via the Google Map API:
- Displaying tweets from the Twitter
API handle: - Using a Headless CMS for Content management;
- Access to any API hosted on another domain or subdomain.
How does CORS work?
CORS starts when a script from one source sends a request to another source. All this is controlled by a pre-request that exchanges HTTP request headers and response headers, which are called "CORS headers".
Let's take a closer look at how preliminary queries work.
Preliminary request
A preflight request is an additional HTTP request using the "OPTIONS" method. The browser does this for every insecure request that is intended to modify data, such as POST, PUT, or DELETE requests.
A pre-request is standard behavior for modern web browsers. The expected response from the app is a response containing CORS headers with the correct instructions.
Example of a preliminary request:
Here we see several specific HTTP headers. These are some of the most common CORS headers used in browser requests and server responses:
- Access-Control-Allow-Origin
- Access-Control-Allow-Methods
- Access-Control-Allow-Headers
Access-Control-Allow-Origin
Imagine the following scenario: I want to allow an application hosted on , access to the resource.
In this case, I need to specify the following:
Access-Control-Allow-Origin: https://mywebsite.com
In addition, adding a custom Access-Control-Allow-Origin header to object stores such as AWS S3 or Google Storage will optimize throughput, optimize resource usage, and speed up data retrieval.
Access-Control-Allow-Origin can also be used if another site completely copies yours, which negatively affects your site's SEO. This way, your website content will not be displayed on the mirror site. But you can also file a DMCA Takedown Notice to remove your content from another site, because an attacker can bypass the Access-Control-Allow-Origin policy by using a proxy server.
Security issues with Access-Control-Allow-Origin
Quite often, you can find applications that use this notation for Access-Control-Allow-Origin:
The " * " character tells the browser to allow access to the resource from any source, effectively disabling the Same-Origin Policy. This means that the browser will not filter sources. Any code on any site can make a request to the resource (including malicious domains).
In addition, the "*" symbol is widely used by hackers, especially for web skimmers. AJAX requests are sent from checkout pages on hacked sites to malicious servers that transmit stolen payment details.
For example, this JavaScript skimmer uses a request from different sources with the corresponding CORS headers to send stolen data to a third-party server.
Part of the JavaScript credit card skimmer exfiltration.
Here is an example of the CORS headers used for the web skimmer exfiltration URL:
Basically, hackers use these CORS headers with " * " on their servers to get data from any hacked websites. This way, if you also use CORS headers with " * " for any server responses, you make it easier for attackers to use your sites to steal data.
Access-Control-Allow-Methods
When developing a RESTful API, most endpoints will accept the GET, POST, PUT, PATCH, and DELETE methods.
You can use the Access-Control-Allow-Methods header to specify exactly which HTTP methods your application should provide to external sources. This can help reduce the risk of any unwanted activity in your environment.
This header reserves the use of POST, PUT, PATCH, and any type of HTTP method that is used to modify the content of an application in your domain. This allows external applications to use read-only GET requests for resources.
Access-Control-Allow-Headers
The purpose of the Access-Control-Allow-Headers header is to allow custom headers. For example, an app that uses "X-My-Header" must respond to a preliminary request with this header in its permission list.
If the title is not allowed, the developer console displays the following error::
X header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
How do I enable CORS on my server?
You can easily change the CORS settings on any Apache server by modifying the ".htaccess " file.
- Open a file manager or sFTP;
- Go to the directory of your website;
- Open your ".htaccess" file or create a new one;
- Include the CORS directives in the file content.
For NGINX users, enabling CORS is done using the main Headers module.
How to enable CORS on WordPress
1. Configure the CORS header function
Add the following code to the file "functions.php".
Here you can check whether your environment is in working mode. If so, the value of "$origin_url" will change to your current domain.
2. Enable the CORS feature
Add the following action "rest_api_init". It is added directly below the "initCors" function that we just created.
3. Allow support for multiple sources
If you want to add support for multiple sources, create an array of allowed sources.
How do I avoid using CORS?
Working with CORS may complicate your setup. You can always bypass CORS by adding a proxy server between your web server and the API, which gives the impression that requests come and go from the same domain. However, this should only be used as a temporary solution during development.
Website Security with CORS
CORS is a way to improve the client-side protection of your web application, but it can't be used as the only layer of protection.
It is worth noting that CORS does not protect against cross-site scripting (XSS), and if configured incorrectly, it can make your site vulnerable to attacks. It is not difficult for an attacker to directly fake a request from any trusted source, so you need to implement server-side security rules.
Apply the following security measures for your site:
- do not use the wildcard character " * " to prevent each loaded script from linking to the resource.;
- check all access control request headers against the appropriate access lists;
- try a simple but secure string comparison with an array of trusted values to reduce the risk.;
- use as many levels of protection as possible;
- regularly apply updates with software vulnerability fixes;
- configure access control rules;
- use the website's firewall.
(c) https://www.securitylab.ru/analytics/536143.php
