Scenario

In practical ZOS usage, obtaining data stored on the server often requires accessing web browser pages. If CORS is forbidden by the browser, direct access to ZOS data becomes unavailable.

In ZOS, you can create a bucket to store your objects and enable access to them through a public URL. However, if you aim to enable direct access to these objects by web applications from various domains, you may face challenges. For example, if site A needs to retrieve an image object from a ZOS bucket without CORS enabled, the browser will block this cross-domain request. In such cases, you can configure a CORS policy for the bucket to specify that site A is allowed to access objects within it. This enables web applications on the site to access objects within the bucket using the public URL.

Background Information

Same-Origin Policy (SOP)

SOP is a security mechanism that limits interactions between web pages or scripts originating from different sources. It aims to safeguard user privacy and security by preventing malicious websites from accessing sensitive information on other websites through scripts or executing harmful operations.

According to the policy, the browser permits interactions only between web pages sharing the same origin, including actions like reading and modifications. This protects user privacy and security and prevents malicious websites from obtaining sensitive user information through cross-domain requests. In addition, the SOP aids in preventing network security concerns such as Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF).

The concept "same origin" indicates that two URLs originate from the same source. If two URLs share identical protocol, domain name, and port number, they belong to the same origin. The following are some examples to explain this concept:

• https://www.esurfingcloud.com and http://www.esurfingcloud.com use different protocols, so they do not belong to the same origin.

• https://www.esurfingcloud.cn and https://www.esurfingcloud.com have different domain names, so they do not belong to the same origin.

• https:///www.esurfingcloud.com:80 and https:///www.esurfingcloud.com:81 use different ports, so they do not belong to the same origin.

• https:///www.esurfingcloud.com/page.html and https:///www.esurfingcloud.com/other.html share identical protocol, domain name, and port number, so they belong to the same origin.

Configuring CORS

CORS is a mechanism that allows webpages from one domain to access resources from other domains. By configuring the HTTP header on the server, CORS instructs the server to allow or deny requests from varying origins. By doing so, web applications can request data from diverse origins.

CORS Request Types

Browsers classify CORS requests into two types: simple request and not-so-simple request.

• Simple requests are the requests that meet the following conditions simultaneously:

o The request method is one of the following: HEAD, GET, and POST.

o The HTTP header includes only the following fields: Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, and Width. Among them, the value of Content-Type can only be one of the following types: text/plain, multipart/form-data, and application/x-www-form-urlencoded.

• Not-so-simple requests are those that fail to meet the aforementioned conditions simultaneously. When the browser identifies a not-so-simple request, it employs the OPTIONS method to initiate a preflight request to the server, querying whether the server permits this request. The server determines its response based on a predefined CORS policy. If the policy allows the request, the server adds the appropriate header to the response, instructing the browser to proceed with the cross-domain request. Subsequently, the browser sends the actual request.

Advantages:

Enabling CORS has the following advantages:

• Enhanced interactions: CORS facilitates interactions across diverse systems, applications, and platforms. This enhances interactions, allowing data to flow freely in different environments.

• Improved accessibility: CORS enables authorized browsers and clients to access buckets from various origins within ZOS. The improves the accessibility of applications, allowing more users to access these resources.

• Simplified development process: CORS streamlines development and reduces the need for manual operations by development personnel. This improves the development efficiency and speeds up application development and deployment.

• Enhanced security: CORS can limit unauthorized access, mitigating the risk of data leakage. This enhances application security and safeguards user data from unauthorized access or misuse.

• Optimized performance: CORS enables browsers to directly access resources from buckets in ZOS, eliminating the necessity for extra network requests. This optimizes application performance and speeds up the response, improving user experience.

Operation Steps

By configuring CORS, you can leverage ZOS to construct a wide array of web applications and selectively grant them access to your ZOS resources. To configure CORS for your bucket, you can add the configured CORS policy to your bucket. This topic describes how to use the ZOS console or ZOS SDK to enable CORS.

