CSS 中的相对字体 URL 在 S3 上导致 403

Posted 2023-02-24

【中文标题】CSS 中的相对字体 URL 在 S3 上导致 403

【英文标题】：Relative font URLs in CSS cause 403s on S3

【发布时间】：2019-02-28 03:57:29

【问题描述】：

我将预签名 URL 与 boto3 一起使用，以“保护”（或至少限制访问）存储在 S3 上的内容（我将相对路径传递给 Django 视图，然后生成存储位置的绝对预签名 URL在 S3 上，然后将此作为重定向传递给客户端，然后检索预期的文件）：

import boto3    

class ContentStreamView(LoginRequiredMixin, RedirectView):


    def get_redirect_url(self, **kwargs):
         ... relevant code below
        s3_client = boto3.client('s3',
                      aws_access_key_id=self.storage_details.access_key,
                      aws_secret_access_key=self.storage_details.secret_key,
                      config=Config(signature_version=self.storage_details.signature_version))

        # Key will equal the filepath to the content required.
        return s3_client.generate_presigned_url(
            ClientMethod='get_object',
            ExpiresIn=60,
            Params=
                'Bucket': self.storage_details.bucket_name,
                'Key': kwargs['filepath']
            
        )

    ... passes the URL back to the client in the get method of the CBV

    def get(self, request, *args, **kwargs): 
        ...
        url = self.get_redirect_url(filepath=path)
        return HttpResponsePermanentRedirect(url)

目前，我在 S3 存储桶上的 CORS 设置如下：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

我用 Django 设置了 CORS 以允许所有：

CORS_ORIGIN_ALLOW_ALL = True

例如，当浏览器尝试访问 https://myapp.com/streamer/some_folder/css/some_css_file.css 时，浏览器会被重定向到（并按预期获取文件）到预签名的 S3 url：https://examplebucket.s3.amazonaws.com/some_folder/css/some_css_file.css?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=credentials%2Faws4_request&X-Amz-Date=20180924T145056Z&X-Amz-Expires=60&X-Amz-SignedHeaders=host&X-Amz-Signature=signature。

这很好用，但是，css 文件中的相对 URL（对于字体和可能的图像）返回 403。

定义了相对 URL（例如）：

some_css_file.css

...
 @font-face 
  font-family: 'Avenir LT';
  font-weight: normal;
  font-style: normal;
  src: url('../Fonts/AvenirLTStd-Book.otf');
 
....

当客户端尝试访问 src: url('../Fonts/AvenirLTStd-Book.otf'); 时，文件中的相对 URL 可能会返回 403，因为存储桶已被锁定，并且需要对 URL 进行签名才能访问这些路径。

我该如何解决这个问题？

【问题讨论】：

您可以先下载此字体再使用...

我可以，但这并不能解决问题。 css 文件仍会尝试引用它无权访问的 S3 位置。

如果您使用 http:/// 等相对路径进行调用，请删除所有尝试在本地下载字体并手动将其导入 css 文件

这些是用户上传的媒体文件（爆炸的 .epub 文件）的集合，所以我不能将导入硬编码为文件名，并且 css 中的包含/导入会因文件而异。

字体的相对路径是什么？

【参考方案1】：

我在使用谷歌云存储时遇到了类似的问题。我的解决方案是将这些特定文件设置为公开。谷歌云存储使人们能够有选择地在存储桶中公开数据，即每个对象级别

对于谷歌云存储，我关注了这个https://cloud.google.com/storage/docs/access-control/making-data-public

可悲的是，我必须对通过 css 文件中的相对 url 链接到的每个文件迭代地执行此操作。这很烦人，但可以完成工作并保持所需的隐私

这里是谷歌云存储https://cloudworks.dukamneti.co.ke/fonts-failed-load-resource-google-cloud-storage/#contact解决方案的链接

【讨论】：

对于我的示例，我无法做到这一点，因为文件需要始终是私有的。