CODEWITHSUNDEEP
asp.net-mvc
greg
greg

Reputation: 16

ASP.NET MVC Images secured using createObjectURL in <img> tag

I have an existing ASP.NET MVC application that displays thumbnail images from physical storage connected to the web server. This can also be storage located elsewhere via the file url per the database record.

The image thumbnails are referenced by URL strings (i.e. https://domain/path/file.jpg) in image tags in a for each loop in the view. Also using lazy loading of the image for performance using jquery.lazy.min.js.

Due to the sensitive nature of the images I am required to secure the url of the file to prevent unauthorized access to the images by viewing the page source. The image thumbnail URL’s are provided in a List via the view model passed to the view from the controller.

From what I have been reading the best possible means of securing the URL of the image is to generate a blob:https, or blob:file so that the reference is secured for the current page.

I have been working on trying to accomplish this using (URL || webkit).createObjectURL(file_url) but the problem is that the thumbnail image url is a string and I need to get it into an Object File type.

I see that using and createObjectURL works to secure the image source that is loaded with a result such as this: http://localhost:10480/91733a7a-65fe-4176-979e-82c2fc7148c3" title="Original size: 1635x2623">

My question, in the for each loop to load and display the image tags in the view, is how can I supply the img tag data-src with the file blob instead of the url string? Not sure how to mix the HTML and Javascript to do this.

Any help or direction is greatly appreciated. Thank you.

Upvotes: 0

Views: 768

Answers (1)

Amirhossein Yari
Amirhossein Yari

Reputation: 2316

I think this can help you.I created a function in View(you can do it in back end) and call it by Image path.Then this function convert your image to Base64String and your address will be secure and any one don't know where is you actual path.

@using System.Drawing
@{
    ViewBag.Title = "Home Page";

    @helper GetBinayImage(string path)
    {
        using (Image image = Image.FromFile(path))
        {
            using (MemoryStream m = new MemoryStream())
            {
                image.Save(m, image.RawFormat);
                byte[] imageBytes = m.ToArray();

                // Convert byte[] to Base64 String
                string base64String = Convert.ToBase64String(imageBytes);
                string imageSrc = string.Format("data:image/gif;base64,{0}", base64String);
                <img src="@imageSrc" width="100" height="100" />
            }
        }

    }
}

<div>
    @GetBinayImage(@"path/file.jpg")
</div>

When you look at page source you see some thing like this: Page Source

And if your path is url you can use some thing like this:

@using System.Drawing
@{
    ViewBag.Title = "Home Page";

    @helper GetBinayImage(string path)
    {
        var webClient = new WebClient();
        byte[] imageBytes = webClient.DownloadData("http://www.google.com/images/logos/ps_logo2.png");
        string base64String = Convert.ToBase64String(imageBytes);
        string imageSrc = string.Format("data:image/gif;base64,{0}", base64String);
        <img src="@imageSrc" width="100" height="100" />
    }
}

<div>
    @GetBinayImage(@"https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png")
</div>

Upvotes: 1

Related Questions