Services and APIs

Media Handler

Version:

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.

If you have suggestions for improving this article, let us know!