如何安全隐藏前端调用的Azure Blob URL并限制直接访问？

方案1：使用带限制条件的SAS令牌 #

直接暴露Blob的永久URL必然会被获取，改用临时SAS令牌是最常见的解决方式：

• 生成SAS时，严格限制访问范围：
  • 设置Allowed Origins为你的Cloudflare站点域名（如https://your-domain.com）
  • 仅赋予读权限（r），不要给写或删除权限
  • 设置较短的过期时间（比如1小时），降低泄露后的风险
• 不要在前端硬编码SAS令牌，而是由后端接口动态生成并返回临时SAS URL。前端每次请求数据时，先调用后端接口拿到有效SAS URL，再去请求Blob数据。

这样即使SAS URL被审查元素获取，也只能在你的站点域名下使用，且过期后自动失效，无法长期滥用。

方案2：通过Cloudflare Workers做代理层 #

利用Cloudflare Workers作为中间代理，完全隐藏Azure Blob的真实地址：

1. 编写一个Worker脚本，拦截前端请求，验证请求来源后，再去请求Azure Blob并返回数据
2. 前端只需要请求Worker的端点，看不到底层的Blob URL

示例Worker代码：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // 验证请求来源
  const allowedOrigin = 'https://your-domain.com';
  const origin = request.headers.get('Origin');
  if (origin !== allowedOrigin) {
    return new Response('Forbidden', { status: 403 });
  }

  // 替换为你的Blob地址和临时SAS令牌（建议从环境变量读取，不要硬编码）
  const blobBaseUrl = 'https://your-storage-account.blob.core.windows.net/your-container';
  const sasToken = YOUR_SAS_TOKEN; // 可通过Cloudflare Workers环境变量配置
  const targetBlobUrl = `${blobBaseUrl}/${request.url.split('/').pop()}?${sasToken}`;

  // 请求Blob并转发响应
  const blobResponse = await fetch(targetBlobUrl);
  return new Response(blobResponse.body, {
    headers: {
      'Access-Control-Allow-Origin': allowedOrigin,
      'Content-Type': blobResponse.headers.get('Content-Type')
    }
  });
}

部署Worker后，前端请求https://your-worker.your-domain.com/your-blob-name即可获取数据，完全看不到Azure Blob的真实地址。

方案3：修正Azure Blob的CORS配置 #

之前配置CORS导致无法共享，大概率是参数设置错误，正确的CORS规则应该这样配置：

• Allowed Origins：填写你的Cloudflare站点完整域名（如https://your-domain.com，不要用*）
• Allowed Methods：勾选GET（仅允许读取操作）
• Allowed Headers：填写*或必要的请求头（如Origin, Content-Type）
• Exposed Headers：按需填写（如Content-Length, Content-Type）
• Max Age：设置为3600（缓存CORS规则1小时）

配置路径：Azure Portal → 你的存储账户 → Blob服务 → CORS → 添加规则。

正确配置后，只有你的站点能通过AJAX请求Blob URL，用户直接在浏览器地址栏访问Blob URL会因缺少合法Origin头被拒绝，但前端正常请求不受影响。

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