【避坑指“难”】OSS上传视频：服务端签名后直传（vue+element-ui）全攻略

2023-12-24 21:30:04

前言

在现代互联网应用中，视频内容扮演着越来越重要的角色。为了满足用户对视频内容的需求，开发人员经常需要将视频上传到云存储平台，如阿里云OSS。然而，传统的客户端签名直传方式存在安全隐患，因为AccessKey ID和AccessKey Secret会被暴露在前端页面。

为了解决这个问题，阿里云提供了服务端签名后直传的方案。这种方案可以有效地保护AccessKey ID和AccessKey Secret不被泄露，从而确保数据的安全性。

本文将详细介绍阿里云OSS上传视频的服务端签名后直传方案。我们将从前端加密策略的生成开始，然后介绍如何生成签名，最后演示直传流程。

前端加密策略生成

前端加密策略是一个JSON字符串，它包含了OSS上传视频所需的各种参数。这些参数包括：

AccessKeyId：OSS的访问密钥ID。
Policy：OSS的上传策略。
Signature：OSS的签名。
Key：OSS的对象名称。
SuccessActionStatus：上传成功后的回调状态码。
Callback：上传成功后的回调地址。

其中，Policy和Signature是需要我们动态生成的。

Policy的生成代码如下：

function generatePolicy(expiration) {
  const policyText = {
    expiration, // 设置Policy的过期时间
    conditions: [
      ["starts-with", "$key", ""],
      ["content-length-range", 0, 1048576000], // 设置上传文件大小限制为100MB
    ],
  };
  return btoa(JSON.stringify(policyText));
}

Signature的生成代码如下：

function generateSignature(policy, accessKeySecret) {
  const hmac = CryptoJS.HmacSHA1(policy, accessKeySecret);
  return hmac.toString(CryptoJS.enc.Base64);
}

签名生成

签名是通过对Policy进行HMAC-SHA1签名生成的。签名的生成代码如下：

function generateSignature(policy, accessKeySecret) {
  const hmac = CryptoJS.HmacSHA1(policy, accessKeySecret);
  return hmac.toString(CryptoJS.enc.Base64);
}