如何在Blazor中正确嵌入<iframe>加载子应用？

你碰到的错误是因为子应用返回的HTTP响应头里带了X-Frame-Options: sameorigin，浏览器的安全策略会阻止跨源的iframe加载这个应用。下面是具体的解决办法：

开发环境快速解决 #

Blazor独立WebAssembly应用开发时由ASP.NET Core开发服务器托管，直接修改服务器的响应头配置即可：

1. 在子应用根目录新建或修改Program.cs，添加静态文件的响应头处理逻辑：

var builder = WebApplication.CreateBuilder(args);

// 配置静态文件响应头，移除X-Frame-Options
builder.Services.Configure<Microsoft.AspNetCore.StaticFiles.StaticFileOptions>(options =>
{
    options.OnPrepareResponse = ctx =>
    {
        ctx.Context.Response.Headers.Remove("X-Frame-Options");
        // 若需指定允许的容器域名，可添加以下配置（替换为你的容器应用地址）
        // ctx.Context.Response.Headers.Append("Content-Security-Policy", "frame-ancestors https://localhost:你的容器端口;");
    };
});

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
app.UseRouting();
app.MapFallbackToFile("index.html");

app.Run();

保存后重启子应用的开发服务器，iframe即可正常加载。

推荐的安全配置（生产/开发通用） #

X-Frame-Options是旧标准，更推荐用Content-Security-Policy的frame-ancestors指令，能更精准控制允许嵌入的域名：

方式1：通过服务器响应头设置 #

在上述Program.cs中，把移除X-Frame-Options的代码替换为添加Content-Security-Policy头：

ctx.Context.Response.Headers.Append("Content-Security-Policy", "frame-ancestors 'self' https://localhost:你的容器端口;");

生产环境将https://localhost:你的容器端口替换为实际的容器应用域名即可。

方式2：通过index.html添加meta标签 #

直接在子应用的wwwroot/index.html的<head>中添加一行：

<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'self' https://localhost:你的容器端口;">

注意：部分浏览器对meta标签的CSP支持有限，优先使用服务器响应头的方式。

生产环境部署时的配置 #

若将应用部署到第三方服务器（如NGINX、IIS、Azure静态Web Apps等），需在服务器配置中添加响应头：

• NGINX：在配置文件中添加add_header Content-Security-Policy "frame-ancestors https://你的容器域名;"
• IIS：在web.config中添加自定义HTTP响应头
• Azure Static Web Apps：在staticwebapp.config.json的headers节点中配置

内容的提问来源于stack exchange，提问作者Talal Habib