Amazon Cloudfront private distribution - links to images inside CSS

Question

I created a private distribution in Cloudfront to prevent hotlinking. I managed to create links to my objects with signed URL which is working fine now.

My only concerns, is that images link inside my css stylesheets are not working because they are not signed. So if I have, for instance:

background-image: url('../img/bg.png');

The background image is not going to show up since the stylesheet does not include a signed url, and therefore, Cloudfront refuses to serve the content.

Is there anything I can do to prevent this ?

Answer 1

Let me step back and ask a fundamental question: Are you really worried about people hotlinking your images? Really? And if someone does, what is the realistic impact it will have on you? Really?

If you have a legitimate reason for preventing people from hot linking, then I'm not really sure that any CDN service (in this case, CloudFront) is the right solution for you.

Hey, I'm just being honest…

Answer 2

There are a few way, each with drawbacks.

Instead of a static CSS file, you generate it off a template (or some other smart way to map resources to CloudFront locations). You can use some degree of caching here by using Last-Modified and max-age Cache headers. The hardest solution but arguably the best protection.

Set up a redirection path for all your CSS resources, basically a small script that rewrites the path to CF (take care to only rewrite CSS resources and nothing else). This allows you to keep your current static CSS but opens up a potential hot linking of your redirection script.

Something in between could be a cron script that generates static CSS files with links that expire in 1.5d) to reduce server load.