Media Handler

Abstract

Use Sitecore server-side media resizing and control resizing requests

The Sitecore Headless Services Media Handler supports configuring how Sitecore handles media requests.

Using Sitecore server-side media resizing, with the imageParams or srcSet properties on a JavaScript <Image/> helper component, can expose your Sitecore server to a denial-of-service attack by rescaling an image with many arbitrary dimensions.

A whitelist rejects unknown resizing parameter sets. Sets of image sizing parameters that are used in application components must be whitelisted. If a parameter set is not whitelisted, the server returns the image without resizing it.

Configure the Media Handler

To use the Headless Services Media Handler, you must provide a configuration patch in Web.config. The configuration patch is applied automatically when you install the Headless Services module.

If you followed a different installation process, to instruct Sitecore to use the Headless Services Media Handler:

  • On a content delivery server, in the ./Web.config file, in the <handlers /> node, add the following key:

    <add verb="*" path="sitecorejss_media.ashx" type="Sitecore.JavaScriptServices.Media.MediaRequestHandler, Sitecore.JavaScriptServices.Media" name="Sitecore.JavaScriptServices.Media.MediaRequestHandler" />

Whitelist image resizing parameters

To whitelist resizing parameter sets and enable image resizing for responsive display:

  • In the Sitecore configuration, in the <allowedMediaParams /> node, whitelist the size parameters you need. For example:

    <configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
      <sitecore>
        <javaScriptServices>
          <!--
            You can use configuration patch(es) to add sets of
            media parameters that should be allowed without a
            request protection hash in the URL. Parameter order
            is not important.
          -->
          <allowedMediaParams>
            <example>mw=100,mh=50</example>
            <example2>mw=100</example2>
            <example3>mw=101,mh=51</example3>
          </allowedMediaParams>
        </javaScriptServices>
      </sitecore>
    </configuration>

Tip

To determine the image parameters used, look at the query string on the src attribute of the rendered image. For example, given an image src attribute with the value /img.jpg?mw=100&h=50, you must whitelist the comma-delimited parameter set mw=100,h=50. Find out more about using responsive images.