ASP.NET Core中如何在HTTPS页面显示HTTP链接的图片？

由于浏览器的混合内容安全策略，HTTPS页面无法加载HTTP资源，针对你的场景，这里提供两种适用于ASP.NET Core的可行方案：

方案一：搭建本地代理接口 #

在项目中新增一个代理接口，专门负责从HTTP地址获取favicon并返回给前端。前端通过调用HTTPS的代理接口获取图标，规避混合内容限制。

实现代码示例 #

创建控制器：

using Microsoft.AspNetCore.Mvc;
using System.Net.Http;
using System.IO;

public class FaviconProxyController : Controller
{
    private static readonly HttpClient _httpClient = new HttpClient();

    [HttpGet("proxy-favicon")]
    public async Task<IActionResult> GetFavicon(string url)
    {
        if (string.IsNullOrWhiteSpace(url))
            return BadRequest("URL参数不能为空");

        try
        {
            if (!Uri.TryCreate(url, UriKind.Absolute, out _))
                return BadRequest("无效的URL格式");

            var response = await _httpClient.GetAsync(url);
            response.EnsureSuccessStatusCode();
            
            var contentType = response.Content.Headers.ContentType?.MediaType ?? "image/x-icon";
            var iconBytes = await response.Content.ReadAsByteArrayAsync();
            
            return File(iconBytes, contentType);
        }
        catch (HttpRequestException)
        {
            // 请求失败时返回默认图标（需提前在wwwroot放置default.ico）
            return PhysicalFile(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "default.ico"), "image/x-icon");
        }
        catch
        {
            return NotFound();
        }
    }
}

前端调用方式 #

将原本的HTTP图标地址替换为代理接口：

<img src="/proxy-favicon?url=http://xxx.com/favicon.ico" alt="网站图标" />

优化建议 #

• 为HttpClient配置超时、重试策略，提升稳定性
• 在Action上添加[ResponseCache(Duration = 86400)]缓存1天，减少重复请求
• 增加域名白名单，只允许代理指定域名的favicon，降低安全风险

方案二：后台同步Favicon到本地 #

如果目标网站的favicon更新频率较低，可通过ASP.NET Core后台任务定期抓取HTTP的favicon，保存到本地静态资源目录，前端直接引用HTTPS的本地资源。

实现代码示例 #

创建后台服务：

using Microsoft.Extensions.Hosting;
using System.IO;
using System.Threading;
using System.Threading.Tasks;

public class FaviconSyncService : BackgroundService
{
    private readonly HttpClient _httpClient;
    private readonly IWebHostEnvironment _webHostEnv;

    public FaviconSyncService(HttpClient httpClient, IWebHostEnvironment webHostEnv)
    {
        _httpClient = httpClient;
        _webHostEnv = webHostEnv;
    }

    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        // 替换为你需要同步的favicon地址列表
        var targetFavicons = new List<string>
        {
            "http://site1.com/favicon.ico",
            "http://site2.com/favicon.ico"
        };

        var saveDir = Path.Combine(_webHostEnv.WebRootPath, "synced-favicons");
        Directory.CreateDirectory(saveDir);

        while (!stoppingToken.IsCancellationRequested)
        {
            foreach (var iconUrl in targetFavicons)
            {
                try
                {
                    var uri = new Uri(iconUrl);
                    var safeFileName = $"{uri.Host.Replace('.', '_')}.ico";
                    var savePath = Path.Combine(saveDir, safeFileName);

                    var response = await _httpClient.GetAsync(iconUrl, stoppingToken);
                    if (response.IsSuccessStatusCode)
                    {
                        using var stream = await response.Content.ReadAsStreamAsync(stoppingToken);
                        using var fileStream = new FileStream(savePath, FileMode.Create);
                        await stream.CopyToAsync(fileStream, stoppingToken);
                    }
                }
                catch
                {
                    // 集成日志框架记录异常，比如Serilog、NLog
                }
            }

            // 每24小时同步一次，可按需调整
            await Task.Delay(TimeSpan.FromHours(24), stoppingToken);
        }
    }
}

注册后台服务 #

在Program.cs中添加服务注册：

builder.Services.AddHostedService<FaviconSyncService>();
builder.Services.AddHttpClient();

前端调用方式 #

直接引用本地同步后的图标：

<img src="/synced-favicons/site1_com.ico" alt="网站图标" />

优化建议 #

• 增加文件校验逻辑，避免重复下载未更新的图标
• 同步失败时添加重试机制，确保图标能正常获取
• 可将图标存储到云存储（如OSS），再通过HTTPS地址引用，减轻服务器压力

内容的提问来源于stack exchange，提问作者Jonathan Wood