如何将外部源的.html文件加载并显示到Razor页面中

方案一：后台获取HTML内容后直接渲染 #

这种方式可以绕过Blob内容类型的限制，将外部HTML内容嵌入当前页面渲染。

1. 后台获取外部HTML内容 #

在PageModel中注入HttpClient，编写逻辑验证URL并获取内容：

public class ShowPageModel : PageModel
{
    private readonly HttpClient _httpClient;

    [BindProperty(SupportsGet = true)]
    public string urlPath { get; set; }
    public string ExternalHtmlContent { get; set; }

    public ShowPageModel(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    public async Task OnGetAsync()
    {
        // 验证URL合法性，仅允许Azure Blob地址
        if (!Uri.TryCreate(urlPath, UriKind.Absolute, out var validUri) || 
            !validUri.Host.EndsWith("blob.core.windows.net"))
        {
            ExternalHtmlContent = "<p>无效的文件地址</p>";
            return;
        }

        try
        {
            ExternalHtmlContent = await _httpClient.GetStringAsync(validUri);
        }
        catch (Exception ex)
        {
            ExternalHtmlContent = $"<p>加载文件失败：{ex.Message}</p>";
        }
    }
}

2. 在Razor页面中渲染内容 #

使用Html.Raw直接输出获取到的HTML：

@Html.Raw(Model.ExternalHtmlContent)

注意：外部HTML的样式、脚本可能和当前页面冲突，若需要隔离，可考虑用<div>包裹并添加独立样式，或过滤掉脚本标签。

方案二：修复iframe的下载问题 #

iframe触发文件下载，本质是Azure Blob中该HTML文件的Content-Type未设置为text/html（默认是application/octet-stream）。

操作步骤： #

• 登录Azure门户，找到目标Blob容器和HTML文件
• 进入文件的「属性」设置，将「Content-Type」修改为text/html
• 保存后，重新使用iframe加载：

<iframe src="@Model.urlPath" width="100%" height="600px"></iframe>

如果没有权限修改Blob的属性，方案一仍是更可靠的选择。

关键注意事项 #

• 必须严格验证传入的urlPath，防止恶意URL注入或非法访问
• 若外部HTML来源不可信，建议优先用iframe隔离，避免脚本安全风险
• 后台请求要做好异常处理，避免因网络问题或文件不存在导致页面崩溃

内容的提问来源于stack exchange，提问作者Brett JB