using imageprocessor for external imagessetting up config files - Using Umbraco 7

Sean Håkansson 67 posts 193 karma points

Sep 15, 2014 @ 14:37

Using ImageProcessor for external Images(setting up config files)

Hello I want to whitelist a few domains for image processing.

According to: http://imageprocessor.org/imageprocessor-web/ I just need to add the URLs in the security.config.

However I can't find the nuget package ImageProcessor.Web.Config.

I tried creating the Security.config file manually in /config/imageprocessor/ with no luck, is this the correct syntax:?

<img src="/remote.axd?http://scontent-b.cdninstagram.com/hphotos-xaf1/t51.2885-15/10693710_292226550982854_283021004_n.jpg/&width=130" alt="Snowcave :-)" />

<security allowRemoteDownloads="true" timeout="300000" maxBytes="4194304" remotePrefix="/remote.axd">
    <whiteList>
      <add url="http://scontent-b.cdninstagram.com/" />
    </whiteList>
  </security>

Thanks!

Copy Link

Alex Skrypnyk 6175 posts 24186 karma points MVP 8x admin c-trib

Sep 15, 2014 @ 14:42

Hi Sean,

How did you setup nuget package ?

Copy Link

Sean Håkansson 67 posts 193 karma points

Sep 15, 2014 @ 15:02

Thanks Alex, sorry I'm a bit noob,

I'm not entirly sure what you are asking, the nuget (umbraco 7.1.4 7.1.6*) was downloaded through visual studio 13, standard repo, no additional setup.

The error I'm getting is [SecurityException: Application is not configured to allow remote file downloads from this domain.], so obviously the security.config isn't loading / that part I got wrong.

*edit

Copy Link

Stefan Kip 1614 posts 4131 karma points c-trib

Sep 15, 2014 @ 15:19

I'm not sure if it makes any difference, but I'm using the following syntax in the security.config files (so without '/' at the end):

<?xml version="1.0" encoding="utf-8" ?>
<security allowRemoteDownloads="true" timeout="300000" maxBytes="2048000" remotePrefix="/remote.axd">
  <whiteList>
    <add url="http://example.org" />
  </whiteList>
</security>

Copy Link

Stefan Kip 1614 posts 4131 karma points c-trib

Sep 15, 2014 @ 15:22

Btw, here it is: https://www.nuget.org/packages/ImageProcessor.Web.Config

Copy Link

Sean Håkansson 67 posts 193 karma points

Sep 15, 2014 @ 15:34

Thanks kipusoep!

Yours didn't help either I'm afraid, I guess I need to reference the security.config from my web.config somehow, but there are no references to ImageProcessor at all in my web.config. And when I try to install the nuget i get this: (It doesnt even show up in the VS Gui search)

PM> Install-Package ImageProcessor.Web.Config
Install-Package : Unable to find package 'ImageProcessor.Web.Config'.
At line:1 char:1
+ Install-Package ImageProcessor.Web.Config
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : NotSpecified: (:) [Install-Package], InvalidOperationException
    + FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PowerShell.Commands.InstallPackageCommand

Btw is this the correct syntax for linking with the remote?

/remote.axd?http://scontent-b.cdninstagram.com/hphotos-xaf1/t51.2885-15/10691907_503740906436962_1302829737_s.jpg?width=130

Feels like it should have an "image" or "source" attribute, however since I get the security error and not URI error I guess thats the right way

Copy Link

Stefan Kip 1614 posts 4131 karma points c-trib

Sep 15, 2014 @ 15:36

The problem is that ImageProcessor isn't installed the right way.
There should be multiple ImageProcessor entries at different places in your web.config.
As long as those are missing, it won't work. So please try to fix your installation environment.

Copy Link

Sean Håkansson 67 posts 193 karma points

Sep 15, 2014 @ 15:43

Sorry I jumped the gun, must had a whitespace in my search or something, ImageProcessorModule is indeed referenced in the web.config.

Do you recommend me to install it standalone instead of piggy backing on Umbracos built in?

Should I add the security.config manually in configSections, maybe thats whats missing.

Strange I can't the nuget working

Copy Link

Stefan Kip 1614 posts 4131 karma points c-trib

Sep 15, 2014 @ 15:46

Via NuGet is the way to go and fixing your NuGet problem is something you should try for yourself or ask help at the NuGet site.

Copy Link

Alex Skrypnyk 6175 posts 24186 karma points MVP 8x admin c-trib

Sep 15, 2014 @ 16:08

Maybe something with rights permission for the file system ?

