Help Center> Object Storage Service> BrowserJS> FAQs> How Do I Interact with OBS Without Exposing My AK and SK?
Updated on 2023-11-09 GMT+08:00

How Do I Interact with OBS Without Exposing My AK and SK?

Using BrowserJS SDK to interact with OBS will expose the AK and SK to the frontend, which has security risks. To avoid this problem, the frontend can use the temporarily signed URL generated by the backend to interact with OBS.

The following takes an upload as an example.
// Use the Node.js SDK at the backend.
// Import the OBS library.
const ObsClient = require('esdk-obs-nodejs');
// Perform initialization.
const obsClient = new ObsClient({
    // Hard-coded or plaintext AK/SK are risky. For security purposes, encrypt your AK/SK and store them in the configuration file or environment variables. In this example, the AK/SK are stored in environment variables for identity authentication. Before running this example, configure environment variables AccessKeyID and SecretAccessKey.
    // The front-end code does not have the process environment variable, so you need to use a module bundler like webpack to define the process variable.
    // Obtain an AK/SK pair on the management console. For details, see https://support.huaweicloud.com/intl/en-us/usermanual-ca/ca_01_0003.html.
    access_key_id: process.env.AccessKeyID,
    secret_access_key: process.env.SecretAccessKey,
    //CN-Hong Kong region is used here as an example. Replace it with the one in your actual situation.
    server: 'https://obs.ap-southeast-1.myhuaweicloud.com'
    
});
// The frontend transfers the following three parameters to the backend for calculating the signature:
// Bucket name
const bucketName = 'bucketName';
// Object name
const objectKey = 'object';
// HTTP request method
const method = 'PUT'
// The backend calculates the signed URL and returns it to the frontend.
const res = obsClient.createSignedUrlSync({ Method : method, Bucket : bucketName, Key: objectKey, Expires: 3600 });

// The frontend sends an HTTP request to OBS.
// The frontend uses the Axios library.
const url = res.SignedUrl;
const file = document.getElementById('input[type=file]')[0].file
if (!file) {
   console.log('your file is undefined')
}
// Clear the default headers added by the Axios library.
axios.defaults.headers.put = {};

axios.put(url, file)
  .then(res => console.log(res))
  .catch(err => console.error(err));

When using this solution, you may encounter cross-origin problems. Go through the following list in order, to locate the problem:

  1. If no CORS rules are configured, configure one on OBS Console. For details, see Configuring CORS.
  2. Check whether the signature parameters are correct by referring to Authentication of Signature in a URL. As described in the demo above, the PUT method of Axios automatically adds request headers, but the temporary URL generated by the backend is not involved in the calculation. In such case, the cross-origin problem occurs and when you view the network tag to check the corresponding request, status code 403 will be displayed.