如何防止S3存储桶图片URL被React应用外部非法访问？

核心思路：让S3资源仅对授权用户开放，避免直接暴露永久可访问的URL #

1. 使用S3预签名URL（推荐） #

• 先把S3桶设置为私有，关闭所有公开访问权限（包括桶策略和访问控制列表），确保默认情况下没人能直接访问桶里的图片。
• React端不要直接用S3的固定URL，而是先调用你的后端接口，后端先验证用户的登录状态和权限（比如检查用户的JWT令牌、是否有权限查看该图片）。
• 后端通过AWS SDK生成带过期时间的预签名URL，这个URL只有在有效期内（比如15分钟）能访问，过期自动失效。把这个URL返回给React，前端用它加载图片。
• 示例代码（Node.js后端）：

  const AWS = require('aws-sdk');
  const s3 = new AWS.S3();
  
  async function generatePresignedUrl(key) {
    const params = {
      Bucket: 'your-bucket-name',
      Key: key,
      Expires: 900 // 15分钟，单位秒
    };
    return s3.getSignedUrl('getObject', params);
  }
  

2. 搭配CloudFront使用签名URL/Cookie #

• 如果你的图片需要CDN缓存优化，用CloudFront作为S3的前端分发层：
  • 把S3桶设为私有，仅允许CloudFront的访问身份访问桶资源。
  • 在CloudFront中配置签名URL或签名Cookie，只有带有效签名的请求才能通过CloudFront访问图片。
  • 后端同样先验证用户身份，再生成CloudFront签名URL/Cookie返回给React，前端用这个来加载图片。签名可以设置过期时间，进一步限制访问时长。

3. 桶策略辅助限制访问来源 #

• 作为补充手段，给S3桶添加桶策略，限制只有特定来源（比如你的React应用域名、CloudFront域名）能访问：
  • 示例桶策略：

    {
      "Version": "2012-10-17",
      "Statement": [
        {
          "Effect": "Allow",
          "Principal": "*",
          "Action": "s3:GetObject",
          "Resource": "arn:aws:s3:::your-bucket-name/*",
          "Condition": {
            "StringEquals": {
              "aws:Referer": "https://your-react-app-domain.com"
            }
          }
        }
      ]
    }
    

  • 注意：这个方法不能完全防止伪造Referer的情况，只能作为和前面方案配合的辅助措施。

4. 强化应用层身份验证 #

• 在React端，确保只有已登录且权限符合的用户才能触发获取图片URL的请求。比如路由层面做保护，未登录用户无法进入需要查看图片的页面。
• 后端在生成预签名URL或CloudFront签名前，严格校验用户的身份和权限，比如检查用户是否拥有该图片的访问权限，避免错误登录的用户拿到访问链接。

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