13

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 ?

Pierre-Olivier
  • 3,104
  • 19
  • 37
  • 2
    Interesting question, but I doubt it. – ceejayoz Aug 23 '12 at 16:49
  • I'm surprised nobody has run into a similar issue before, I guess it is pretty common to host CSS files on Cloudfront as a private distribution (to avoid hot-linking), no ? – Pierre-Olivier Aug 27 '12 at 14:32
  • 1
    Most sites big enough to need/want a CDN probably don't care all that much about hotlinking. It's usually a drop in the bucket for any large site - especially when you're talking about the stuff that'd be in a CSS file. Most people aren't going to hotlink your layout elements. – ceejayoz Aug 27 '12 at 14:38
  • I agree, hotlinking layout elements is a really bad idea, if you decide to move or delete the file my site will stop working and I won't have a copy of the file to fix it.. Much safer to just download and host it myself. Large/unique images are the only thing I would worry about protecting – msEmmaMays Sep 01 '12 at 20:58
  • 1
    is this `background-image: file('../img/bg.png');` a right syntax? Mean In CSS it should look like this `background-image: url('../img/bg.png');` – Ahsan Khurshid Sep 03 '12 at 10:32

6 Answers6

6

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…

Ryan Parman
  • 6,855
  • 1
  • 29
  • 43
  • I think you are right. However, my main concern is that I am currently hosting twitter's bootstrap on my Amazon account. I was afraid that other people can link to it since it's a generic "framework/design". – Pierre-Olivier Oct 11 '12 at 19:33
  • 1
    Well, they could also link directly to it on Twitter's GitHub account as well. It's far more _likely_, however, that they'll just download a copy for themselves. – Ryan Parman Oct 11 '12 at 23:31
1

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.

Ja͢ck
  • 170,779
  • 38
  • 263
  • 309
1

It's generally a really bad idea to use private distributions for your css files, because adding the (presumably constantly changing) expiration time and signature to css urls prevents browsers from caching them, therefore greatly reducing the usefulness of using Cloudfront in the first place.

And even if you use long expiration times, then someone who desperately wants to hotlink your css background images will simply set up a script to scrape your css file and extract the image urls from there.

Joel L
  • 3,031
  • 1
  • 20
  • 33
0

you could rotate the entire CDN host name every day or two, then you don't have to change anything in the css (assuming the css is on the CDN which it looks like from the example)

http://www.explainthatstuff.com/blocking-cloudfront-hotlinks.html

Then your CSS doesn't need signed URLs and you can still block hotlinking just as effectively.

msEmmaMays
  • 1,073
  • 7
  • 7
0

I just recently heard about base64 encoding into html/css. There are pros and cons, but it might be what your looking for: Is embedding background image data into CSS as Base64 good or bad practice?

Community
  • 1
  • 1
Eric Leroy
  • 1,830
  • 1
  • 18
  • 31
-1

how about using <base> tag in yr html? Though did'nt try, but might help.

Another option is to use php to generate your stylesheet. for example, you get the signed urls for all the images, then you push them as variables to the style elements.

yuvrajm
  • 316
  • 1
  • 3
  • 15