如何在非Asp.Net站点嵌入Asp.Net Core开发的3D模型配置器

可行性结论 #

可以通过iframe实现，这也是当前跨技术栈嵌入独立Web应用的最优首选方案，和宿主站点的技术栈完全解耦，不管宿主站点是不是Asp.Net开发的，都可以无跳转嵌入使用。

具体实现方案 #

1. Asp.Net Core 服务端配置 #

首先需要配置响应头，避免浏览器的安全策略拦截嵌入请求，在Program.cs中添加如下配置：

app.Use(async (context, next) =>
{
    // 生产环境请将*替换为实际允许嵌入的宿主站点域名，多个域名用空格分隔
    context.Response.Headers.Append("Content-Security-Policy", "frame-ancestors 'self' *;");
    // 兼容旧版浏览器的防嵌入拦截配置
    context.Response.Headers.Append("X-Frame-Options", "ALLOW-FROM *");
    await next();
});

• 同步开启3D静态资源的gzip/brotli压缩、缓存配置，降低嵌入后的加载耗时
• 如果需要和宿主站点做交互，在配置工具页面添加postMessage通信逻辑，用于传递高度信息、配置参数等内容
• 配置接口的CORS规则，允许宿主站点跨域调用配置工具的相关接口

2. 宿主站点嵌入方式 #

宿主站点只需要在需要展示的位置插入iframe标签即可，示例代码如下：

<iframe 
    src="https://你部署3D配置工具的访问地址" 
    width="100%" 
    height="800px"
    frameborder="0"
    allow="fullscreen; autoplay"
    id="3d-config-frame">
</iframe>

如果需要做自适应高度，可以补充一段JS接收配置工具页面传递的尺寸信息：

window.addEventListener('message', (e) => {
    // 校验来源避免安全风险，替换为你配置工具的实际部署域名
    if(e.origin !== 'https://你部署3D配置工具的访问地址') return;
    if(e.data.type === 'resize') {
        document.getElementById('3d-config-frame').style.height = `${e.data.height}px`;
    }
})

3. 进阶优化项 #

• 如果需要宿主站点和配置工具双向交互（比如宿主站点按钮切换配置、配置工具回传选中的配置参数给宿主下单），双方约定postMessage的通信格式即可，完全不需要技术栈对齐
• 给iframe加懒加载属性loading="lazy"，只有滚动到可视区域时才加载资源，降低宿主站点首屏压力
• 增加WebGL能力检测逻辑，对不支持3D渲染的浏览器提前给出友好提示

注意事项 #

• 生产环境严禁把frame-ancestors设置为*，必须明确指定允许嵌入的站点域名，避免被恶意站点盗用
• 可以在iframe的src中增加来源标识参数，比如src="xxx?from=合作站点A"，方便统计不同嵌入渠道的使用数据

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