React项目中Active Storage直传S3遇IAM策略403加密问题

问题核心 #

虽然从/rails/active_storage/direct_uploads获取的预签名URL包含x-amz-server-side-encryption=AES256查询参数，但S3的IAM策略检查的是请求Header中的x-amz-server-side-encryption值，而非URL参数。默认的@rails/activestorage DirectUpload组件不会自动将URL中的该参数转为请求Header，因此触发了Deny规则导致403。

解决步骤 #

1. 验证请求Header
   打开浏览器开发者工具的Network面板，找到上传时的PUT请求，查看Request Headers中是否存在x-amz-server-side-encryption: AES256。如果没有，确认是Header缺失导致的问题。

2. 修改前端上传代码，强制添加加密Header
   重写DirectUpload的上传逻辑，在发起PUT请求时主动添加加密Header：

const getLogoBlob = (logo: File, callback: (blob: any) => void) => {
  const upload = new DirectUpload(logo, `${env.baseUrl}/rails/active_storage/direct_uploads`);

  upload.create(async (error, directUploadBlob) => {
    if (error) {
      throw new Error('Failed to initiate direct upload');
    }

    // 手动构造PUT请求，携带加密Header
    const response = await fetch(directUploadBlob.signed_id, {
      method: 'PUT',
      headers: {
        'x-amz-server-side-encryption': 'AES256',
        'Content-Type': logo.type || 'application/octet-stream',
        ...(directUploadBlob.headers ? directUploadBlob.headers : {})
      },
      body: logo
    });

    if (!response.ok) {
      throw new Error(`S3 upload failed: ${response.statusText}`);
    }

    callback(directUploadBlob);
  });
};

3. 优化IAM策略（可选）
   移除对桶本身（arn:aws:s3:::<bucket>）的PutObject权限控制，因为PutObject操作仅作用于桶内对象，无需对桶资源设置：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowS3ObjectOperations",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject"
            ],
            "Resource": "arn:aws:s3:::<bucket>/*"
        },
        {
            "Sid": "DenyUnencryptedUploads",
            "Effect": "Deny",
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::<bucket>/*",
            "Condition": {
                "StringNotEquals": {
                    "s3:x-amz-server-side-encryption": "AES256"
                }
            }
        }
    ]
}

验证 #

修改后重新发起上传，检查Network面板中的PUT请求是否包含x-amz-server-side-encryptionHeader，同时确认S3对象已启用AES256加密。

内容的提问来源于stack exchange，提问作者MoonLight