imageprocessor error could not be understood by the server due to malformed syntax - Using Umbraco and getting started

Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Oct 25, 2016 @ 11:35

ImageProcessor error: "could not be understood by the server due to malformed syntax."

Hello,

I've upgraded a project from 7.4 to 7.5. I know that ImageProcessor had some security changes, but I'm still a bit confused about the configuration.

For example a local image: Without querystring the image is not found. enter image description here

With crop it has an error: enter image description here

With width it works: enter image description here

In processing.config I have the following:

<plugin name="Crop" type="ImageProcessor.Web.Processors.Crop, ImageProcessor.Web" enabled="true"/>

So what do I need to do for the first 2 images to also work?

I know there is a lot of documentation here, but I still don't really know what to do: http://imageprocessor.org/imageprocessor-web/

Jeroen

Copy Link

James Jackson-South 489 posts 1747 karma points c-trib

Oct 25, 2016 @ 11:49

Hey Jeroen,

Could you do me a favour and post your processing config and your version number?

The first scenario is the one that confuses me as ImageProcessor.Web should not be intercepting the request at all.

Your second scenario is taking place because you are not passing any commands that are recognised. mode=crop is a sub command of resize that recognises the primary commands width and height as parameters. Without those commands mode=crop is meaningless so is identified as a DDOS attempt.

Do you have any event handlers bound to the module?

Cheers

James

Copy Link

Bradley Kronson 63 posts 114 karma points

Oct 25, 2016 @ 11:58

You need to specify a width and height for mode=crop

eg

https://dev.newheroes.com/media/1080/10bbh2le2ill_final.png?mode=crop&height=187&width=299

Or you can do this

https://dev.newheroes.com/media/1080/10bbh2le2ill_final.png?crop=50,50,100,100

Docs are here

http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/crop/

PS I see image without parameters?

https://dev.newheroes.com/media/1080/10bbh2le2ill_final.png works for me

Copy Link

Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Oct 25, 2016 @ 12:10

Hi James,

Thanks for looking into this. Here is some more info:

parts of web.config

    <sectionGroup name="imageProcessor">
      <section name="security" requirePermission="false" type="ImageProcessor.Web.Configuration.ImageSecuritySection, ImageProcessor.Web" />
      <section name="processing" requirePermission="false" type="ImageProcessor.Web.Configuration.ImageProcessingSection, ImageProcessor.Web" />
      <section name="caching" requirePermission="false" type="ImageProcessor.Web.Configuration.ImageCacheSection, ImageProcessor.Web" />
    </sectionGroup></configSections>

<add name="ImageProcessorModule" type="ImageProcessor.Web.HttpModules.ImageProcessingModule, ImageProcessor.Web" />

<imageProcessor>
    <security configSource="config\imageprocessor\security.config" />
    <caching configSource="config\imageprocessor\cache.config" />
    <processing configSource="config\imageprocessor\processing.config" />
  </imageProcessor>

The processing.config