Copy Link

Sean Håkansson 67 posts 193 karma points

Sep 16, 2014 @ 09:44

It might be that nuget is hiding the package because the new isn't compatible with the umbraco bundled version. I solved it using copy pasta from github repo.

Umbraco is bundling 3.3.3, and I used the web config from here:
https://github.com/JimBobSquarePants/ImageProcessor/blob/master/build/content/ImageProcessor.Web.Config/web.config.transform

togheter with documentation on the config files from here:
http://imageprocessor.org/imageprocessor-web/

There seems to be alot of namespace changes, at least in the processing.config, some stuff moved from .web to core and vice-versa.

Anyways, my last and final quesiton, is it safe to upgrade image processor without any umbraco conflicts, anyone with experience in this?

Thanks guys for your help!

Copy Link

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

Sep 16, 2014 @ 12:55

Hi Sean,

Umbraco is bundled with the v1/v3 series of ImageProcessor and you have copied the configuration file from the v2/v4 version.

That's a major version bump so there are breaking changes in the config files. The indicator for that is the semantic versioning.

You can upgrade ImageProcessor just fine. I did it myself the other day on a 7.1.6 installation.

You should be doing it via Nuget though, it'll ensure your web.config plus other configuration files are updated for you.

Steps to check for installation via Nuget.

Is your package manager console looking at the correct repository source? e.g https://www.nuget.org/api/v2/
Are you installing the correct version for your installed version. e.g. https://www.nuget.org/packages/ImageProcessor.Web.Config/1.1.3 is the last version supporting the v1/v3 packages. You can check by looking at the dependencies.
Back everything up in your source control.

Installing the package itself once you have set everything up should be as simple as

PM> Install-Package ImageProcessor.Web.Config

For the latest and greatest version. This will install the latest ImageProcessor and ImageProcessor.Web packages

PM> Install-Package ImageProcessor.Web.Config -Version 1.1.3

For the last v1/v3 compatible version

Once you have installed the package you will be able to set external resources following the guidelines here. The more specific the url, the more restrictive the filter.

I strongly recommend you read the documentation on http://docs.nuget.org/ to ensure that you are up to speed with Nuget. It's pretty much the de facto way of installing dependent software now.

Hopefully that clears a few thing up. :)

Copy Link

Bjarne Fyrstenborg 1285 posts 4039 karma points MVP 8x c-trib

Feb 02, 2017 @ 13:19

I am using ImageProcessor 2.5.1, ImageProcessor.Web 4.8.0 and ImageProcessor.Web.Config 2.3.0.0 and scales remote images accessed via Facebook API.

In config/imageprocessor/security.config I have the following:

<service prefix="remote.axd" name="RemoteImageService" type="ImageProcessor.Web.Services.RemoteImageService, ImageProcessor.Web">
    <settings>
    <setting key="MaxBytes" value="4194304" />
    <setting key="Timeout" value="3000" />
    <setting key="Protocol" value="http" />
    </settings>
    <whitelist>
        <add url="https://fbcdn.net"/>
        <add url="http://fbcdn.net"/>
    </whitelist>
</service>

It does work for images in the posts hosted on scontent.xx.fbcdn.net, but some posts include external images from another site (e.g. when linking to another site), which is hosted on external.xx.fbcdn.net

For example:

https://external.xx.fbcdn.net/safe_image.php?d=AQBLhEvZ_P2_FD4o&url=https%3A%2F%2Fscontent.xx.fbcdn.net%2Ft45.1600-4%2F12329915_6043383035958_1443285529_n.png&_nc_hash=AQCdgLllgcUAvy5Z

The output will then be:

/remote.axd/external.xx.fbcdn.net/safe_image.php?d=AQBLhEvZ_P2_FD4o&url=https%3A%2F%2Fscontent.xx.fbcdn.net%2Ft45.1600-4%2F12329915_6043383035958_1443285529_n.png&_nc_hash=AQCdgLllgcUAvy5Z

enter image description here

How do I handle this? and appending a querystring like width=250&height=250&mode=crop since it already contains a ?

/Bjarne

Copy Link

Sean Håkansson 67 posts 193 karma points

Feb 02, 2017 @ 14:34

Hi, check if string contains safe_image.php. If true, try parsing the "url" parameter from that querystring, and urldecode it. Then try to add your ImageProcessor querystring to this fixed string.

I actually had the same issue few months ago, sometimes the safe_image url parameter will include the og:image URL of a liked URL, so it's really hard to have a whitelist to maintain.

