Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Sean Håkansson 66 posts 192 karma points
    Sep 15, 2014 @ 14:37
    Sean Håkansson
    0

    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!

  • Alex Skrypnyk 6131 posts 23950 karma points MVP 7x admin c-trib
    Sep 15, 2014 @ 14:42
    Alex Skrypnyk
    0

    Hi Sean,

    How did you setup nuget package ?

  • Sean Håkansson 66 posts 192 karma points
    Sep 15, 2014 @ 15:02
    Sean Håkansson
    0

    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

  • Stefan Kip 1614 posts 4131 karma points c-trib
    Sep 15, 2014 @ 15:19
    Stefan Kip
    1

    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>
    
  • Stefan Kip 1614 posts 4131 karma points c-trib
    Sep 15, 2014 @ 15:22
  • Sean Håkansson 66 posts 192 karma points
    Sep 15, 2014 @ 15:34
    Sean Håkansson
    0

    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

  • Stefan Kip 1614 posts 4131 karma points c-trib
    Sep 15, 2014 @ 15:36
    Stefan Kip
    0

    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.

  • Sean Håkansson 66 posts 192 karma points
    Sep 15, 2014 @ 15:43
    Sean Håkansson
    0

    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

  • Stefan Kip 1614 posts 4131 karma points c-trib
    Sep 15, 2014 @ 15:46
    Stefan Kip
    0

    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.

  • Alex Skrypnyk 6131 posts 23950 karma points MVP 7x admin c-trib
    Sep 15, 2014 @ 16:08
    Alex Skrypnyk
    0

    Maybe something with rights permission for the file system ?

  • Sean Håkansson 66 posts 192 karma points
    Sep 16, 2014 @ 09:44
    Sean Håkansson
    0

    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!

  • James Jackson-South 489 posts 1747 karma points c-trib
    Sep 16, 2014 @ 12:55
    James Jackson-South
    0

    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.

    1. Is your package manager console looking at the correct repository source? e.g https://www.nuget.org/api/v2/
    2. 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.
    3. 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. :)

  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Feb 02, 2017 @ 13:19
    Bjarne Fyrstenborg
    0

    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

  • Sean Håkansson 66 posts 192 karma points
    Feb 02, 2017 @ 14:34
    Sean Håkansson
    0

    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)

  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Feb 02, 2017 @ 16:00
    Bjarne Fyrstenborg
    0

    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

  • Sean Håkansson 66 posts 192 karma points
    Feb 02, 2017 @ 16:41
    Sean Håkansson
    0

    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") )

  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Feb 02, 2017 @ 16:53
    Bjarne Fyrstenborg
    0

    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.

  • Sean Håkansson 66 posts 192 karma points
    Feb 02, 2017 @ 17:41
    Sean Håkansson
    0

    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?

  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Feb 02, 2017 @ 21:22
    Bjarne Fyrstenborg
    0

    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).

Please Sign in or register to post replies

Write your reply to:

Draft