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



我正在使用带有 boto3 的预签名 URL 来"保护"(或至少限制访问(存储在 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。

定义了相对网址(例如(:

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 进行签名才能访问这些路径。

我该如何解决此问题?

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

对于谷歌云存储,我遵循了这个 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 中解决方案的链接

最新更新