使用<img/>标签中的createObjectURL保护的ASP.NET MVC图像

Question

我有一个现有的ASP.NET MVC应用程序，该应用程序显示连接到Web服务器的物理存储中的缩略图。也可以通过每个数据库记录的文件url将其存储在其他位置。

对于视图中的每个循环，图像缩略图均由图像标签中URL字符串（即https://domain/path/file.jpg）引用。还使用jquery.lazy.min.js使用图像的延迟加载。

由于图像的敏感性，我需要保护文件的url，以防止通过查看页面源来未经授权访问图像。通过从控制器传递到视图的视图模型，在列表中提供了图像缩略图URL。

根据我一直在阅读的内容，确保图像URL最佳安全的方法是生成blob：https或blob：file，以确保对当前页面的引用安全。

我一直在尝试使用（URL || webkit）.createObjectURL（file_url）完成此操作，但是问题是缩略图URL是一个字符串，我需要将其转换为Object File类型。

我看到使用and createObjectURL可以保护加载了如下结果的图像源：http：// localhost：10480 / 91733a7a-65fe-4176-979e-82c2fc7148c3“ title =”原始大小：1635x2623 “>

我的问题是，在每个循环中加载和显示视图中的图像标签时，我该如何为img标签data-src提供文件blob而不是url字符串？不确定如何混合HTML和Javascript来做到这一点。

非常感谢您的帮助或指导。谢谢。

Answer 1

我认为这可以为您提供帮助。我在View中创建了一个函数（可以在后端完成） 然后通过Image path调用它。然后此函数将您的图像转换为Base64String，您的地址将是安全的，并且任何人都不知道您的实际路径在哪里。

@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>

当您查看页面源代码时，您会看到类似以下的内容：

如果您的路径是url，则可以使用以下内容：

@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>