混合内容场景下捕获不安全响应错误的方案咨询

首先明确：浏览器的混合内容安全策略会直接拦截HTTPS页面中发起的所有HTTP资源请求——不管是iframe直接加载还是XMLHttpRequest请求，都会被阻断。这就是你看到onerror触发且无有效响应信息的原因：请求根本没发出去，浏览器为了安全不会暴露具体错误细节。

可行的解决方案有两种： #

1. 提前判断目标URL协议，直接拦截HTTP请求

在尝试加载前检查目标链接的协议，如果是HTTP，直接显示错误提示，避免不必要的加载尝试：

$(document).on('click', '.extLink', function (e) {
    e.preventDefault(); // 阻止默认跳转
    var frametarget = $(this).attr('href');
    $('#lblModalTitle').text('blahblah');

    // 解析并检查目标URL协议
    const url = new URL(frametarget);
    if (url.protocol === 'http:') {
        // 替换iframe内容为错误提示
        $('#modaliframe').replaceWith('<div class="error-message">无法加载该页面：当前站点使用HTTPS，无法加载HTTP协议的外部内容</div>');
        return;
    }

    // 正常加载HTTPS资源
    $('#modaliframe').attr("src", frametarget);
});

2. 监听iframe的加载错误事件

如果无法提前判断URL协议（比如URL是相对路径或动态生成），可以监听iframe的error事件，当加载失败时触发错误提示：

$(document).on('click', '.extLink', function (e) {
    e.preventDefault();
    var frametarget = $(this).attr('href');
    $('#lblModalTitle').text('blahblah');
    const $iframe = $('#modaliframe');
    
    // 重置iframe状态并移除旧监听
    $iframe.off('error').attr("src", "about:blank");
    // 绑定错误事件回调
    $iframe.on('error', function() {
        $(this).replaceWith('<div class="error-message">页面加载失败：无法加载不安全的外部内容</div>');
    });
    // 尝试加载目标URL
    $iframe.attr("src", frametarget);
});

关键说明 #

浏览器对混合内容的拦截是强制安全限制，无法通过前端代码绕过，只能通过上述方式提前拦截或捕获错误状态。替换iframe为错误提示时，建议保留弹窗原有结构，只替换body内的内容，保证UI一致性。

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