<?xml version="1.0" encoding="utf-8"?>
<processing preserveExifMetaData="false" fixGamma="false" interceptAllRequests="false" allowCacheBuster="true">
  <presets>
  </presets>
  <plugins>
    <plugin name="Alpha" type="ImageProcessor.Web.Processors.Alpha, ImageProcessor.Web"/>
    <plugin name="AutoRotate" type="ImageProcessor.Web.Processors.AutoRotate, ImageProcessor.Web" enabled="true"/>
    <plugin name="BackgroundColor" type="ImageProcessor.Web.Processors.BackgroundColor, ImageProcessor.Web" enabled="true"/>
    <plugin name="Brightness" type="ImageProcessor.Web.Processors.Brightness, ImageProcessor.Web"/>
    <plugin name="Contrast" type="ImageProcessor.Web.Processors.Contrast, ImageProcessor.Web"/>
    <plugin name="Crop" type="ImageProcessor.Web.Processors.Crop, ImageProcessor.Web" enabled="true"/>
    <plugin name="DetectEdges" type="ImageProcessor.Web.Processors.DetectEdges, ImageProcessor.Web"/>
    <plugin name="EntropyCrop" type="ImageProcessor.Web.Processors.EntropyCrop, ImageProcessor.Web"/>
    <plugin name="Filter" type="ImageProcessor.Web.Processors.Filter, ImageProcessor.Web"/>
    <plugin name="Flip" type="ImageProcessor.Web.Processors.Flip, ImageProcessor.Web"/>
    <plugin name="Format" type="ImageProcessor.Web.Processors.Format, ImageProcessor.Web" enabled="true"/>
    <plugin name="GaussianBlur" type="ImageProcessor.Web.Processors.GaussianBlur, ImageProcessor.Web">
      <settings>
        <setting key="MaxSize" value="22"/>
        <setting key="MaxSigma" value="5.1"/>
        <setting key="MaxThreshold" value="100"/>
      </settings>
    </plugin>
    <plugin name="GaussianSharpen" type="ImageProcessor.Web.Processors.GaussianSharpen, ImageProcessor.Web">
      <settings>
        <setting key="MaxSize" value="22"/>
        <setting key="MaxSigma" value="5.1"/>
        <setting key="MaxThreshold" value="100"/>
      </settings>
    </plugin>
    <plugin name="Halftone" type="ImageProcessor.Web.Processors.Halftone, ImageProcessor.Web"/>
    <plugin name="Hue" type="ImageProcessor.Web.Processors.Hue, ImageProcessor.Web"/>
    <plugin name="Mask" type="ImageProcessor.Web.Processors.Mask, ImageProcessor.Web">
      <settings>
        <setting key="VirtualPath" value="~/images/imageprocessor/mask/"/>
      </settings>
    </plugin>
    <plugin name="Meta" type="ImageProcessor.Web.Processors.Meta, ImageProcessor.Web"/>
    <plugin name="Overlay" type="ImageProcessor.Web.Processors.Overlay, ImageProcessor.Web">
      <settings>
        <setting key="VirtualPath" value="~/images/imageprocessor/overlay/"/>
      </settings>
    </plugin>
    <plugin name="Pixelate" type="ImageProcessor.Web.Processors.Pixelate, ImageProcessor.Web"/>
    <plugin name="Quality" type="ImageProcessor.Web.Processors.Quality, ImageProcessor.Web" enabled="true"/>
    <plugin name="ReplaceColor" type="ImageProcessor.Web.Processors.ReplaceColor, ImageProcessor.Web"/>
    <plugin name="Resize" type="ImageProcessor.Web.Processors.Resize, ImageProcessor.Web" enabled="true">
      <settings>
        <setting key="MaxWidth" value="5000"/>
        <setting key="MaxHeight" value="5000"/>
      </settings>
    </plugin>
    <plugin name="Rotate" type="ImageProcessor.Web.Processors.Rotate, ImageProcessor.Web"/>
    <plugin name="RotateBounded" type="ImageProcessor.Web.Processors.RotateBounded, ImageProcessor.Web"/>
    <plugin name="RoundedCorners" type="ImageProcessor.Web.Processors.RoundedCorners, ImageProcessor.Web"/>
    <plugin name="Saturation" type="ImageProcessor.Web.Processors.Saturation, ImageProcessor.Web"/>
    <plugin name="Tint" type="ImageProcessor.Web.Processors.Tint, ImageProcessor.Web"/>
    <plugin name="Vignette" type="ImageProcessor.Web.Processors.Vignette, ImageProcessor.Web"/>
    <plugin name="Watermark" type="ImageProcessor.Web.Processors.Watermark, ImageProcessor.Web"/>
  </plugins>
</processing>

Versions from packages.config

<package id="ImageProcessor" version="2.4.5.0" targetFramework="net451" />
  <package id="ImageProcessor.Web" version="4.6.6.0" targetFramework="net451" />
  <package id="ImageProcessor.Web.Config" version="2.3.0.0" targetFramework="net451" />

The crop example was wrong. Should it work when I do ?anchor=center&mode=crop. Because that's how we do it for some images and that did work before. Maybe we just shouldn't use those querystrings.

We store the images in Azure.

Jeroen

Copy Link

Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Oct 25, 2016 @ 12:28

