Sitecore Media Request Protection is an important feature which protects a Sitecore instance from an image resize attack. It protects Sitecore image scaling parameters by ensuring that only server generated requests are processed. This creates issues if you have any client side code that needs to leverage image scaling. For example what if you have some client side databinding that needs to show images in lower dimensions? This blog discussed 2 techniques that can be used to get around this issue while still leaving Sitecore protected from a resize attack.

1. Protect each image server side when sending image data to client

Most likely the information about the images to display will come from the Sitecore server. Instead of just sending information about the image path also already send the image scaling parameters and call ProtectAssetUrl method as described here This will add the hash value to the path so any javascript code can safely use this image URL

2. Allow known dimensions that will be requested client side

You will know in which dimensions your client side code will request images. This approach will allow all valid images dimension while all other images dimensions will only be allowed when a valid hash is provided.  Media request protection is implemented in the MediaRequest pipeline and can be customized just like almost anything else in Sitecore. Below code will check if an unsafe request is using a  ‘safe’ dimension and if so allow that:

public class CustomMediaRequest : sc.Resources.Media.MediaRequest
{
    protected override bool IsRawUrlSafe
    {
        get
        {
            bool isSafe = base.IsRawUrlSafe;

            if (!isSafe)
            {
                var safeQueryStrings = new List
                    {
                        "mh=123&mw=456",
                        "mh=654&mw=321"
                    };

                foreach (var safeQueryString in safeQueryStrings)
                {
                    if (this.InnerRequest.RawUrl.Contains(safeQueryString))
                    {
                        return true;
                    }
                }
            }

            return isSafe;
        }
    }
}

This pipeline can be included as follows:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <mediaLibrary>
      <requestParser patch:instead="*[@type='Sitecore.Resources.Media.MediaRequest, Sitecore.Kernel']" type="namespace.CustomMediaRequest,  assembly" />
    </mediaLibrary>
  </sitecore>
</configuration>

Conclusion

The first method is the better method as it uses the OOTB functionality to protect image URL’s and does not allow additional image scaling to take place. I find it hard to think of a scenario where this method will not be feasible and will recommend this for any new development. However the MediaRequest feature is still relatively new as it is introduced in Sitecore 7.5. You might need to upgrade a solution from an older version and run into many issues with a limited amount of distinct image dimensions that are requested. In this case it is probably easier and less risky to use approach 2.