Using the ZOS Console

Prerequisites: You have registered for an eSurfing Cloud account and activated the ZOS service.

Note: After you enabling CORS for a bucket, its ACL and other permission control policies remain applicable.

Click https://console.esurfingcloud.com/console/index/#/ebs/zos/v2/bucketList to open the ZOS console.
Locate the bucket for which you want to configure CORS, and click the bucket name to enter the overview page.
Choose Permission Management > Cross-domain Settings > Setting to access the policy configuration page.
Click Create Policy . In the dialog box that appears, configure parameters and click OKto save the configuration.

The following table describes how to configure the parameters for a CORS policy.

Parameter	Description
Allowed Origins	Specify the allowed sources for CORS. Enter sources on separate lines, with each line containing at most one wildcard character (*).
Allowed Methods	Specify the request methods for CORS. Valid values include GET, POST, DELETE, PUT, and HEAD.
Allowed Headers	Specify the allowed request headers for CORS. Enter headers on separate lines, with each line containing at most one wildcard character (*).
Exposed Headers	Specify the allowed response headers for access by applications.
Cache Time (Seconds)	Specify the cache duration for the returned results of OPTIONS requests to specific resources in browsers.

Using the SDK

The following example illustrates how to use the JAVA SDK to configure CORS:

To use the SDK, ensure that the JAVA and Maven environments are set up on your device. For more information, see JAVA SDK Documentation.

You can use setBucketCrossOriginConfiguration to configure a CORS policy, and use getBucketCrossOriginConfiguration or deleteBucketCrossOriginConfiguration to obtain or delete the CORS policy for your bucket.

import com.amazonaws.ClientConfiguration;
import com.amazonaws.auth.AWSCredentials;
import com.amazonaws.auth.AWSStaticCredentialsProvider;
import com.amazonaws.auth.BasicAWSCredentials;
import com.amazonaws.client.builder.AwsClientBuilder;
import com.amazonaws.services.s3.AmazonS3;
import com.amazonaws.services.s3.AmazonS3ClientBuilder;
import com.amazonaws.Protocol;
import com.amazonaws.services.s3.model.*;
 
import java.util.ArrayList;
import java.util.List;
 
public class CORS {
    public static String ACCESS_KEY = "AK";//Enter your AK here
    public static String SECRET_KEY = "SK";//Enter your SK here
    public static String END_POINT = "End_Point";//Enter the endpoint for accessing your bucket here
    public static String BUCKET_NAME = "bucket-ff177";
       public static void main(String[] string){
        AmazonS3 s3Client = null;
        try {
            // When using HTTPS and self-signed certificate authentication, disable certificate authentication.
            // System.setProperty("com.amazonaws.sdk.disableCertChecking", "true");
            // Use credentials and configurations to establish connections.
            AWSCredentials credentials = new BasicAWSCredentials(ACCESS_KEY, SECRET_KEY);
            ClientConfiguration awsClientConfig = new ClientConfiguration();
            // When using the V2 signature, use "S3SignerType".
            awsClientConfig.setSignerOverride("S3SignerType");
            // When using the V4 signature, use "AWSS3V4SignerType".
            //awsClientConfig.setSignerOverride("AWSS3V4SignerType");
            // By default, HTTPS is used for connections. When using HTTP, explicit assignment is required.
            awsClientConfig.setProtocol(Protocol.HTTP);
 
            s3Client = AmazonS3ClientBuilder.standard()
                    .withCredentials(new AWSStaticCredentialsProvider(credentials))
                    .withClientConfiguration(awsClientConfig)
                    .withEndpointConfiguration(new AwsClientBuilder.EndpointConfiguration(END_POINT, ""))
                    .disableChunkedEncoding()
                    .build();
            System.out.print("=====connect success=====\n");
        }catch (Exception e) {
            System.out.print("=====request fail=====\n");
            System.out.print(e.getMessage());
        }
         // setBucketCrossOriginConfiguration
        CORSRule rule = new CORSRule();
        rule.setId("test1");
        rule.setAllowedMethods(CORSRule.AllowedMethods.GET,CORSRule.AllowedMethods.PUT);
        List orgs = new ArrayList();
        orgs.add("*");
        rule.setAllowedOrigins(orgs);
        BucketCrossOriginConfiguration config = new BucketCrossOriginConfiguration();
        List<CORSRule> lr = new ArrayList<CORSRule>();
        lr.add(rule);
        config.setRules(lr);
        SetBucketCrossOriginConfigurationRequest req =
                new SetBucketCrossOriginConfigurationRequest(BUCKET_NAME,config);
        s3Client.setBucketCrossOriginConfiguration(req);
 
        // getBucketCrossOriginConfiguration
        GetBucketCrossOriginConfigurationRequest req1 =
                new GetBucketCrossOriginConfigurationRequest(BUCKET_NAME);
        BucketCrossOriginConfiguration config1 = s3Client.getBucketCrossOriginConfiguration(req1);
 
        // deleteBucketCrossOriginConfiguration
        DeleteBucketCrossOriginConfigurationRequest req2 =
                new DeleteBucketCrossOriginConfigurationRequest(BUCKET_NAME);
                        s3Client.deleteBucketCrossOriginConfiguration(req2);
 
    }
}

