This topic describes how to quickly access the OSS service in the BrowserJS-SDK, including uploading/downloading files and viewing file lists.

Notice Since the Alibaba Cloud account AccessKey gives you permission to access all APIs, we recommend that you not use the AK that can cause configuration leak by following the Alibaba Cloud Security Best Practices. Therefore, you must create and use STS (temporary account permission) to authorize the client.

For more information about browser usage, see Browser Application.

For demo project, seeexample.

Bucket settings

The CORS settings of the bucket must be enabled to access OSS directly in a browser:

  • Set allowed origins to *
  • Set allowed methods to PUT, GET, POST, DELETE, and HEAD.
  • Set allowed headers to *.
  • Set expose headers to ETag x-oss-request-id.
Notice Set the CORS rule as the first option.

Use the SDK

Currently, browsers do not support direct bucket-related operations (for example, list buckets, and get/set bucket logging/referer/website/cors), but support object-related operations (for example, upload/download files, and view file lists).

  • Include the SDK

    First, include the following tags in the <head> of the HTML file: 

    <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script>

    For more introduction methods, see Installation.

    Create a client using new OSS.Wapper(). OSS.Wrapper provides an asynchronous API similar to the callback method to process the returned results in .then() and process errors in .catch().

  • Build an STS Server and obtain temporary authorization information from the client
    1. Activate the STS service for your account. If the service has been activated, you can skip this step. To activate the STS service, see STS Activation. For more information on how to configure OSS authorization policy, see RAM and STS authorization policy configuration.
    2. Apply the exclusive STS signature service through the STS SDK or API. To help you quickly get started with the STS service, we provide demo programs in multiple languages:
      Note The demo program is only used as reference for STS feature implementation. To implement STS features in the production environment, you must develop codes required for authentication and other functions.
    3. Initiate requests to the STS service built in the frontend (browser) to obtain the STS temporary authorization information.
      <script type="text/javascript">
  //OSS. urlib is the logic of sending requests encapsulated within the SDK. Developers can use any library that sends requests to send requests to 'sts-server '.
  OSS.urllib.request("http://your_sts_server/", {method: 'GET'}, (err, response) => {
      if (err) {
	    return alert(err);
      }
      try {
        result = JSON.parse(response);
      } catch (e) {
          errmsg = 'parse sts response info error: ' + e.message;
          return alert(errmsg);
      }
     // console.log(result)
   })
</script>
  • View the object list
    <script type="text/javascript">
OSS.urllib.request("http://your_sts_server/", {method: 'GET'}, (err, response) => {	
  if (err) {
	return alert(err);
  }

  try {
    result = JSON.parse(response);
  } catch (e) {
    return alert('parse sts response info error: ' + e.message);
  }
  
  let client = new OSS({
    accessKeyId: result.AccessKeyId,
	accessKeySecret: result.AccessKeySecret,
	stsToken: result.SecurityToken,
	endpoint: '<oss endpoint>',
	bucket: '<Your bucket name>'
  });
  
  client.list({
    'max-keys': 10
  }).then(function (result) {
    console.log(result);
  }).catch(function (err) {
    console.log(err);
  });
});
</script>

    The parameter region refers to the region used when you applied for OSS, such as oss-cn-hangzhou. The completeregion list can be viewed in OSS Nodes.

    Open the HTML file in the browser, and open the Chrome Developer Console to view the result in List files.

    Notice A browser is an untrusted environment. An extremely high risk occurs if you store the AccessKeyID and AccessKeySecret in a browser. We recommend that you only use plaintext settings for testing purposes. STS authentication mode or self-signed mode is recommended for business applications. For more information, see Resource Access Management and Direct Transfer on a Mobile Device.
  • Upload an object

    We use the multipartUpload API to upload objects. For more information about multipartUpload, see Multipart upload. 

    <body>
  <input type="file" id="file" />
  <script type="text/javascript">
    document.getElementById('file').addEventListener('change', function (e) {
      let file = e.target.files[0];
      let storeAs = 'upload-file';
      console.log(file.name + ' => ' + storeAs);
	  //OSS. urlib is the logic of sending requests encapsulated within the SDK. Developers can use any library that sends requests to send requests to 'sts-server '.
	  OSS.urllib.request("http://your_sts_server/", {method: 'GET'}, (err, response) => {
		  if (err) {
			return alert(err);
		  }
		  try {
			result = JSON.parse(response);
		  } catch (e) {
			return alert('parse sts response info error: ' + e.message);
		  }
		  let client = new OSS({
			accessKeyId: result.AccessKeyId,
			accessKeySecret: result.AccessKeySecret,
			stsToken: result.SecurityToken,
			endpoint: '<oss endpoint>',
			bucket: '<Your bucket name>'
		  });
          //storeAs indicates the uploaded object name and file indicates the uploaded file.
		  client.multipartUpload(storeAs, file).then(function (result) {
			console.log(result);
		  }).catch(function (err) {
			console.log(err);
		  });
		});
	});
  </script>
</body>
  • Download objects

    You cannot directly operate on files in the browser. Therefore, the download link of a file is generated using the signed URL method, andyou can download the file by clicking the link. 

    <body>
  <input type="button" id="download" value="Download" />
  <script type="text/javascript">
    document.getElementById('download').addEventListener('click', function (e) {
      let objectKey = 'test/download_file';
      let saveAs = 'download_file';
      console.log(objectKey + ' => ' + saveAs);
	  //OSS. urlib is the logic of sending requests encapsulated within the SDK. Developers can use any library that sends requests to send requests to 'sts-server '.
	  OSS.urllib.request("http://your_sts_server/", {method: 'GET'}, (err, response) => {
		  if (err) {
			return alert(err);
		  }
		  try {
			result = JSON.parse(response);
		  } catch (e) {
			return alert('parse sts response info error: ' + e.message);
		  }
		  let client = new OSS({
			accessKeyId: result.AccessKeyId,
			accessKeySecret: result.AccessKeySecret,
			stsToken: result.SecurityToken,
			endpoint: '<oss endpoint>',
			bucket: '<Your bucket name>'
		  });
		  let result = client.signatureUrl(objectKey, {
			expires: 3600,
			response: {
			  'content-disposition': 'attachment; filename="' + saveAs + '"'
			}
		  });
		  console.log(result);
		  window.location = result;
		});
    });
  </script>
</body>