Urls in CSS files not getting signed through django-storages

Question

For example, my css code has this image file:

background: url('/static/studyspot5/images/shapes/footer_sass.png');

And it does not render on my AWS site I have the following relevant code in my settings.py:

if USE_S3:
STATICFILES_LOCATION = 'static'
MEDIAFILES_LOCATION = 'media'
MEDIA_URL = f'https://{CLOUDFRONT_DOMAIN}/{MEDIAFILES_LOCATION}/'
MEDIA_ROOT = f'https://{AWS_S3_CUSTOM_DOMAIN}/static/{MEDIAFILES_LOCATION}/'
STATIC_URL = 'https://%s/%s/' % (CLOUDFRONT_DOMAIN,STATICFILES_LOCATION)
STATIC_ROOT = 'https://%s/%s/static/' % (AWS_S3_CUSTOM_DOMAIN,STATICFILES_LOCATION)

STORAGES = {
    "default": {"BACKEND": 'custom_storages.MediaStorage'},
    "staticfiles": {"BACKEND": 'custom_storages.StaticStorage'},
    "OPTIONS": {
        "bucket_name": AWS_STORAGE_BUCKET_NAME,
        "region_name": AWS_S3_REGION_NAME,
        # "verify": AWS_S3_VERIFY,
        "signature_version": AWS_S3_SIGNATURE_VERSION,
        "cloudfront_key_id": AWS_CLOUDFRONT_KEY_ID,
        "cloudfront_key": AWS_CLOUDFRONT_KEY,
        "custom_domain": CLOUDFRONT_DOMAIN,
    },
}

The CSS file (and all other static content) is served as a signed URL just fine, e.g. using the following code:

<link rel="stylesheet" href="{% static 'studyspot5/css/style.css' %}">

But for those urls inside of CSS files, it will only pass the url of the file, without signing it (no parameters). Here is the resulting request headers. Note the referer URL is signed, but the darn background image from the CSS is not!

Unfortunately CSS is static, it does not go through the Django template rendering process, hence you cannot generate signed URLS in this way, within the CSS url property — Arun T
– Arun T, Commented Oct 14, 2023 at 3:49
403 is about permissions. Check if required permissions granted on static files folder. — IVNSTN
– IVNSTN, Commented Oct 15, 2023 at 17:15

Lawrence DeSouza · Accepted Answer · 2023-10-15 18:47:25Z

0

I have ended up going with a second, public, bucket, in spite of that defeating the whole purpose of using cloudfront. At least most of my content will be delivered via signed urls, it's better than nothing.

I got the idea from a similar question: Static website private content Amazon S3 and Cloudfront - css, js and images not showing.

answered Oct 15, 2023 at 18:47

Lawrence DeSouza

1,0235 gold badges17 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Borja Lázaro Toralles · Accepted Answer · 2024-05-26 21:02:50Z

0

This answer may come a bit late, but I solved this issue by moving the background-image tag from the CSS file to an inline style tag, e.g.:

<body style="background-image: url({% static 'path/to/image.png' %})">
    ...
</body>

Perhaps not the most elegant, but the S3 storage backend definitely picks this up from the html template and now my private bucket image gets loaded without further permission errors.

answered May 26, 2024 at 21:02

Borja Lázaro Toralles

1

Collectives™ on Stack Overflow

Urls in CSS files not getting signed through django-storages

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related