Help Center/ Object Storage Service/ SDK Reference/ BrowserJS/ FAQs/ How Do I Interact with OBS Without Exposing My AK and SK?
Updated on 2024-04-26 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,
    // Replace the example endpoint with the actual one in your case.
    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'
// Add the Content-Type header and specify the file type. text/plain is an example.
const headers = {
    'Content-Type' : 'text/plain'
}
// The backend calculates the signed URL and returns it to the frontend.
const res = obsClient.createSignedUrlSync({ Method : method, Bucket : bucketName, Key: objectKey, Expires: 3600, Headers : headers });

// 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')
}

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. In the demo here, for example, the PUT method of Axios automatically adds a request header. If this header is not passed in the backend for generating a temporary URL, a cross-origin error occurs, and status code 403 is displayed on the Network tab of the browser, as shown below.