In the end, I wrote a "social media" feed importer that creates a umbraco page node and downloads the media to Umbraco. (With help of using the awesome skybrud.social)

Copy Link

Bjarne Fyrstenborg 1285 posts 4039 karma points MVP 8x c-trib

Feb 02, 2017 @ 16:00

Hi Sean

I am also using Skybrud.Social package to get Facebook posts and Instagram media. The approach your suggested would also be my next attempt to grab the image.

Now I have the following code:

string permanentLinkUrl = post.JsonObject.GetString("permalink_url");

string fullPictureUrl = post.JsonObject.GetString("full_picture");
string fullPicture = fullPictureUrl.Trim("https://");

<div class="social-entry facebook facebook-post @post.Type">
    <a href="@permanentLinkUrl" target="_blank">
        @if (!string.IsNullOrEmpty(fullPicture))
        {
            if (!fullPicture.Contains("external.xx.fbcdn.net"))
            {
                <img src="/remote.axd/@fullPicture?width=250&height=250&mode=crop" alt="" class="img-responsive center-block" />
            }
            else if (fullPicture.Contains("external.xx.fbcdn.net") && fullPicture.Contains("safe_image.php"))
            {
                int startIndex = fullPicture.IndexOf("&url=");
                startIndex = startIndex > 0 ? startIndex + 5 : 0;

                int endIndex = fullPicture.IndexOf(".png", startIndex);
                endIndex = endIndex > 0 ? endIndex + 4 : 0;

                string fullPictureRefUrl = fullPicture.Substring(startIndex, endIndex - startIndex);
                fullPictureRefUrl = HttpUtility.UrlDecode(fullPictureRefUrl).Trim("https://");

                <img src="/remote.axd/@fullPictureRefUrl?width=250&height=250&mode=crop&upscale=false" alt="" class="img-responsive center-block" />
            }
            else
            {
                <img src="@fullPictureUrl" alt="" class="img-responsive center-block" />
            }
        }
    </a>
    ...
</div>

/Bjarne

Copy Link

Sean Håkansson 67 posts 193 karma points

Feb 02, 2017 @ 16:41

Hmm, And that URL works except you need to whitelist it in security.cfg right? Hmm sorry not much help, except you might need to download and cache it on your server, then apply image handling on that.

It's a shame we can't use the FB proxy to do the scaling there instead. If you take the standard "Picture", instead of "Full_Picture", you get basically the same URL but with &w=130&h=130.

But it won't work to write custom dimensions ( I think one solution I tried was to do a .Replace("w=130","w=250") )

Copy Link

Bjarne Fyrstenborg 1285 posts 4039 karma points MVP 8x c-trib

Feb 02, 2017 @ 16:53

No, I only have these in whitelist:

<whitelist>
    <add url="https://fbcdn.net"/>
    <add url="http://fbcdn.net"/>
</whitelist>

in the "else if" it extract the image url, e.g.

https://scontent.xx.fbcdn.net/t45.1600-4/12408986_6036362187158_1396530595_n.png

This is stored is fullPictureRefUrl and it trim the protocol.

Then it use ImageProcessor to resize and crop the image:

/remote.axd/@fullPictureRefUrl?width=250&height=250&mode=crop&upscale=false

For now it only handle .png, but I can probably use a regex to looking for other images extensions aswell.

Copy Link

Sean Håkansson 67 posts 193 karma points

Feb 02, 2017 @ 17:41

Ahh I See!

My /feed looks more like this:

{
      "id": "591556336_121707324643885",
      "name": "UX-meetup hos Timezynk | Lat55",
      "full_picture": "https://external.xx.fbcdn.net/safe_image.php?d=AQCVpCvruBVlloOt&url=http%3A%2F%2Fwww.lat55.se%2Fwp-content%2Fuploads%2F2012%2F09%2Ftimezynk.png&_nc_hash=AQBczX-MrJ3TVMcf"
    },

So the problem in my case is it's using the og:image. For example when the user/page shares a website.

You could check for &_nc_hash instead of .png maybe?

Copy Link

Bjarne Fyrstenborg 1285 posts 4039 karma points MVP 8x c-trib

Feb 02, 2017 @ 21:22

Yes, I think Facebook use the open graph image if one is defined, when users share the page.

I am not sure if you can rely on &_nc_hash is added to querystring after url, so I think it was better to split the string starting from &url= and ending before .png (or another image file type).

Copy Link

is working on a reply...

Flag this post as spam?

Using ImageProcessor for external Images(setting up config files)