How can I prevent Imageresizer using the Cloudfront plugin creating invalid urls?

Question

I host my images on Amazon S3 and only store one image size.

Up until now I have successfully been using Imageresizer to resize my images per request.

Now I need to introduce the Cloudfront CDN, which is giving me difficulties.

I have setup my config per the documentation.

Like this:

<resizer>
    <diskcache dir="~/app_data" autoClean="true"/>
    <clientcache minutes="1440"/>
    <cloudfront redirectThrough="http://cdn.example.com" redirectPermanent="false"/>
    <plugins>
      <add name="DiskCache"/>
      <add name="ClientCache"/>
      <add name="MvcRoutingShim"/>
      <add name="CloudFront"/> 
    </plugins>
  </resizer>

I then capture any URLs to my application like this:

private static void ImageResizer_OnPostAuthorizeRequestStart(
    IHttpModule sender2, HttpContext context)
{
    string path = Config.Current.Pipeline.PreRewritePath;
    if (!path.StartsWith(PathUtils.ResolveAppRelative("~/cdn/"),
        StringComparison.OrdinalIgnoreCase))
    {
        return;
    }

    Config.Current.Pipeline.SkipFileTypeCheck = true;
    Config.Current.Pipeline.ModifiedQueryString["cache"]
        = ServerCacheMode.Always.ToString();
}

So that Imageresizer can process them.

When it does it will change my URL to use the correct CDN path, but it also change the querystring params to semicolons:

http://example.com/cdn/image.jpg?mode=crop&width=200

To this:

http://mycdn.example.com/image.jpg;mode=crop;width=200

Unfortunately Amazon S3 doesn't like this and kicks it out as an Access Denied. However Amazon will happily server the original querystring.

So, how do I either preserve the querystring to prevent Imageresizer change the parameters to semicolons?

Or configure amazon, so that it will serve the image regardless of the semicolons?

Answer 1

You don't use CloudFront instead of S3, you use them both. Your cloudfront distribution should point to the server running ImageResizer, which in turn accesses Amazon S3 with S3Reader. CloudFront should never point directly to S3; that would eliminate ImageResizer from the picture.

See http://imageresizing.net/docs/cloud