Applied Example

The following example uses a GET request to demonstrate accessing ZOS resources before and after configuring CORS.

Before You Begin

Log in to the ZOS console, create a bucket named "bucket-ff177", and configure its ACL for public read access. Upload a file named "hello.txt" and the file content is "Hello World!".
Click the file to obtain the image access link: https://beijing-5.zos.ctyun.cn/bucket-ff177/hello.txt.
Disable the browser cache: Taking Chrome as an example, press F12 to open the debugger tool. In the upper-right corner, open the menu, choose More tools > Network conditions, then select 停用缓存 , to disable the browser cache.
Fetch API: This modern network request API can serve as a replacement for XMLHttpRequest in the browser. Fetch API supports CORS and can be used to send cross-domain requests.

Procedures

Enter curl https://beijing-5.zos.ctyun.cn/bucket-ff177/hello.txt on the terminal. Verify that the returned information is normal, indicating that the access is allowed.

Use the static HTML page and Fetch API to simulate a cross-domain request for accessing the object, and create a file named "test.html" on the cloud laptop,containing the following content:

<!DOCTYPE html>
<html>
<head>
    <title>Send Get Request</title>
    <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif; } button { margin: 20px; padding: 10px 20px; font-size: 1.2rem; border: none; border-radius: 5px; background-color: #008CBA; color: white; cursor: pointer; } button:hover { background-color: #007B9E; } </style>
</head>
<body>
<button onclick="sendGetCorsRequest()">Send Get Request</button>
<script type="text/javascript">
    var url = "https://beijing-5.zos.ctyun.cn/bucket-ff177/hello.txt";
    function sendGetCorsRequest() {
        fetch(url, {
            method: "GET",
            headers:{"Content-Type": "application/json",}
        }).then(function(res) {
            if (res.ok) {
                alert("The response is ok, get request success!");
            } else {
                alert("The response wasn't ok, got status ", res.status);
            }
        }, function(e) {
            alert("Get request failed!", e);
        }).finally(() => {
            location.reload();
        });
    }
</script>
</body>
</html>

Use the Chrome browser to open the test.html file and click Send Get Request. Verify that the access failed.

The response indicates that the requested resource is restricted due to the absence of the Access-Control-Allow-Origin header. This commonly occurs when resources are requested from different domains, prompting the browser to verify if the request adheres to the CORS policy.

Configure a CORS policy in the console to allow requests from certain source and using certain method, as shown in the following figure:
Use the browser to open the test.html file again. Verify that the operation succeeds.

Zettabyte Object Storage