It seems that if I use the correct querystring values it does work. The only thing I don't understand is why the image without querystring returns a 404.

Jeroen

Copy Link

James Jackson-South 489 posts 1747 karma points c-trib

Oct 25, 2016 @ 12:44

Is your IFilesystemProvider setup correctly? ImageProcessor.Web definitely won't be intercepting the request since there are no parameters and you have interceptAllRequests="false" in your config.

?anchor=center&mode=crop won't work and would have never cropped the image since there ar no width/height parameters.

Copy Link

Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Oct 25, 2016 @ 14:07

ImageProcessor works if I have the correct parameters so that issue is fixed. Somehow some of our images got the ?anchor=center&mode=crop querystring. Previously that would render the normal image.

All media returns a 404 if I don't use a querystring. Even pdfs. So it seems there is something wrong with the IFilesystemProvider, but nothing has changed with that. I'll do some more research because something must be wrong.

Copy Link

James Jackson-South 489 posts 1747 karma points c-trib

Oct 25, 2016 @ 22:20

Ok, I'm assuming you're using https://github.com/JimBobSquarePants/UmbracoFileSystemProviders.Azure

For Umbraco v7.5+ you must add the the StaticFileHandler to the new Web.config inside the Media folder instead of the root one or the VPP will not work.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <handlers>
            <clear />
            <add name="StaticFileHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
            <add name="StaticFile" path="*" verb="*" modules="StaticFileModule,DefaultDocumentModule,DirectoryListingModule" resourceType="Either" requireAccess="Read" />
        </handlers>
    </system.webServer>
</configuration>

It's more than likely that will be the issue. This process is automated with our installer but your process has taken place in a different order.

Copy Link

Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Oct 26, 2016 @ 08:09

Thank you James! I missed the web.config in the media folder. Updated the StaticFileHandler in there and everything is working now :-).

Jeroen

Copy Link

Jason Prothero 422 posts 1243 karma points MVP c-trib

Apr 10, 2017 @ 21:44

I had this issue, but the fix turned out to be that I needed to enable the watermark module in the processing.config.

See the information on the docs here:

http://imageprocessor.org/imageprocessor-web/configuration/

Copy Link

Jay 425 posts 652 karma points

May 02, 2017 @ 16:52

I've got issues below issue, not sure why or when the malformed url are being called. It's being picked up by NewRelic but not the Umbraco Logs.

`The request /media/1022/individual-profile.jpg?center=0.311572700296732789,0.655 could not be understood by the server due to malformed syntax.`

Aha, James, I'm using Umbraco 7.5.3, and I've checked my web.config (within Media folder) have only got the below.

   <?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <clear />
      <add name="StaticFile" path="*" verb="*" modules="StaticFileModule,DefaultDocumentModule,DirectoryListingModule" resourceType="Either" requireAccess="Read" />
    </handlers>
  </system.webServer>
</configuration>

Just double checking that I need to also have the below?

<add name="StaticFileHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />

Copy Link

James Jackson-South 489 posts 1747 karma points c-trib

May 03, 2017 @ 04:24

Hi Jlon.

The message is telling you exactly what is wrong. An invalid command is being passed to ImageProcessor.Web.

center=0.311572700296732789,0.655 means nothing without the rest of the resize command.

By what? There's no way for me to find out. New Relic will be giving you IP addresses so you should be able to figure out where the request is coming from

Those configuration values have nothing to do with ImageProcessor.Web so I suggest you read the configuration documentation.

Cheers

James

Copy Link

Anthony Dang 1404 posts 2558 karma points MVP 3x c-trib

May 19, 2017 @ 13:21

Is there any way to stop this from crashing?

IMO, a query string should not cause a YSOD. Image processor should just log the error, not YSOD.

Copy Link

James Jackson-South 489 posts 1747 karma points c-trib

May 20, 2017 @ 09:29

This stuff is documented.

IMO, a query string should not cause a YSOD. Image processor should just log the error, not YSOD.

Well, PR then.

Copy Link

is working on a reply...

Flag this post as spam?

ImageProcessor error: "could not be understood by the server due to malformed syntax."