You can add signatures on the client by using JavaScript and upload data to Object Storage Service (OSS). With this method, you can directly upload objects from the client to OSS, which simplifies the workflow and accelerates the upload. This topic describes how to add signatures on the client based on POST policies and upload data to OSS by using form upload.
Usage notes
After you use JavaScript to add signatures on the client, you can upload data to OSS. However, your AccessKey ID and AccessKey secret may be exposed because they are included in the JavaScript code. We recommend that you Obtain signature information from the server and upload data to OSS or Use temporary credentials provided by STS to access OSS.
The application server code provided in this topic supports protocols such as HTML 4, HTML 5, Flash, and Silverlight. Make sure that your browser supports these protocols. If the "Your browser does not support Flash, Silverlight, or HTML5!" message appears, you need to upgrade your browser.
Procedure
Quick deployment
You can use Resource Orchestration Service (ROS) to configure an Elastic Compute Service (ECS) instance and an OSS bucket, and deploy client source code on the ECS instance. To use ROS to add signatures on the client based on POST policies and upload data to OSS, perform the following steps:
Deploy cloud resources with a few clicks.
Go to the Create Stack wizard in the ROS console.
In the Select Template step of the Create Stack wizard in the ROS console, enter a stack name and the name of an OSS bucket that you want to create. Specify the zone, instance type, system disk category, and password for the ECS instance that you want to purchase, and then click Create.
On the Stack Information tab of the page that appears, the status of the stack is Creating.
After the status of the stack becomes Created, click the Outputs tab to view the resources, such as the ECS instance and OSS bucket, that are deployed with a few clicks.
Add signatures on the client and upload data to OSS.
On the Outputs tab, copy the value of UploadPath and open it in your browser.
On the Transfer Data from Web Client to OSS page, click Select File, select a file of a specific type, and then click Upload.
Release test resources to avoid unnecessary costs.
In the upper-right corner of the stack page, click Delete.
In the Delete Stack dialog box, set Method to Delete the Stack to Release Resources and click OK.
Manual deployment
Step 1: Download the client code that runs on browsers
Plupload is used in this example to upload form data (PostObject) to OSS. You can run the sample code in JavaScript on WeChat or browsers of computers or mobile phones. You can select multiple objects and specify the directory to which the objects are uploaded. You can also specify whether the names of the objects that you want to upload are the same as the names of the local files that you uploaded or whether the names are randomly specified by OSS. You can view the upload progress in the progress bar.
Download the browser client code package.
Decompress the downloaded package.
In this example, Plupload is used as the frontend plug-in. You can use a different plug-in based on your business requirements.
Step 2: Modify the configuration file
Modify access configurations.
Open the upload.js file and use one of the following methods to modify the access configurations:
Use a RAM user
// The AccessKey pair of an Alibaba Cloud account has permissions on all API operations. Using these credentials to perform operations in OSS is a high-risk operation. We recommend that you use a RAM user to call API operations or perform routine O&M. To create a RAM user, log on to the RAM console. accessid= 'yourAccessKeyId'; accesskey= 'yourAccessKeySecret'; // Specify the domain name of a bucket. Format: BucketName.Endpoint. Example: http://examplebucket.oss-cn-hangzhou.aliyuncs.com. host= 'yourHost'; ..... new_multipart_params = { .... 'OSSAccessKeyId': accessid, .... };
Use STS
// Specify the temporary AccessKey pair obtained from Security Token Service (STS). The AccessKey pair consists of an AccessKey ID and an AccessKey secret. accessid= 'yourAccessKeyId'; accesskey= 'yourAccessKeySecret'; // Specify the domain name of a bucket. Format: BucketName.Endpoint. Example: http://examplebucket.oss-cn-hangzhou.aliyuncs.com. host = 'http://examplebucketbucket.oss-cn-hangzhou.aliyuncs.com'; // Specify the Alibaba Cloud Resource Name (ARN) of the specified role. Example: acs:ram::137918634953****:role/test. STS_ROLE = ''; ..... new_multipart_params = { .... 'OSSAccessKeyId': STS.accessid, // Specify the security token obtained from STS. 'x-oss-security-token':STSToken, .... };
For more information about the ARN of a role, see AssumeRole.
For more information about how to obtain temporary access credentials from STS, see Use temporary credentials provided by STS to access OSS.
Modify the policyText configuration to change the validity period of objects (expiration) and the size limit of the objects that you want to upload (content-length-range).
var policyText = { "expiration": "2023-12-01T12:00:00.000Z", // Specify the validity period of objects in the policy. The time must be in UTC. After the validity period ends, you cannot upload objects. "conditions": [ ["content-length-range", 0, 1048576000] // Specify the size limit for the object that you want to upload. Unit: bytes. In this example, the size limit is 1 GB. If the object that you want to upload exceeds the size limit, the object fails to be uploaded to OSS. If you do not specify a size limit, you can upload an object whose size is up to 5 GB. ] }
For more information, see Appendix: Policy.
Step 3: Configure CORS
When you use form upload to upload data from the client to OSS, a request that contains the Origin
header is sent from the browser to OSS. OSS verifies whether a request that includes the Origin
header is a cross-origin request. Therefore, you must configure cross-origin resource sharing (CORS) rules for the bucket to allow POST-based requests.
Log on to the OSS console.
In the left-side navigation pane, click Buckets. On the Buckets page, find and click the desired bucket.
In the left-side navigation pane, choose .
On the CORS page, click Create Rule and configure the parameters shown in the following figure.
ImportantTo ensure data security, we recommend that you specify the actual domain name from which you want OSS to allow requests in the Source field. For more information, see Configure CORS.
Step 4: Add signatures on the client and upload data to OSS
Open the index.html file in the directory that stores the decompressed downloaded file.
Click Select File to select one or more objects that you want to upload. Then, select naming conventions for the objects, and specify the directory in which you want to store the objects.
Click Upload and wait until the upload is complete.
After the upload is complete, log on to the OSS console to view the upload objects.
Core code analysis
OSS supports POST requests. You must add a signature to a POST request when you use Plupload to send the request.
To ensure that the code runs as expected, we recommend that you put the OSSAccessKeyId parameter in front of the key, success_action_status, and other parameters.