更新时间:2024-04-26 GMT+08:00
如何在不暴露AKSK的条件下实现与OBS交互?
使用BrowserJS SDK与OBS服务交互时,必须将AK/SK暴露到前端,这样会存在安全问题。为避免该问题出现,可让后端生成临时签名URL给前端后,前端再与OBS交互。
比如:实现上传功能。
// 后端使用NodeJS SDK // 引入obs库 const ObsClient = require('esdk-obs-nodejs'); // 初始化 const obsClient = new ObsClient({ // 认证用的ak和sk硬编码到代码中或者明文存储都有很大的安全风险,建议在配置文件或者环境变量中密文存放,使用时解密,确保安全;本示例以ak和sk保存在环境变量中为例,运行本示例前请先在本地环境中设置环境变量AccessKeyID和SecretAccessKey。 // 前端本身没有process对象,可以使用webpack类打包工具定义环境变量,就可以在代码中运行了。 // 您可以登录访问管理控制台获取访问密钥AK/SK,获取方式请参见https://support.huaweicloud.com/intl/zh-cn/usermanual-ca/ca_01_0003.html access_key_id: process.env.AccessKeyID, secret_access_key: process.env.SecretAccessKey, // 这里以中国-香港为例,其他地区请按实际情况填写 server: 'https://obs.ap-southeast-1.myhuaweicloud.com' }); // 以下三个参数由前端传给后端,方便后端计算签名 // 桶名 const bucketName = 'bucketName'; // 对象名称 const objectKey = 'object'; // Http请求方法 const method = 'PUT' // 添加Content-Type,按文件类型填写,此处以text/plain为例 const headers = { 'Content-Type' : 'text/plain' } // 计算签名URL,然后返给前端 const res = obsClient.createSignedUrlSync({ Method : method, Bucket : bucketName, Key: objectKey, Expires: 3600, Headers : headers }); // 前端拿到计算签名URL,向OBS发起Http请求 // 前端使用axios请求库 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));
![](https://support.huaweicloud.com/intl/zh-cn/sdk-browserjs-devg-obs/public_sys-resources/caution_3.0-zh-cn.png)
在使用该方案时可能会遇到跨域问题,请按照以下步骤依次排查问题:
- 未配置跨域,需要在控制台配置CORS规则,请参考配置桶允许跨域请求。
- 签名计算问题,请参考URL中携带签名排查签名参数是否正确,比如上述demo中,Axios的PUT方法会自动添加请求头,而后端生成的临时授权URL并没有参与计算,这个时候就会出现跨域问题,查看network标签查看相应的请求会出现403状态码,如下图所示。
父主题: FAQ