利用STS临时密钥服务快速搭建直传页面的实践

# 拉取 COS STS SDK 代码:
git clone [https://github.com/tencentyun/qcloud-cos-sts-sdk.git](https://github.com/tencentyun/qcloud-cos-sts-sdk.git)
# 本次使用nodejs环境，进入到nodejs里的demo文件夹
cd qcloud-cos-sts-sdk/nodejs/demo/
# 全局安装express
npm install express-generator -g
# 安装所需要的包模块
npm install body-parser request express

var bodyParser = require('body-parser');var STS = require('../index');var express = require('express');
// 配置参数var config = {    secretId: 'AKID****************',    secretKey: '**********',    proxy: '',    durationSeconds: 1800,
    // 放行判断相关参数    bucket: 'buckettest-1250000000',    region: 'ap-guangzhou',    allowPrefix: '*', // 这里改成允许的路径前缀，可以根据自己网站的用户登录态判断允许上传的具体路径，例子：a.jpg 或者 a/* 或者 * (使用通配符*存在重大安全风险, 请谨慎评估使用)    // 简单上传和分片，需要以下的权限，其他权限列表请看 https://cloud.tencent.com/document/product/436/31923    allowActions: [        // 简单上传        'name/cos:PutObject',        'name/cos:PostObject',        // 分片上传        'name/cos:InitiateMultipartUpload',        'name/cos:ListMultipartUploads',        'name/cos:ListParts',        'name/cos:UploadPart',        'name/cos:CompleteMultipartUpload'    ],};

// 创建临时密钥服务var app = express();app.use(bodyParser.json());
// 支持跨域访问app.all('*', function (req, res, next) {    res.header('Content-Type', 'application/json');    res.header('Access-Control-Allow-Origin', '*');    res.header('Access-Control-Allow-Headers', 'origin,accept,content-type');    if (req.method.toUpperCase() === 'OPTIONS') {        res.end();    } else {        next();    }});
// 临时密钥接口app.all('/sts', function (req, res, next) {
    // TODO 这里根据自己业务需要做好放行判断
    // 获取临时密钥    var shortBucketName = config.bucket.substr(0, config.bucket.lastIndexOf('-'));    var appId = config.bucket.substr(1 + config.bucket.lastIndexOf('-'));    var policy = {        'version': '2.0',        'statement': [{            'action': config.allowActions,            'effect': 'allow',            'principal': { 'qcs': ['*'] },            'resource': [                'qcs::cos:' + config.region + ':uid/' + appId + ':prefix//' + appId + '/' + shortBucketName + '/' + config.allowPrefix,            ],        }],    };    STS.getCredential({        secretId: config.secretId,        secretKey: config.secretKey,        proxy: config.proxy,        durationSeconds: config.durationSeconds,        policy: policy,    }, function (err, tempKeys) {        var result = JSON.stringify(err || tempKeys) || '';        res.send(result);    });});app.all('*', function (req, res, next) {    res.writeHead(404);    res.send({ code: 404, codeDesc: 'PageNotFound', message: '404 page not found' });});
// 启动签名服务app.listen(3333);console.log('app is listening at http://127.0.0.1:3333');

node sts-server.js# 启动 STS 服务，会看到控制台打印的app is listening at http://127.0.0.1:3333

http://42.194.201.209:3333/sts)

http://42.194.201.209:3333/sts

{
"expiredTime": 1592792349,
"expiration": "2020-06-22T02:19:09Z",
"credentials": {
"sessionToken": "mfHiMQfhfPUOF67lopyh9KwkCx0mSumV828468f4042e7bd968906ff80cf77ae7bwh6DeY15XgJ6_Ddr9HmT7SOs38bO-nN8ih7izzRM1H2KJDDE46goteDHe2W1qD9YIRY34bIWpFT6HIvRyKKHBGCCZ_SvTvJX_lRnJU5CCksmsuWlxe5qEzJBvzVmn3GrqZ5-5HaOydNKiuhZKo1PphORN-ViyIFOVYSbkWCG3zR3UGig1FomKOBusLpXLkaYa3b9MuasHsmJs71Rv9jE1gLRjpxi3_eRA19sFun6nzkDGD3WeuYgqx_Rf05dOkJAxe2lO6o5t8b5jGUICbdCQThh1b695yw529ffHsR14IHxYMMBuXp_OShDooOBssD-lZquKBhq9LI4MfWELSHu3qiq_-JagSWMIT_CXYmaw6na6U6Tl4syX78XaZCHwoncIOJg-ADiFOxGAF7cEcafPDaiO-Q0dbTuNBQ7Fc2ZlkTTlznhYuj45tlXJ6_hBwrfCY9RRVUQmoBI8CZJ0_C1ExUHUf2p9g4gGZ1fX8yqNY",
"tmpSecretId": "AKIDrXn4jL7XfaZ-Tj-Qt5VYPGjtt637__z57hXYV31EtA4gne4n-RD_D7mspOrMfVI8",
"tmpSecretKey": "ytqC8ZYE7y3ZrUmmKbnZHxB/ZBNc6jEFHMooRisvI8I="
},
"requestId": "fd494be7-0998-462f-9649-baebacaf2f47",
"startTime": 1592790549
}

[root@VM-0-11-centos data]# mkdir cos-web-test[root@VM-0-11-centos data]# cd cos-web-test/[root@VM-0-11-centos cos-web-test]# express --view=pug
   create : public/   create : public/javascripts/   create : public/images/   create : public/stylesheets/   create : public/stylesheets/style.css   create : routes/   create : routes/index.js   create : routes/users.js   create : views/   create : views/error.pug   create : views/index.pug   create : views/layout.pug   create : app.js   create : package.json   create : bin/   create : bin/www   install dependencies:     $ npm install
   run the app:     $ DEBUG=cos-web-test:* npm start

npm installnpm start

http://42.194.201.209:3000

app.use('/', indexRouter);app.use('/users', usersRouter);
# 需要添加的行app.use('/cos', express.static('public'));
// catch 404 and forward to error handlerapp.use(function (req, res, next) {  next(createError(404));});

<!doctype html><html lang="en"> <head>    <meta charset="UTF-8">    <title>Ajax Put 上传</title>    <style>        h1,        h2 {            font-weight: normal;        }         #msg {            margin-top: 10px;        }</style></head> <body>     <h1>Ajax Put 上传</h1>     <input id="fileSelector" type="file">    <input id="submitBtn" type="submit">     <div id="msg"></div>     <script src="https://unpkg.com/cos-js-sdk-v5/demo/common/cos-auth.min.js"></script>    <script>        (function () {            // 请求用到的参数            var Bucket = 'shuoweiwu-125****742';            var Region = 'ap-guangzhou';            var protocol = location.protocol === 'https:' ? 'https:' : 'http:';            var prefix = protocol + '//' + Bucket + '.cos.' + Region + '.myqcloud.com/';             // 对更多字符编码的 url encode 格式            var camSafeUrlEncode = function (str) {                return encodeURIComponent(str)                    .replace(/!/g, '%21')                    .replace(/'/g, '%27')                    .replace(/(/g, '%28')                    .replace(/)/g, '%29')                    .replace(/*/g, '%2A');            };             // 计算签名            var getAuthorization = function (options, callback) {                // var url = 'http://127.0.0.1:3000/sts-auth' +                // 在这里填入临时密钥STS服务URL地址                var url = 'http://42.194.201.209:3333/sts';                var xhr = new XMLHttpRequest();                xhr.open('GET', url, true);                xhr.onload = function (e) {                    var credentials;                    try {                        credentials = (new Function('return ' + xhr.responseText))().credentials;                    } catch (e) { }                    if (credentials) {                        callback(null, {                            XCosSecurityToken: credentials.sessionToken,                            Authorization: CosAuth({                                SecretId: credentials.tmpSecretId,                                SecretKey: credentials.tmpSecretKey,                                Method: options.Method,                                Pathname: options.Pathname,                            })                        });                    } else {                        console.error(xhr.responseText);                        callback('获取签名出错');                    }                };                xhr.onerror = function (e) {                    callback('获取签名出错');                };                xhr.send();            };             // 上传文件            var uploadFile = function (file, callback) {                var Key = 'dir/' + file.name; // 这里指定上传目录和文件名                getAuthorization({ Method: 'PUT', Pathname: '/' + Key }, function (err, info) {                     if (err) {                        alert(err);                        return;                    }                     var auth = info.Authorization;                    var XCosSecurityToken = info.XCosSecurityToken;                    var url = prefix + camSafeUrlEncode(Key).replace(/%2F/g, '/');                    var xhr = new XMLHttpRequest();                    xhr.open('PUT', url, true);                    xhr.setRequestHeader('Authorization', auth);                    XCosSecurityToken && xhr.setRequestHeader('x-cos-security-token', XCosSecurityToken);                    xhr.upload.onprogress = function (e) {                        console.log('上传进度 ' + (Math.round(e.loaded / e.total * 10000) / 100) + '%');                    };                    xhr.onload = function () {                        if (/^2dd$/.test('' + xhr.status)) {                            var ETag = xhr.getResponseHeader('etag');                            callback(null, { url: url, ETag: ETag });                        } else {                            callback('文件 ' + Key + ' 上传失败，状态码：' + xhr.status);                        }                    };                    xhr.onerror = function () {                        callback('文件 ' + Key + ' 上传失败，请检查是否没配置 CORS 跨域规则');                    };                    xhr.send(file);                });            };             // 监听表单提交            document.getElementById('submitBtn').onclick = function (e) {                var file = document.getElementById('fileSelector').files[0];                if (!file) {                    document.getElementById('msg').innerText = '未选择上传文件';                    return;                }                file && uploadFile(file, function (err, data) {                    console.log(err || data);                    document.getElementById('msg').innerText = err ? err : ('上传成功，ETag=' + data.ETag);                });            };        })();</script> </body> </html>

http://42.194.201.209:3000/cos/test.html